8 Columns in Twitter Bootstrap

Question

How can I set up 8 equal columns in the latest version of Twitter bootstrap.

I can create 4 equal columns by doing the following but don't get how I can get 8:

    <div class="col-sm-12">         <div class="row">             <div class="col-sm-3">                 <div class="col-sm-12 col-xs-6">                     <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>                 </div>             </div>             <div class="col-sm-3">                 <div class="col-sm-12 col-xs-6">                     <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>                 </div>             </div>             <div class="col-sm-3">                 <div class="col-sm-12 col-xs-6">                     <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>                 </div>             </div>             <div class="col-sm-3">                 <div class="col-sm-12 col-xs-6">                     <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>                 </div>             </div>         </div>     </div> 

Answer 1

<div class="row">       <div class="col-xs-6">             <div class="row">                 <div class="col-xs-3">                             1                 </div>                 <div class="col-xs-3">                             2                 </div>                 <div class="col-xs-3">                             3                 </div>                 <div class="col-xs-3">                             4                 </div>           </div>     </div>      <div class="col-xs-6">             <div class="row">                 <div class="col-xs-3">                             5                    </div>                 <div class="col-xs-3">                             6                 </div>                 <div class="col-xs-3">                             7                 </div>                 <div class="col-xs-3">                             8                 </div>           </div>     </div> </div> 

Answer 2

I know that this is a pretty old topic, but it's the top search result for this problem, so I hope it's ok that I come through with an answer that I think is better than any of the current options provided here.

In an n-column layout, I don't want to have to finagle some weird .row .col- stuff that doesn't allow me to resize when I move down in breakpoints.

For instance, the current accepted answer here correctly points out that you can't do this with default bootstrap, but the next answer in line suggests that you nest .col-xs-3's inside of .col-xs-6's and I assume a lot of people coming here are using that because it is the only workable answer you can find in the first page of a google search.

What if I want 8 columns on the lg breakpoint and then 4 columns on tablets and 2 columns on mobile? That answer does not degrade gracefully. This method will, and it's incredibly easy to implement.

First, add this to your CSS file:

.col-xs-8r, .col-sm-8r, .col-md-8r, .col-lg-8r {     position: relative;     min-height: 1px;     padding-right: 15px;     padding-left: 15px; }  .col-xs-8r {     width: 12.5%;     float: left; }  @media (min-width: 768px) {     .col-sm-8r {         width: 12.5%;         float: left;     } }  @media (min-width: 992px) {     .col-md-8r {         width: 12.5%;         float: left;     } }  @media (min-width: 1200px) {     .col-lg-8r {         width: 12.5%;         float: left;     } } 

Next, add col-*-8r to your columns like so:

<div class="row">     <div class="col-xs-4 col-sm-3 col-md-8r">         ...     </div> </div> 

Now, you have an 8 column layout that can work on all breakpoints.

The cool thing about this method is that if you need some odd number of columns, it's very easy to extend this out. You simply divide 100 by however many columns you need and then use that number in place of the 4 instances of width: 12.5%; in the code above (obviously, don't forget to update the class names to whatever number you are using).

For instance, if you need a 7 column layout, you would use the absurdly long width: 14.28571428571429% in place of those 4 instances, change your class names to be .col-*-7r and then you can drop the class name in anywhere you want.