
<style>
div > div > div {
background: #F7941F;
padding: 1rem;
border: 1px solid white;
font-weight: 600;
color: white;
border-radius: 7px;
margin: 1rem 0;
}
</style>
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-auto">
Variable width content
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-8">Column of 8/12</div>
<div class="col-4">Column of 4/12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2">
<div class="col">column</div>
<div class="col">column</div>
<div class="col">column</div>
<div class="col">column</div>
</div>
</div>