گریدبوتسترپ شامل یک سیستم قدرتمند موبایل فرست و سیستم گرید فلکس باکس برای ساخت طرح ها در شکل ها و ابعاد مختلف است. این سیستم مبتنی بر یک طرح 12 ستونی است که دارای چندین ردیف است. شما می توانید از این سیستم با Sass mixins یا کلاس های از پیش تعریف شده استفاده کنید
ستون های با چیدمان خودکار

عرض برابر

1 از 2
1 از 2
1 از 3
1 از 3
1 از 3

تنظیمات عرض یک ستون

1 از 3
2 از 3 (گسترده تر)
3 از 3
1 از 3
2 از 3 (گسترده تر)
3 از 3

محتوا با عرض متغییر

1 از 3
محتوا با عرض متغییر
3 از 3
1 از 3
محتوا با عرض متغییر
3 از 3

چند ردیف با عرض های یکسان

ستون
ستون
ستون
ستون
کلاس های ریسپانسیو

All breakpoints

col
col
col
col
col-8
col-4

Stacked to horizontal

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

Mix and match

.col .col-xl-8
.col-6 .col-xl-4
.col-6 .col-xl-4
.col-6 .col-xl-4
.col-6 .col-xl-4
.col-6
.col-6

چیدمان عمودی

یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون

چیدمان افقی

یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون
یکی از دو ستون

حذف فضای اضافه

.col-12 .col-md-6 .col-xl-8
.col-6 .col-xl-4

ایجاد فاصله در ستون

.col-9
.col-4
هنگامی که 9 + 4 = 13 > 12, این بخش چهار ستونه گسترده می شود و به عنوان یک واحد پیوسته در خط جدید ایجاد می شود.
.col-6
ستون های بعدی در امتداد خط جدید ادامه می یابند.

ریست های ستون

.col-6 .col-md-3
.col-6 .col-md-3
.col-6 .col-md-3
.col-6 .col-md-3
.col-md-5 .col-xl-6
.col-md-5 .offset-sm-2 .col-xl-6 .offset-md-0
.col.col-md-6.col-xl-5.col-xl-6
.col-md-6 .col-xl-5 .offset-md-2 .col-xl-6 .offset-lg-0
مرتب سازی دوباره

ترتیب فلکس

ستون های آفست

.col-xl-4
.col-xl-4 .offset-md-4
.col-xl-3 .offset-md-3
.col-xl-3 .offset-md-3
.col-xl-6 .offset-md-3
تو در تو
Level 1: .col-md-9
Level 2: .col-8 .col-md-6
Level 2: .col-4 .col-md-6