bootstrap responsive fluid layout

Question

I have started to create a website design with bootstrap and need some help. I got 6 containers that I need to arrange (and scale) for different screen sizes but I cant get it to work.

I want different designs for screen with (in pixels):

• 992px and beyond
• 768px to 991px
• 480px-766px
• smaller up to 439px

I want to arrange my page components as the following image:

How can I do this? Do I need to create 4 different layouts and use the hidden- classes to determent what layout to show? That seems like a lot of work when updating the content. Or can I do it with some bootstrap black magic?

Answer 1

I think you will have to use a bit of custom css on top of bootstrap, perhaps define a few media queries to change the definition of class style for different window sizes.

My suggestion is have a look how Bootstrap 3 does it's justified navs. They change in a similar way when the viewport width is decreased.

http://getbootstrap.com/components/#nav-justified .

Answer 2

What bootstrap are you using? Ill help you anyway. Assuming your using 3.2.0...

http://www.bootply.com/krobF8P83o

 <div class="container-fluid"> <div class="row"> <div class="col-lg-12 col-md-8 col-sm-12 col-xs-12"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> </div> </div> <div class="col-lg-6 col-md-4 col-sm-12 col-xs-12"> <div class="row"> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div> </div> </div> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> <div class="row"> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div> </div> </div> </div> </div> 

Answer 3

bootstrap lowest possible width is 768px, beyond this everything will be handled the same.

but you can assign multiple col-width classes to one div within a row.

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                A
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                B
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                C
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
                D
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-6">
        E
        </div>
        <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6">
        F
        </div>
    </div>

Answer 4

It's definitely possible. Here is a fiddle and a video demo . All you have to is customize Bootstrap to insert the media-query breakpoints at your custom pixel dimensions, and adjust the cell heights for the same media queries (in order to make E == A + C == B + D).

The HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-lg-12">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>A</span></div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>B</span></div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>C</span></div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>D</span></div>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-6"><span>E</span></div>
        <div class="col-md-12 col-lg-6"><span>F</span></div>
    </div>
</div>

And the CSS:

span {
    display: block;
    float: left;
    width: 100%;
    padding: 100px 0;
    border: 5px solid black;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}
.row {
    margin: 0;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding: 0;
    margin: 0;
}