Why Do My Bootstrap Columns Overlap?

I am making a website with a one-page layout, where every section is full-width and has the same height as the viewport. I use bootstrap to make the content inside these sections r

Solution 1:

You have to remove position:absolute property from both of your div id and class. As follows,

#map  {
    height: 40vh;
    width: 80%;
    background: white;
    margin-top: 270px;
    margin-left: 20px;
    display: block;
}

.otherdiv {
    height: 40vh;
    width: 80%;
    background: white;  
    margin-top: 270px;
    margin-left: 20px;
    display: block;
}

Heres's CODEPEN example.Now it's stack properly.

Solution 2:

Make sure to use the correct grid viewport in your columns.

Bootstrap has four of them (xs, sm, md and lg) and they work for their defined widths and up. When you set the columns with md they will only work in a window with at least 992px.

If you want these columns to always occupy half of the screen, use the col-xs-6 class.

You can find this information in Bootstrap's official documentation