CODEWITHSUNDEEP
csshtmltwitter-bootstrapresponsive-designless
Adam Waite
Adam Waite

Reputation: 18855

Twitter Bootstrap and Responsive Breakpoints Without Javascript

Let's say I have markup:

<div class="container-fluid">

            <!-- 1 Col -->
            <div class="row-fluid">
                <div class="span12">
                    <h2>1</h2>
                </div>
            </div>

            <!-- 2 Col -->
            <div class="row-fluid">
                <div class="span6">
                    <h2>2</h2>
                </div>
                <div class="span6">
                    <h2>2</h2>
                </div>
            </div>
</div>

and let's say I want the 2 columns in the second row to become span12's and go full screen when the window resolution is at 400px:

Using:

@media only screen 
and (max-width : 400px) {


}

Is there some way in bootstrap of saying: 'All span6's should span12 at this resolution'?

I can achieve it using hacky ways such as:

@media only screen 
and (max-width : 400px) {
    .span6{
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0px !important;
        padding: 0 !important;
    }
}

But that is quite clearly disgusting.

I also know I could append a class with JS, but I don't want to use Javascript - this site has to be clean!

EDIT

James has come up with a nice solution below, but should I want to do similar for splitting span3's as span6's (from 4 columns to 2) the gutters force it to misalign the different elements. I'm starting to think what I want to do in my head is impossible or extremely difficult without Javascript.

Thanks.

Upvotes: 1

Views: 2508

Answers (1)

James South
James South

Reputation: 10635

Why not use an extra class on the row e.g

<div class="container-fluid">

        <!-- 1 Col -->
        <div class="row-fluid">
            <div class="span12">
                <h2>1</h2>
            </div>
        </div>

        <!-- 2 Col -->
        <div class="row-fluid row-resize">
            <div class="span6">
                <h2>2</h2>
            </div>
            <div class="span6">
                <h2>2</h2>
            </div>
        </div>
</div>

You could then just use specificity on your selector

@media only screen 
and (max-width : 400px) {
    .row-resize >.span6{
        width: 100%;
        float: none ;
        margin: 0 0 20px 0px;
        padding: 0;
    }
}

Upvotes: 1

Related Questions