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:

Answer 1

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

Answer 2

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

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

Answer 4

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

Answer 5

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>

Answer 6

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>