Center a 9-column layout using twitter bootstrap 3 - css

Question

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.

Answer 1

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

Answer 2

To really center a 9-column layout you must use custom CSS with margins.
ZimSystem's solution is close but not exact, its off by 1/288th of the screen width. That is the if the 9 columns represent 9/12th of the screen width, the columns are 23/144 from the left but 22/144 from the right. Furthermore, rather than the 3 content columns being 3/12 they are really 11/48.
The correct way is to nest a row within a row, adding 12.5% margins to the sides of the inner row
<div class="text-center center-header">x</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row center-row-9">
<div class="col-md-4 text-center">x</div>
<div class="col-md-4 text-center">x</div>
<div class="col-md-4 text-center">x</div>
</div>
</div>
</div>
</div>
The center-row-9 css would simply be margin: 0 12.5%
I compare ZimSystem's solution with a margin based solution here http://codepen.io/jdkahn/pen/mEoaoY

Answer 3

This works for me.
I even added a left and right margin, but you can remove it if you want.
.padding-left-10 {
padding-left: 15px;
padding-right: 0px;
}
.padding-right-10 {
padding-left: 0px;
padding-right: 15px;
}
.padding-0 {
padding: 0;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-left-10 "><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
</div>
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
</div>
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-right-10"><div class="well">x</div></div>
</div>
</div>
</div>
</div>
</div>