how to create 2 div in bootstrap side by side

Question

i create 2 divs side by side, col sm 3 for first div, and the second div is of col sm 9, suppose both divs have same height 600px, now i wanna make 6 small boxes in the second div of col sm 9 without breaking the fisrt div.

             WHAT I EXPECTED

COL-SM-3 COL-SM-9

---

| | | _______ ______ ______ | | | | | | | | | | | | | | |______| |______| |_____| | | | | ______ _______ ______ | | | | | | | | | | | | | | |______| |______| |_____| | |________| |_______________________________|

                WHAT I GET

---

| | | _______ ______ ______ | | | | | | | | | | | | | | |______| |______| |_____| | | | |_______________________________| | |
| |
|________|

---

| | |______|

Answer 1

You should read up on the Bootstrap grid documentation here: https://getbootstrap.com/docs/4.0/layout/grid/

If I'm getting you correctly (your "visualization" isn't really telling unfortunately), you're trying to put two divs next to each other, with child divs in the second parent div. In this case, you just need to do something like this:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-sm-3"> parent 1 </div> <div class="col-sm-9"> <div class="row"> <div class="col-sm-2">parent 2 child 1</div> <div class="col-sm-2">parent 2 child 2</div> <div class="col-sm-2">parent 2 child 3</div> <div class="col-sm-2">parent 2 child 4</div> <div class="col-sm-2">parent 2 child 5</div> <div class="col-sm-2">parent 2 child 6</div> </div> </div> </div> 

Answer 2

IDK exactly how are you exactly making this, but in order to work properly with bootstrap columns, you must wrap them in rows. This way you should have a <div class="row"> wrapping both main cols, and another inside the one to have more cols wrapping them.