Twitter-bootstrap: How to use row-fluid class properly?

Twitter-bootstrap: How to use row-fluid class properly?

I have a problem understanding how row-fluid class works. According to the documentation it adjusts itself to fluid design such as responsive design. So if it has enough space it makes it fit on the same row otherwise it goes to the next line.
However looking at this example here : https://duelify.com/
Strangely enough the first three article headers fit on first row.
Second row and rest are slightly pushed to the right. But looking at the html (below) no additional classes are involved to cause this ‘side effect’.

Why aren’t the article headers fitting in the one row. Why is there this random gap in between? Is there a way to make them appear ordered without any gaps in between?

Solutions/Answers:

Solution 1:

In your case, proper code will be like

<div class="row-fluid">
   <div class="span4"></div>
   <div class="span4"></div>
   <div class="span4"></div>
</div>
<div class="row-fluid">
   <div class="span4"></div>
   <div class="span4"></div>
   <div class="span4"></div>
</div>

etc...

In every row-fluid class maximum sum of span classes must be up to 12. Span classes have left margin. Only last child in one row-fluid don’t have left margin.

Related:  How to Extend Twitter Bootstrap Plugin

Look again now at examples on Twitter Bootstrap documentation. “For a simple two column layout, create a .row and add the appropriate number of .span columns. As this is a 12-column grid, each .span spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

Solution 2:

There are a couple of things going on here. Remember, by default, the total size of the spans in a fluid-row should add up to 12. There is quite a bit more here, so when the css defines the width of a span4 as approximately 33% they are actually exceeding 100%, so they are going to a new line. But they are not clearing, so you end up with them looping around and making columns like on the page.

The reason you have the space to the left of what would be the second row is that bootstrap defines ‘gutters’ to give the columns some margin. Because of the excess columns being used you see them. There is specific css to reduce the gutter on the first span of a row to 0, hence why there is no space on the first one.

Related:  How to make bootstrap column height to 100% row height? [duplicate]

The subsequent ‘rows’ have only two columns because the presence of the additional gutter throws off the math and makes the three span4s add up to more than 100% width, causing them to wrap.

Solution 3:

The following code will work after container (for Responsive layout):

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span4"></div> 
    </div>
    <div class="row-fluid">
      <div class="span4"></div>
    </div>
</div>

References