Bootstrap div alignement issue

Asked by At

I'm having issue trying to align my div in Bootstrap 3.

Here's what I am trying to accomplish : enter image description here

I have worked with pull and push but I guess I'm not good enough with it.

Code :

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3 blue">
            blue
        </div>
        <div class="col-md-3 col-md-pull-9 red">
            red
        </div>
        <div class="col-md-9 col-md-push-3 orange">
            orange
        </div>
        <div class="col-md-3 col-md-pull-9 green">
            green
        </div>
        <div class="col-md-3 col-md-pull-9 purple">
            purple
        </div>             
    </div>
</div>

http://jsfiddle.net/bva5z74w/1/

Thanks

3 Answers

2
Christina On Best Solutions

I was watching this to see if anyone would come answer the obvious: don't use bootstrap push and pull for this. Use float right and no floats. Blue must be taller than red at the min-width, other than that I think this will work smoothly.

enter image description here

DEMO: http://jsbin.com/degeju/1/

CSS:

.blue {
    background: blue
}
.red {
    background: red
}
.orange {
    background: orange
}
.green {
    background: green
}
.purple {
    background: purple
}
.red,
.blue,
.green,
.orange,
.purple {
    height: 50px
}

@media (min-width:992px) { 
    .blue {
        height: 600px;
        float: right;
    }
    .red {
        height: 300px;
        float: none;
    }
    .orange {
        height: 400px;
        float: right;
    }
    .green {
        height: 200px;
        float: none;
    }
    .purple {
        height: 200px;
        float: none;
    }
}

HTML

<div class="container">
    <div class="row">
        <div class="col-md-9 blue">
            blue
        </div>
        <div class="col-md-3 red">
            red
        </div>
        <div class="col-md-9 orange">
            orange
        </div>
        <div class="col-md-3 green">
            green
        </div>
        <div class="col-md-3 purple">
            purple
        </div>             
    </div>
</div>  
-1
Ehud Shahak On

div has a display type "block", by default this means that each div will be shown below another div.

this means that someway you've changed some of the css, specifically with floats or display:inline.

if you're not sure how to find and change this you can always make sure each div has width:100%;

that will make sure the div catches the whole width of it's parent container.

1
Alex W On

The HTML you have will work perfectly, just remove the pull on the purple block:

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3 blue">
            blue
        </div>
        <div class="col-md-3 col-md-pull-9 red">
            red
        </div>
        <div class="col-md-9 col-md-push-3 orange">
            orange
        </div>
        <div class="col-md-3 col-md-pull-9 green">
            green
        </div>
        <div class="col-md-3 purple">
            purple
        </div>             
    </div>
</div>

http://www.bootply.com/dMNG75tSf0

Edit:

The float on the left elements is causing them to collapse to fit their contents. However, with media queries you can set the height to be the same height as the adjacent right element.

@media (max-width:1199px) {
    .red {
        height: 360px;
    }
}
@media (min-width:1200px) {
    .red {
        height: 300px;
    }
}

The obvious drawback is this limits the fix to browsers that support media queries. Therefore, Christina's answer is better, assuming it works consistently across browsers.