Bootstrap stacking columns incorrectly

Question

I'm having trouble stacking my columns correctly using bootstrap - as you can see from the image I need the black box positioned below green box but I can't get this to work:

Here is the code I am using:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

Can someone please tell me where I am going wrong here?

Thanks

There appears to be some custom css in there. Could you post a working example please? — brubs, Mar 04 '19 at 11:13

score 0 · Answer 1 · answered Mar 04 '19 at 11:14

You have 2 columns and you put first div into 1 column and second inside the 2 one and next div will go angain inside the 1 column, the easier way to place black div below the green is to create another blank div

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

score 0 · Answer 2 · answered Mar 04 '19 at 11:18

Bootstrap 4 is mobile first. So first thing is invert the order of your classes.

The problem is that you are setting the width of your boxes to be the half of the width of the row on desktop, and rows are set to wrap by default in bootstrap.

Set the columns to full width with col-12.

<div class="container-fluid">
    <div class="row">
        <div class="col-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-12 " style="background-color:green; height:300px;"></div>
        <div class="col-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

EDIT:

If you want the columns to be half of the width of the row and still prevent wrapping, you have to add an offset:

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:blue; height:600px;"></div> 
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:green; height:300px;"></div>
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:black; height:300px;"></div>
    </div>
</div>

Carol Skelly · Answer 3 · 2019-03-21T10:47:21.093

Bootstrap 4 uses Flexbox so columns aren't going to "float" next to each other as they did in Bootstrap 3. You can override this behavior by enabling floats on lg and up screen widths.

Notice use of the d-lg-block and float-left classes.

<div class="container-fluid">
    <div class="row d-lg-block">
        <div class="col-lg-6 col-md-12 float-left" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 float-left" style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12 float-left" style="background-color:black; height:300px;"></div>
    </div>
</div>

https://www.codeply.com/go/7KLlzbAGGU

Also see: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

score 0 · Answer 4 · answered Mar 07 '19 at 12:36

You can nest the blue and green column in another column.

<div class="container-fluid">
  <div class="row">
      <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
    <div class="col-lg-6 col-md-12 ">
      <div style="background-color:green; height:300px;"></div>
      <div style="background-color:black; height:300px;"></div>
    </div>
</div>

This way the green and black column are contained inside the "right" side. The other answers are working too but they are changing the bootstrap grid behaviour or splitting up the content, which I don't think is ideal.

Bootstrap stacking columns incorrectly

4 Answers4