How can I make the bootstrap div complete? (based on screen)

Question

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% of the screen width and centered. How can I make 100% width? I will be grateful to everyone.

Answer 1

The class fluid container does not have to be full. If you want, for example, add a background color that extends up to 100% of the width of the window. I suggest you make a wrapper div outside the liquid container:

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

- Bootstrap. , ! , .

OP , Bootstrap. div, . , div.