How to get this type of div container with bootstrap 4?

Question

I searched about bootstrap container class and it seems to me that by default it comes with this grid. But its not giving me all three like shown in this picture its showing me only one when I run this code in browser. I added content inside this.

<div class="container">
  <!-- Content here -->
</div>

Answer 1

You need to learn about bootstrap grid system to do this.

Code

 .row { margin-top: 10px; } .data-row { height: 150px; } .first, .second-1, .second-2 { border: solid 1px #6c757d; border-radius: 5px; padding: 10px; text-align: center; } .first { background-color: #daeeff; } .second-1 { background-color: #957bbe; margin-right: 10px; } .second-2 { background-color: #fae3c4; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col first"> first </div> </div> <div class="row data-row"> <div class="col-10 second-1"> second </div> <div class="col second-2"> menu </div> </div> </div>