Bootstrap 5 grid system
For detail documentation, View Grid on Bootstrap⟶
<div class="row">
<div class="col-12">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
</div><div class="row">
<div class="col-6">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-6">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
</div><div class="row">
<div class="col-4">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-4">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-4">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
</div><div class="row">
<div class="col-3">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-3">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-3">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-3">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
</div><div class="row">
<div class="col-2">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-2">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-2">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-2">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-2">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-2">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
</div><div class="row">
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
<div class="col-1">
<div class="py-5 border border-dashed border-400 bg-100"></div>
</div>
</div>