CODEWITHSUNDEEP
csstwitter-bootstrap
randombits
randombits

Reputation: 48450

Bootstrap span breaking into a new line, not aligning with other spans in a row

I have some simple markup that looks like the following:

<div class="row" id="features">
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-trophy"></i></div>
            <h3>some header</h3>
            <p>some text</p>
        </div>        
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-comments"></i></div>
            <h3>some header</h3>
            <p>some text.</p>
        </div>       
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-male"></i></div>
            <h3>another header</h3>
            <p>more text</p>
        </div>
         <div class="span3 divider">
            <div class="featureicon"><i class="icon-wrench"></i></div>
            <h3>yet another header</h3>
            <p>some more text</p>
          </div>
        <div class="span3">
          <div class="featureicon"><i class="icon-male"></i></div>
            <h3>last header</h3>
            <p>last bit of text</p>
        </div>
      </div><!--end row-->

Without me adding that final span3 div, everything looks and feels great. The problem is, I need 5 span's in this row and not 4. There is certainly room on the screen for it to fit, but it just drops to the next row instead. What's the best way to make all five span's in Twitter bootstrap fit on one physical row?

Upvotes: 1

Views: 10662

Answers (1)

JorgeeFG
JorgeeFG

Reputation: 5961

spans can be up to a maximun of 12 combined.

So..... 4 4 4, 3 3 3 3, 12, 10 2, etc are possible combinations.

See: http://twitter.github.io/bootstrap/scaffolding.html

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

You can go here: http://twitter.github.io/bootstrap/customize.html and customize the quantity of columns. ( I never tried personally )

Upvotes: 2

Related Questions