V.Mike V.Mike - 3 months ago 10x
CSS Question

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">

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

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

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

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


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>

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.


I wrote this under the assumption that you don't have a parent div, which is not a part of your code posted here that already limits the width to below 100%.