CODEWITHSUNDEEP
csstwitter-bootstrap
Coded Container
Coded Container

Reputation: 863

Bootstrap - I cannot center my five two columns inside of a ten column inside of a twelve column

I cannot center my five two columns inside of a ten column inside of a twelve column. http://jsfiddle.net/p8znkgv2/. I have tried the following "solutions" without any luck:

<div class="container">
<div class="row">
<div class="col-sm-12">
    <div class="col-sm-1"> </div>
    <div class="col-sm-10 col-centered">
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
        <div class="col-sm-2">Coontent</div>
    </div>
    </div>
    <div class="col-sm-1"> </div>
</div>


.col-centered{ margin: auto; float: none; }

So how can I center each two column inside the ten column with the ten column centered inside the twelve column?

Upvotes: 0

Views: 109

Answers (3)

Chris Yongchu
Chris Yongchu

Reputation: 789

So how can I center each two column inside the ten column with the ten column centered inside the twelve column?

By using .col-sm-offset-* class. Examples can be found here. http://getbootstrap.com/css/#grid-offsetting. Here's a fiddle as well. http://jsfiddle.net/yongchuc/m12cysv1/

Upvotes: 1

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13699

A lot of problems with your structure.

One is you create child div elements with those grid classes e.g. col-sm-* without adding and element with .row class first.

Html should be:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-1"> </div>
                <div class="col-sm-10 col-centered">
                    <div class="row">
                        <div class="col-sm-2">Coontent</div>
                        <div class="col-sm-2">Coontent</div>
                        <div class="col-sm-2">Coontent</div>
                        <div class="col-sm-2">Coontent</div>
                        <div class="col-sm-2">Coontent</div>
                    </div>    
                </div>
                <div class="col-sm-1"> </div>
            </div>
        </div>
    </div>    
</div>

And regarding to center those 5 cols, since there's no specific class for 5 cols since it's a 12 grid system, add a custom style for those elements.

e.g.

.col-centered .row .col-sm-2 {
    width: 20%;
}

Fiddle

Upvotes: 1

bumpy
bumpy

Reputation: 2002

Something like this? http://jsfiddle.net/p8znkgv2/2/

<div class="container">
    <div class="row">
    <div class="col-sm-12">
        <div class="col-sm-10 col-sm-offset-1">
            <div class="col-sm-2 col-sm-offset-1">Coontent</div>
            <div class="col-sm-2">Coontent</div>
            <div class="col-sm-2">Coontent</div>
            <div class="col-sm-2">Coontent</div>
            <div class="col-sm-2">Coontent</div>
        </div>
        </div>
        <div class="col-sm-1"> </div>
    </div>
</div>

Upvotes: 1

Related Questions