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

Internet Explorer will automatically apply a blue border to a div element when a CSS gradient is utilized

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Creating a radial gradient texture using CSS

When inserting a page break after a section, it seamlessly flows to the next page during printing

What is the best way to conceal a menu that automatically scrolls to the content when it is clicked?

Unusual images emerge following certain elements in this unique gallery

What is the best way to choose all <pre> tags that have just one line of content?

What steps can be taken to solve the JavaScript error provided below?

Organize pictures and words side by side on both sides at the same time

Tips for evenly and fully stretching a set number of horizontal navigation items across a designated container

Stop the border from curving along with the container's border radius

Mouseover Magic: Text and Captions Come Alive with JQuery

Is there a way for me to make my navigation fill the entire height of the header?

CSS - using numbers to create dynamic background images

Retrieving information from a dynamically generated HTML table using PHP

Tips for inserting active class on the main menu and adding an active class along with an icon on the sidebar menu

Sticky positioning for dropdown menu in table column body

Creating an inclusive h1 header with a logo: A step-by-step guide

The dropdown on my website is malfunctioning