Five and Ten Column Layouts in Bootstrap

If you would like an equal five and ten column layout in Twitter Bootstrap, then include the following CSS in your Bootstrap stylesheet.

.tencolumn .span1 {width: 7.6923076923076925%;
  *width: 7.628205128205129%;}
.fivecolumn .span2 {width: 17.94871794871795%;
  *width: 17.884615384615383%;}

Applying the classes to your HTML

<div class="row fivecolumn">
<div class="span2">Column 1</div>
<div class="span2">Column 2</div>
<div class="span2">Column 3</div>
<div class="span2">Column 4</div>
<div class="span2">Column 5</div>

If you do not intend to use the 12 column layout then I would highly recommend customizing bootstrap and setting the Grid system to ten columns.

Leave a Reply