Menu
Since bootstrap removed the *fluid css classes in v3.0, I couldn't find a way to build a two-column fluid layout. The goal is to achieve a layout similar to the Fluid Layout example in their old documantation: http://getbootstrap.com/2.3.2/scaffolding.html#layouts
600
A modern way of creating two columns, is to use CSS Flexbox.
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
col-lg- (large devices - screen width equal to or greater than 992px) . col-xl- (xlarge devices - screen width equal to or greater than 1200px)
The grid in Bootstrap 3 is now fluid by default (http://getbootstrap.com/getting-started/#migration-dropped). You just need to use .row and .container..
<div class="container"> <div class="row"> <div class="col-md-2"> Sidebar content </div> <div class="col-md-10"> Body content </div> </div> </div> This however will not be 100% width. If you want 100% width you can do something like this.. http://www.bootply.com/86324
UPDATE: 3.0.1 and later use container-fluid for full width.
56
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
