Menu
My code is like
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
I want to center those 9columns and 4columns. what is the right way to do it with bootstrap. For second case i tried
<div class="row">
<div class="col-md-2 col-md-offset-4"></div>
<div class="col-md-2"></div>
</div>
It works. What should i use to center the 9column of first row.
349
The first approach uses bootstrap offset class. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.
Populate the 'row' div with 5 divs with class 'col'. Because Bootstrap 4.0+ grid system has now shifted to Flexbox, the columns will arrange by themselves into five equally sized DOM elements.
You can use nesting and col-*-offset-* to center odd numbers of columns (where you have 3 in a row). The case of the row with 2 columns can be simply centered using offsets (no nesting required). Use text-center to center the content inside the columns.
<div class="container-fluid">
<div class="row">
<div class="col-md-11 col-md-offset-1">
<div class="row">
<div class="col-md-3 col-md-offset-1 text-center"></div>
<div class="col-md-3 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-4 text-center"></div>
<div class="col-md-2 text-center"></div>
</div>
</div>
Demo: http://bootply.com/HKy0mPMXv5
193
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
