Styling columns of the same class within the same row in Bootstrap 3 Grids

Question

Using Bootstrap 3:

I have a row, div class="row", with 2 columns, both div class="col-xs-6". I want to style each column with different colors, say the background color, border, and padding of the column itself, but they are both of the same class "col-xs-6".

In rows, I can add a class name by changing div class="row" to div class="row top_row" to differentiate that specific row from all the other row classes. When I try to do the same with columns by changing div class="col-xs-6" to div class="col-xs-6 left_column", the style does not apply. Instead, all styling is removed for that specific column.

How do I apply different styles to columns of the same size (aka class name) within the same row?

<div class="row">
        <div class="col-xs-6">
            <h2>I am a:</h2>
            <ul>
                <li><a href="#">woman</a></li>
                <li><a href="#">man</a></li>
            </ul>
        </div>
        <div class="col-xs-6">
            <h2>interested in:</h2>
            <ul>
                <li><a href="#">women</a></li>
                <li><a href="#">men</a></li>
                <li><a href="#">both</a></li>
            </ul>
        </div>

you could use selector + or nth-child or nth-of-type or first-child, or last-child and so on , lot's of selector that you can find in jQuery too :) — G-Cyrillus
"all styling is removed for that specific column" - sounds like you spelled the class names wrong... — ganders
@JoannaJogramma you got one example with nth-child below :) where nth-child(1) could have been :first-child and no need of adding :nth-child(2)to the class name, or :last-child instead of nth-child(2) and no need of adding :nth-child(1) — G-Cyrillus

JerryHuang.me JerryHuang.me · Accepted Answer · 2014-01-13T19:19:42

You can use nth-child() Selector

HTML

<div class="row">
    <div class="col-xs-6">
        <h2>I am a:</h2>
        <ul>
            <li><a href="#">woman</a></li>
            <li><a href="#">man</a></li>
        </ul>
    </div>
    <div class="col-xs-6">
        <h2>interested in:</h2>
        <ul>
            <li><a href="#">women</a></li>
            <li><a href="#">men</a></li>
            <li><a href="#">both</a></li>
        </ul>
    </div>

CSS

div.col-xs-6:nth-child(1){
    background-color: rgb(0,255,0);
}

div.col-xs-6:nth-child(2){
    background-color: rgb(255,0,0);
}

Example: http://jsfiddle.net/9BS36/

Styling columns of the same class within the same row in Bootstrap 3 Grids

1 Answers