CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
V.Mike
V.Mike

Reputation: 43

How can I make Bootstrap div full width? (based on screen)

This is the code I wrote using Bootstrap:

 <div class='container-fluid' >
    <div style='background-color:#24242a;height:20vh;margin-top:10%;left:0;margin-left:0%;'>
        <div class="row" style='padding-top:20px;width:100%;' >
            <center><h1 style='font-weight: 400;letter-spacing: 0.05em;color:#E4D5D5;'>CINE SUNTEM <span style='font-weight:bold;'>NOI?</span></h1></center>
          <div class="col-xs-6 col-sm-4 col-lg-4">
            1
          </div>


          <div class="col-xs-6 col-sm-4 col-lg-4">
            2
          </div>


          <div class="col-xs-6 col-sm-4 col-lg-4">
            3
          </div>


        </div>
      </div>
  </div> <!-- END CONTAINER -->

But the div is only 80% the width of the screen and centered. How can I make it 100% width? I will appreciate all answers.

Upvotes: 4

Views: 5681

Answers (1)

tech4242
tech4242

Reputation: 2468

The class container-fluid is not supposed to be full width. If you want to e.g. add a background color that stretches to 100% width of the window I suggest you make a wrapper div outside of the container-fluid:

<div style="width:100%; height: 600px; background-color: red;">
<div class="container-fluid">...</div>
</div>

The container-fluid class is just a fluid container as an addition to the normal container class from Bootstrap. I have used this many times and it should work! Try the code above to check it out.

EDIT

The OP used the code above to introduce a full-width container with Bootstrap. He also had the additional problem of having a parent div, which already had the container class. Beware of this as the parent can also additionally limit the ability to introduce full-width window divs.

Upvotes: 2

Related Questions