Center a 9-column layout using twitter bootstrap 3

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