Problem with aligning divs in Bootstrap

Question

Problem with aligning divs in Bootstrap

I am currently facing a challenge when it comes to aligning my div in Bootstrap 3.

My goal is to achieve the following:

I have experimented with pull and push commands, but it seems like I still need more practice.

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/

css twitter-bootstrap-3 sidebar col

Answer 1

Answer №1

As I was observing this, I couldn't help but wonder if someone would address the obvious solution: avoiding the use of bootstrap push and pull. Instead, opting for a combination of float right and no floats might be more effective. Maintaining the blue element to be taller than red at the minimum width seems crucial, beyond that, I believe everything else should function smoothly.

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>

Answer 2

As I was observing this, I couldn't help but wonder if someone would address the obvious solution: avoiding the use of bootstrap push and pull. Instead, opting for a combination of float right and no floats might be more effective. Maintaining the blue element to be taller than red at the minimum width seems crucial, beyond that, I believe everything else should function smoothly.

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>

Answer 3

Answer №2

Your current HTML code is almost there; the only adjustment needed is to remove the pull class from 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 issue with the element alignment can be resolved by adjusting the float property of the left elements. Using media queries, you can set the height to match that of the adjacent right element.

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

Keep in mind that this solution may not work on all browsers due to limited support for media queries. For a more consistent fix, refer to Christina's answer.

Answer 4

Your current HTML code is almost there; the only adjustment needed is to remove the pull class from 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 issue with the element alignment can be resolved by adjusting the float property of the left elements. Using media queries, you can set the height to match that of the adjacent right element.

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

Keep in mind that this solution may not work on all browsers due to limited support for media queries. For a more consistent fix, refer to Christina's answer.

Answer 5

Answer №3

The div element is set to a display type of "block", which typically means that each div will appear one below the other.

If you notice the layout is different, it could be due to CSS modifications such as floats or changing the display property to inline.

If you're unsure how to fix this issue, try setting each div to have a width of 100% to ensure it spans the entire width of its parent container.

This simple adjustment should help maintain the desired positioning and layout of your div elements.

Answer 6

The div element is set to a display type of "block", which typically means that each div will appear one below the other.

If you notice the layout is different, it could be due to CSS modifications such as floats or changing the display property to inline.

If you're unsure how to fix this issue, try setting each div to have a width of 100% to ensure it spans the entire width of its parent container.

This simple adjustment should help maintain the desired positioning and layout of your div elements.

Problem with aligning divs in Bootstrap

Answer №1

Answer №2

Answer №3

Similar questions

Top tips for utilizing CSS in a web component library to support various themes

Display a div with a link button when hovering over an image

When using HTML select, text alignment may not be centered properly in the Chrome

Eliminate the outline of the pager row in an asp.net grid view

Prevent line breaks caused by the span tag in Bootstrap 5

Ways to place a background image without using the background-position attribute

jQuery not functioning properly for adjusting quantities with plus and minus buttons

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

Eliminate any height changes in the ul element during a CSS transition

I am experiencing an issue where the CSS file is not being loaded in my HTML file while using the Netbeans IDE

Create a unique custom design for your Mapbox GL control

Tips on formatting text as bold or italic when tweeting from my website to our Twitter account

Implement real-time reporting functionality in Selenium

Bootstrap 3 with a left sidebar menu featuring subtle ghosting borders for a sleek and modern

What steps should we take to ensure that the container beside the fixed left navigation bar is responsive?

Opacity of absolutely positioned elements

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

Utilizing Jquery's fadeIn() function to make elements appear gradually on the webpage, whether

Safari failing to show SVG at correct alignment

Stacking background images in CSS above other contained elements in a div