Reputation: 754

8 Columns in Twitter Bootstrap

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>

Upvotes: 37

Answers (10)

Carol Skelly

Reputation: 362760

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

Upvotes: 4

Gajendra K S

Reputation: 117

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>

Upvotes: -1

Pankaj Upadhyay

Reputation: 2138

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

Upvotes: 2

jer23jk

Reputation: 126

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>

Upvotes: 2

Cory Dymond

Reputation: 251

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.

Upvotes: 25

Niran Manandhar

Reputation: 1107

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

Upvotes: 93

Monzurul Haque

Reputation: 114

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

Upvotes: 0

Thanushka

Reputation: 227

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>

Upvotes: 17