Menu
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
Desired setup:
Currently:
My first idea was to create an div class, give it a background color, and give it 100% width.
.block { width: 100%; background: #fff; } However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
681
w-100 class to split a row's columns into two rows, when you could just make two rows? Bookmark this question.
container class provides a responsive fixed width container. The . container-fluid class provides a full width container, spanning the entire width of the viewport.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
Bootstrap 3:
<body> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"></div> <div class="col-lg-6"></div> </div> <div class="row"> <div class="col-lg-8"></div> <div class="col-lg-4"></div> </div> <div class="row"> <div class="col-lg-12"></div> </div> </div> </body> Bootstrap 2:
<body> <div class="row"> <div class="span6"></div> <div class="span6"></div> </div> <div class="row"> <div class="span8"></div> <div class="span4"></div> </div> <div class="row"> <div class="span12"></div> </div> </body> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
