CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
JAL
JAL

Reputation: 21563

How can I make a responsive layout with bootstrap that goes from 3 to 2 to 1 columns?

I have a three column layout done with Bootstrap 3. It works great in full size, with three columns, and with one column for small screens. In between, with two columns, it doesn't fill in all the space and looks like

* *
*
* *
*
* *
*

How can I make it fill in all the space in the medium size layout?

My current classes for the items are col-md-4 col-xs-12 col-sm-6

Full example code can be viewed here: http://majca.org/bootstrap_thumb_test.html

Upvotes: 1

Views: 297

Answers (2)

NoobEditor
NoobEditor

Reputation: 15871

A simple solution would be to remove <div class='row'> from every 3n count div because that is troubling your layout.

This way, since you have col-md-4 for divs and BS follows 12 grid system,you'll have max 3 divs in max-resolution and on resize it wont break the alignment

Check fiddle here (i have removed only one row class to demonstrate)

Upvotes: 2

Lloyd Banks
Lloyd Banks

Reputation: 36638

Put everything in one row. You have two rows right now in your mark-up and Bootstrap will always line break after the 3rd (and last) element in each row.

So instead of 

<div class = "row">
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
</div>
<div class = "row">
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
</div>

Use this

<div class = "row">
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
    <div class = "col-md-4 col-xs-12 col-sm-6">
        .....
    </div>
</div>

Upvotes: 3

Related Questions