Why do my bootstrap columns overlap?

Question

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 responsive, but my columns overlap (instead of stacking) when I decrease the viewport size and I can't figure out why.

Here is (part of) my css & html (hopefully it provides enough information to determine the problem):

.contact {
 min-height: 100vh;
    background-color: rgb(225, 138, 64);
    position: relative;
}

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

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

.maxWidth {
 max-width: 90%;
}

<div id="contact" class="contact">
 
 <div class="container maxWidth">
        <h1>Contact</h1>
        
        <div class="row">
            <div class="col-md-6">
                <p>Some text.</p>
                <div id="map"></div>
            </div>
            <div class="col-md-6">
                <div class="otherdiv"></div>
            </div>
        </div>
    </div>
 
</div>

Don´t know excatly what happening because the bootstrap styles are missing but i guess, it is because you are using `col-md-3` so `md` stand for a `middle` resolutions ( don´t knoe the exact resolution) . Try `col-xs-3` — kabaehr, Apr 10 '16 at 22:00
It happens because you use `position: absolute;`, Remove it everywhere and it will work. In addition you could provide an image of the result you want to achieve. — Roman, Apr 10 '16 at 22:04

score 0 · Answer 1 · answered Apr 10 '16 at 22:28

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

score 0 · Accepted Answer · answered Apr 11 '16 at 00:32

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.

Why do my bootstrap columns overlap?

2 Answers2

Linked