0

I'm trying to align two div's horizontally. The left div can have any number of items while the right will just have one. This is for Bootstrap 4 so I used the nested example for that version but it doesn't work for some reason. The example does say the nested col's should have a size but since that number can vary I can't do that. Here is my [jsfiddle]1. Here's my example code. Would someone please take a look and explain the problem?

** .box {border:1px solid black;} 

    <div class="row">

     <div class="col-6">
        <div class="col box">col 1</div>
        <div class="col box">col 2</div>
        <div class="col box">col 3</div>
        <div class="col box">col 4</div>
     </div>
     
     <div class="col-6">
      <div class="col box">col right</div>
     </div>
     
    </div>
user3052443
  • 758
  • 1
  • 7
  • 22
  • 1
    As you can see [in the docs](https://getbootstrap.com/docs/4.5/layout/grid/#nesting), nesting require another inner row, since *"In a grid layout, content must be placed within columns and only columns may be immediate children of rows."* – Carol Skelly Dec 21 '20 at 17:05
  • That did it. I kept going through the examples. Can't believe I missed that. Thank you, – user3052443 Dec 21 '20 at 17:31

0 Answers0