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

0

2 Answers 2

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

1
  • 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.
    Commented Oct 6, 2019 at 9: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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.