37

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>
1

10 Answers 10

92
<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>
2
  • 1
    can you give some explanation about your solution ?
    – aberna
    Feb 12, 2015 at 13:22
  • 3
    dividing to two equal columns, i.e 2 "col-xs-6" then further dividing each "col-xs-6" to 4 equal columns. i.e "col-xs-3" we have 8 equal columns. Feb 13, 2015 at 2:57
25

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.

4
  • Based on @Cory's solution I created this Gist with full Css for Bootstrap grid in 10ths and 8ths. I use Css calc to prevent from using repeating decimals. May 20, 2017 at 0:53
  • Beautiful simple and GREAT explanation for extending! Thank you!
    – Dov Miller
    Jul 2, 2018 at 9:37
  • 1
    Any reason why you added the r in col-x08r?
    – Joe Eifert
    May 5, 2019 at 15:12
  • The solution works great. I hope one day the Grid System evolves to adjust automatically. Nov 20, 2020 at 0:06
17

Add a style like this in to the bootstrap stylesheet, style.css:

.col-8{
width: 12.5%;
}

Then add it to your html.

<div class="row">
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
</div>
1
  • 1
    This would override Bootstrap's .col-8 class and possibly mess up any other views you have using that class.
    – ricks
    Oct 6, 2021 at 21:30
10

I had the same problem and went 4 columns, each containing 2 nested columns.

4

Update 2020 - Bootstrap 4

The question is very applicable to Bootstrap, but the accepted answer is now out-of-date.

The simple method to get 8 equal columns is to use the auto-layout columns...

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

https://codeply.com/p/ds99xlkSGa

2

For 8 column grid you don't have to customize the css or html.

Simply create or copy this:

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

1
  • 2
    This seems to be almost identical to Niran Manandhar's solution. Apr 2, 2017 at 5:29
2
<div class="row">
    <div class="col-xs-6 col-md-6 col-sm-6">
        <div class="row">
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Make</b></p>
                    <p class="marginTop20">Nissan</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Model</b></p>
                    <p class="marginTop20">Tiara-5</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Engine no</b></p>
                    <p class="marginTop20">102354</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Chassis no</b></p>
                    <p class="marginTop20">2114-14</p>
                </div>
            div>
        </div>
    </div> 
    <div class="col-xs-6 col-md-6 col-sm-6">
        <div class="row">
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Mfg Year</b></p>
                    <p class="marginTop20">2016</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Seats</b></p>
                    <p class="marginTop20">5</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div class="premiumAtLifeRightBorder">
                    <p><b>Body Type</b></p>
                    <p class="marginTop20">Sedan</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-3 col-sm-3">
                <div>
                    <p><b>CC</b></p>
                    <p class="marginTop20">3900</p>
                </div>
            </div>
        </div>
    </div>
</div>
0

As BenM said above, Bootstrap uses a 12 column grid system, which won't divide cleanly into 8 equal columns.

If you absolutely require 8 columns, it might be worth checking out this, or even rolling your own.

0

You can follow this steps to achieve 8 column in bootstrap.

<!-- 8 Column -->
<div class="8-column">
    <!-- Container -->
    <div class="container">
        <!-- Parent row -->
        <div class="row">
            <!-- 1st parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /1st parent column -->
            <!-- 2nd parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /2nd parent column -->
            <!-- 3rd parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /3rd parent column -->
            <!-- 4th parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /4th parent column -->
        </div>
        <!-- /Parent row -->
    </div>
    <!-- /Container -->
</div>
<!-- /8 Column -->
-1

Best way to deal with this is to create table and divide the section with vw and then use bootstrap grid inside it.

My example is I wanted to divide layout into 63:37 ratio and again divide first part into 3 parts and second into two parts.

So I created table with two columns with width 63vw and 37vw then use bootstrap grid inside it respectively.

<div class="row">
<table id="main_table" style="width: 100%;height: 100%" cellspacing="0">
    <tr style="width: 100%; position: relative">
        <td id="donut1" style="width: 63vw;">
            <div class="row">
                <div class="col-sm-4">
                    Loading
                </div>
                <div class="col-sm-4">
                    Loading
                </div>
                <div class="col-sm-4">
                    Loading
                </div>
            </div>
        </td>
        <td id="donut1" style="width: 37vw;">
            <div class="row">
                <div class="col-sm-6">
                    Loading
                </div>
                <div class="col-sm-6">
                    Loading
                </div>
            </div>
        </td>
    </tr>
</table>

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.