Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

گرید

  2. کیت های رابط کاربری
  3. گرید

گزینه‌های گرید

سیستم گرید بوت‌استرپ همه شش نقطه شکست (breakpoint) را پشتیبانی می‌کند و شما می‌توانید هر نقطه شکستی را سفارشی‌سازی کنید.

Extra small

<576px

Small

≥576px

Medium

≥768px

Large

≥992px

Extra large

≥1200px

Extra extra large

≥1400px
رفتار گرید همیشه افقی در ابتدا جمع شده، بالای نقطه شکست‌ها افقی
حداکثر عرض کانتینر None (auto) 540px 720px 960px 1140px 1320px
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
تعداد ستون‌ها 12
عرض فاصله بین ستون‌ها 1.5rem (0.75rem در چپ و راست)
قابل تو در تو بله
افست‌ها بله
افست‌ها بله
ترتیب ستون‌ها بله

شبکه ستون‌ها

برای تنظیم سیستم شبکه از کلاس‌های پیش‌فرض شبکه با استفاده از .col-md-* استفاده کنید.

col-md-1
col-md-2
col-md-2
col-md-3
col-md-4
col-md-
col-md-7
col-md-6
col-md-6
col-md-8
col-md-4
col-md-9
col-md-3
col-md-10
col-md-2
col-md-12

تراز عمودی

برای تنظیم تراز عمودی از کلاس align-items-* استفاده کنید.

ستون یک
ستون دو
ستون یک
ستون دو
ستون یک
ستون دو
کلاس مقدار کلاس
.align-items-* start / center / end / baseline / stretch

تراز افقی

برای تنظیم تراز افقی از کلاس justify-content-* استفاده کنید.

ستون یک
ستون دو
ستون یک
ستون دو
ستون یک
ستون دو
کلاس مقدار کلاس
.justify-content-* start / center / end / around / between

تو در تویی

برای تو در تو کردن محتوا با گرید پیش‌فرض، یک .row جدید اضافه کنید و مجموعه ستون‌های .col-sm-* را درون یک ستون موجود .col-sm-* قرار دهید.

سطح ۱: .col-3
سطح ۲: .col-5
سطح ۲: .col-7
سطح ۱: .col-2
سطح ۱: .col-10
سطح ۲: .col-4

ترتیب

با استفاده از کلاس .order موقعیت ترتیب را تنظیم کنید.

آیتم اول (order-3)
آیتم دوم (order-first)
آیتم سوم (order-last)
آیتم چهارم (order-2)
آیتم پنجم (order-5)
آیتم ششم (order-4)
کلاس مقدار کلاس
.order-* first / 2 / 3 / 4 / 5 / last

افست

ستون‌های گرید را با کلاس .offset-grid جابه‌جا کنید.

col-5 offset-3
col-2 offset-2
col-4 offset-2
col-3 offset-2
کلاس مقدار کلاس
.offset-* 1 / 2 / ... / 11 / 12