Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Posted by Natasha McDiarmid
Natasha McDiarmid
11,400 Points

How to Centre a Row of Divs that Don't Equal 12?

I'm use to working with Foundation and I'm currently working with Bootstrap.

Foundation has an easy to use center class. For example: small-centered

From what I've read on Bootstrap, there doesn't appear to be anything that does this.

The problem comes up when you have columns that don't equal 12 but you want the columns centered on the page.

I had to add my own code to achieve this, but I'm just wondering if this is in the docs and I'm just overlooking it.

2 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Bootstrap doesn't have that same feature inherently. However, you can can use offsets to push a column over. Just set it to half of the remaining space you want. For example, if you had an 8 column, you'd set the offset to 2.

<div class="col-sm-offset-2 col-sm-8">
Centered Column
</div>

The problem with this method is that it only works when you have an even number of leftover columns. As a quick fix, you can add:

.col-centered {
  float: none;
  margin: 0 auto;
}

To your stylesheet and add that class to whichever column you'd like to center. However, there is still problem with this solution in that you can only center one column. It wouldn't work if you wanted a col-sm-4 and col-sm-3 side by side and centered.

So the best solution, in my opinion, is the one suggested at minimit.com. Create a row-centered class and a col-centered class. Add the following rules:

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

Add .row-centered to the parent row and .col-centered to all children columns. See here for an example for how to set up your 3/3/3

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

I just noticed that with the minimit solution, columns don't collapse at their respective breakpoints. I added the default Bootstrap breakpoints and altered the .col-centered class to be anything that included col-centered-. Seems to be working like it should now.

/* centered columns styles */
.row-centered {
    text-align:center;
}

[class*="col-centered-"] {
    display: block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

/* Default BS breakpoints */
@media (min-width: 768px) {
  .col-centered-sm {
    display: inline-block
  }
}

@media (min-width: 992px) {
  .col-centered-md {
    display: inline-block
  }
}

@media (min-width: 1200px) {
  .col-centered-lg {
    display: inline-block
  }
}
David B Dinkins
David B Dinkins
71,472 Points
David B Dinkins
David B Dinkins
71,472 Points

Bootstrap has some offset classes for their columns. If you offset a 4-column div by 4 columns (or a 6-column div by 3 columns) then, it'll be centered within its row.

<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>
Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Natasha McDiarmid
Natasha McDiarmid
11,400 Points

The problem with offsets though is that your columns have to be even.

If I have three columns at 3/3/3, offset won't work.

David B Dinkins
David B Dinkins
71,472 Points

Have you tried using the display: block; margin: 0 auto; trick on the column you want centered? If that doesn't work I'd check out the code at this link: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Natasha McDiarmid
Natasha McDiarmid
11,400 Points

I have it working, I was just wondering if there was a way to do it using Bootstrap classes that I've overlooked. Seems strange their framework doesn't support that out of the box.

David B Dinkins
David B Dinkins
71,472 Points

Yea, I used to use Bootstrap, but once I was introduced to Foundation it was clear which was better.