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.

[http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3/22471911#22471911](http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3/22471911#22471911) — Sender, Sep 27 '15 at 06:16

score 6 · Accepted Answer · answered Dec 01 '14 at 13:09

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

Nice trick, you have to look hard to notice it's not quite centered. Simple solution that gets you 99.9% of the way to the goal. I'm using it! — ppovoski, Jun 15 '17 at 17:19

score 0 · Answer 2 · answered Aug 17 '16 at 23:43

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

score 0 · Answer 3 · answered Apr 07 '17 at 17:57

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>

Center a 9-column layout using twitter bootstrap 3

3 Answers3

Linked