Center a 9-column layout using twitter bootstrap 3
css, twitter-bootstrap, twitter-bootstrap-3
Solution
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
Problem
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.