0

I'm using the following code to try and get the "expected" layout below but instead i'm getting the one in gray which is wrong. Can someone tell me what I'm doing wrong in using the Boostrap 4 grid system?

I don't get why the side-by-side columns are appearing on top of each other instead of next to each other?

I've tried setting padding and margin to zero.

<div class="container">
  <div class="row">
    <div class="col-md-4 col-xs-12">
      1
    </div>
    <div class="col-md-8 col-xs-12">
      <div class="col-md-12">
        <div class="col-md-2">
          2.1
        </div>
        <div class="col-md-10">
          <div class="col-md-12">
            2.21
          </div>
          <div class="col-md-12">
            2.22
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="col-md-2">
          3.1
        </div>
        <div class="col-md-10">
          <div class="col-md-12">
            3.21
          </div>
          <div class="col-md-12">
            3.22
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

enter image description here

coffeeeee
  • 129
  • 1
  • 12

2 Answers2

2

Add a

<div class="row"></div>

for each sub-container, as noted in the documentation: https://getbootstrap.com/docs/4.3/layout/grid/#nesting

Tieson T.
  • 20,774
  • 6
  • 77
  • 92
Bob Rob
  • 164
  • 2
  • 10
  • 1
    Feel free to edit or roll back my update - your answer is correct, but the documentation link is helpful to backup what you're suggesting. – Tieson T. Oct 06 '19 at 09:51
0
Try this: You are not adding third Column.


<div class="container">
 <div class="row">
    <div class="col-md-4 col-xs-12">
      1
    </div>
    <div class="col-md-8 col-xs-12">
      <div class="col-md-12">
        <div class="col-md-2">
          2.1
        </div>
        <div class="col-md-10">
          <div class="col-md-12">
            2.21
          </div>
          <div class="col-md-12">
            2.22
          </div>
        </div>
      </div>
      </div>
    <div class="col-md-4 col-xs-12">
      <div class="col-md-12">
        <div class="col-md-2">
          3.1
        </div>
        <div class="col-md-10">
          <div class="col-md-12">
            3.21
          </div>
          <div class="col-md-12">
            3.22
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Abubakar
  • 3
  • 5