Multi-nested rows and columns with Boostrap 4

April 27, 2023

When using Bootstrap 4 I have some trouble with multi-nested rows and columns. In the following example, line2 should be under line1 and separated by an horizontal bar, but it’s next to it. Why is that?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Title</h1>
  <div class="row">
    <div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
      <h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
      <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
        <div class="col-md-3 media small">
          Some stuff
        </div>
        <div class="col-md-9 media">
          <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
            Line 1
          </div>
          <div class="row">
            Line 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Using the same template with Bootstrap 5 returns what I want:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
      <h1>Title</h1>
      <div class="row">
        <div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
          <h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
          <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
            <div class="col-md-3 media small">
              Some stuff
            </div>
            <div class="col-md-9 media">
              <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
                Line 1
              </div>
              <div class="row">
                Line 2
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Since I need to use Bootstrap 4, I’d like to know how I can correct that.

>Solution :

Because col- is flex box in Bootstrap 4, but block in Bootstrap 5.

You can add d-block here:

<div class="col-md-9 media d-block">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <h1>Title</h1>
  <div class="row">
    <div class="col-lg-12 my-3 p-3 bg-white rounded shadow-sm">
      <h5 class="border-bottom border-gray pb-2 mb-0">Test 2</h5>
      <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
        <div class="col-md-3 media small">
          Some stuff
        </div>
        <div class="col-md-9 media d-block">
          <div class="row pb-3 mb-0 lh-125 border-bottom border-gray">
            Line 1
          </div>
          <div class="row">
            Line 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>