如何使用 bootstrap 4 获取这种类型的 div 容器？

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>