In regards to BS 3 if I wanted just a narrow column of content on the right I might use an offset class of 9 and a column of 3.
However, what if I wanted the reverse and on the left side? Is there a proper way to do this in BS or should I just use my own CSS methods? I was thinking of creating a column of 3 with my content and just an empty column of 9.
offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right. This all stuff produced results .
An offset is used to push columns over for more spacing. To use offsets on large displays, use the . col-md-offset-* classes.
The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)
Bootstrap rows always contain their floats and create new lines. You don't need to worry about filling blank columns, just make sure they don't add up to more than 12.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-xs-3 col-xs-offset-9"> I'm a right column of 3 </div> </div> <div class="row"> <div class="col-xs-3"> I'm a left column of 3 </div> </div> <div class="panel panel-default"> <div class="panel-body"> And I'm some content below both columns </div> </div> </div>
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