تک سطر
<div class="row gutters">
<div class="col-12">Column</div>
</div>
دو سطر
<div class="row gutters">
<div class="col-6">Column</div>
<div class="col-6">Column</div>
</div>
سه سطر
<div class="row gutters">
<div class="col-4">Column</div>
<div class="col-4">Column</div>
<div class="col-4">Column</div>
</div>
چهار سطر
<div class="row gutters">
<div class="col-3">Column</div>
<div class="col-3">Column</div>
<div class="col-3">Column</div>
<div class="col-3">Column</div>
</div>
شیش سطر
<div class="row gutters">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
</div>
دوازده سطر
<div class="row gutters">
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
<div class="col-1">Column</div>
</div>
سطر با سایزهای مختلف
<div class="row gutters">
<div class="col-2">Column</div>
<div class="col-4">Column</div>
<div class="col-6">Column</div>
<div class="col-4">Column</div>
<div class="col-5">Column</div>
<div class="col-3">Column</div>
</div>
متن جاستیفای شده
این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای .
<div class="row gutters justify-content-start">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
</div>
جاستیفای در پایان متن
این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای .
<div class="row gutters justify-content-end">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
</div>
جاستیفای در وسط
این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای .
<div class="row gutters justify-content-center">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
</div>
جاستیفای در میان متن
این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای .
<div class="row gutters justify-content-between">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
</div>
جاستیفای در دور متن
این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای این یک متن است برای نمایش جاستیفای .
<div class="row gutters justify-content-around">
<div class="col-2">Column</div>
<div class="col-2">Column</div>
<div class="col-2">Column</div>
</div>
بدون قطر
یک متن دلخواه است برای نشان دادن عنوان مورد نظر
<div class="row no-gutters">
<div class="col-4">Column</div>
<div class="col-4">Column</div>
<div class="col-4">Column</div>
</div>
سایز سطر متفاوت
یک متن دلخواه است برای نشان دادن عنوان مورد نظر
<div class="row gutters">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-4 col-12">Column</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-4 col-12">Column</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-4 col-12">Column</div>
</div>