کلیه کلاس های margin و padding در bootstrap 5 بر اساس rem تقسیم بندی میشوند به طور مثال
| rem | padding و margin |
| 0.25 | m-1 , p-1 |
| 0.5 | m-2 , p-2 |
| 1 | m-3 , p-3 |
| 1.5 | m-4 , p-4 |
| 3 | m-5 , p4 |
فاصله بین هر col برابر با 1.5 rem یا 24 px است.
دسته: bootsrap css
جدول ریسپانسیو در bootstrap
با توجه به جدول فوق میتوان تکه کد class مربوط به هر سایز را کنترل کرد
ایتم های bootstrap 4 در row وسط به صورت عمودی باشند.
<div class="row align-items-center ">
<div class="col-9 text-justify p-4 text-muted">
abc
</div>
<div class="col-3 text-center">
54
</div>
</div>
استفاده از flex bootstrap 4 برای کنار هم قراردادن div ها
<div class="container">
<div class="d-flex align-items-center py-2">
<div class="d-flex align-items-center">
<div>
<a href="/"><img width="170" src="images/logo.png" alt="palnet"></a>
</div>
<div class="membership px-3">
</div>
<div class="shopping-cart px-3">
</div>
</div>
<div class=" flex-grow-1">
<form class=" float-left" role="search" style="width:450px">
</form>
</div>
</div>
</div>
استفاده از flex در bootstrap 4
<div class="container">
<div class="d-flex align-items-center py-2">
<div class="bg-primary p-2">
def</div>
<div class="text-left flex-grow-1 bg-info p-2">
abc</div>
</div>
</div>
منبع