CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Joanna Jogramma
Joanna Jogramma

Reputation: 25

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

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>

Upvotes: 1

Views: 4880

Answers (1)

JerryHuang.me
JerryHuang.me

Reputation: 1790

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/

Upvotes: 1

Related Questions