There is a lot of great things going on with the new CSS framework from Twitter, Bootstrap -> http://twitter.github.com/bootstrap/. I used 1.0 for creating this site and a few others. Version 2.0 was just released and it fixed a lot of issues and is really just plain awesome.

Unfortunately, there have been a few things that have been bothering me about it, particularly the grid system. I felt constrained by the requirement of a containing .row around the spans. I couldn’t quite put a finger on what it was though. Then after doing a project with Blueprint -> http://blueprintcss.org/ last month, it hit me. In Bootstrap, you can’t style rows.

Bootstrap’s grid system will use left-margin in between columns to have built in padding between content areas. By default, it is 20px. Everyone does this. The problem that happens though is that the first column can’t have any left-margin or your content won’t be centered. (And likely be over 960px) To get around this, most frameworks will nip off the left-margin on the first column by using a pseudo css selector: first-child.

Boostrap uses a different technique. It places a negative left-margin on the containing .row instead of using a pseudo class. For the following markup, imagine we want to put a border around the row:

<div class="container">
    <div class="row">
        <div class="span6"></div>
        <div class="span6"></div>
    </div>
</div>

Yields:

Notice how the row in the above illustration sticks out past the .container element?

Their reason for this is valid. :first-child causes problems with calculating widths and makes things more complicated. But using a .row with negative left-margin means that any styling applied to the row (borders, backgrounds, etc) will stick out on the left hand side by an extra 20px. In the simplest case illustrated above, this is exactly how it occurs in your page.

So how do we fix this?

Simple. Add a <div> or HTML5 element like <article> or <section> as a parent to the row. Then style the parent element. Because of the .container that is used for the entire page, this div will be the appropriate width. When using a <section> tag, it even feels right, semantically. So, yay!

Here we have the fix:

<div class="container">
    <section>
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </section>
</div>

Which results in:

About the Author:

Learned something? Need help on your dev project? Well, I'm available for hire on project work:

  • Front End Development (jQuery, ExtJS, Backbone)
  • iOS Development
  • Server Side Development (Java Stack or Rails Stack)
  • System Architecture

Contact me:

Discussion

  1. Gabe Durazo says:

    Ah, simple! But it worked perfectly. Thanks.

  2. Lee says:

    Hi Mike, I tried this but the spans start to fold when a border is added to section.

    • Gopi says:

      @Lee: This is because, border add extra pixels and if you using full spans in the grid, then there is no space for this extra “border” of the span and hence the span start to fold

      Workaround is to do something like

      your content

      instead of

  3. Onwe says:

    Thanks for the clear explanation, didn’t know why Bootstrap is behaving the way it does.

  4. Ebru Gumus says:

    Thank you very muhc for this helpful post. That helped me to figure out the problem.

  5. Peter says:

    This is a cracking post. You explained and resolved an issue which had me completely stumped! Thank you for bloging your experiences with Bootstrap.

  6. Franz says:

    Hey, thanks for the tip.

    How do I manage to add a border around the whole row, though? As stated before (in the comments), that does not work. The solution explained how to do it for a span div, but not for the entire row…

  7. Marta says:

    Thank You!!!

  8. Lasse says:

    Thank you for posting this simple and well explained solution. The only problem I have is that this way of doing it leaves no space on either side of the span6-divs, is there a way to fix this? Will adding a margin or padding of 20px to either side of the section div be a solution?

  9. Astralis says:

    I just discovered the row issue.

    This solution is perfect! Thank you!

  10. Mon says:

    Hey,
    Nice post.
    Can we collapse a row using twitter bootstrap collapse?
    I tried but doesnt seem to be working :(

  11. pl_guest says:

    Thanks a lot! Your post was helpful for me! :)

  12. Aidan says:

    Thanks!

  13. Shaun Scovil says:

    Hey Mike, thanks for posting! This definitely pointed me in the right direction, but rather than use a wrapper element I ended up using the following CSS:

    `.row .row {
    margin-left: 0;
    }`

  14. Kasper says:

    Thanks, was looking for this!

  1. [... There is a lot of great things going on with the new CSS framework from Twitter, Bootstrap -> http://twitter.github.com/bootstrap/. I used 1.0 for creating this site and a few ...]

Leave a Comment