BS5 grid XXL
XXL grid misoli
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| Klass prefiksi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Ekran kengligi | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
XXL qurilmalar deb ekran kengligi 1400 piksel va undan katta bo‘lgan qurilmalarga aytiladi.
Quyidagi misol medium, large va extra large qurilmalarda 50%/50%, XXL qurilmalarda esa 25%/75% nisbatda bo‘linishga olib keladi. Small va extra small qurilmalarda ustunlar avtomatik ravishda ustma-ust joylashadi (100%):
Misol
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6 col-xxl-9">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Eslatma: Ustunlar yig‘indisi har doim 12 ga teng bo‘lishiga ishonch hosil qiling.
Faqat XXL’dan foydalanish
Quyidagi misolda biz faqat .col-xxl-6 klassini (.col-md-* va/yoki .col-sm-* siz) ko‘rsatamiz. Bu xxlarge qurilmalarda 50%/50% nisbatda bo‘linishni bildiradi. Biroq extra large, large, medium, small VA extra small qurilmalarda ustunlar vertikal ravishda ustma-ust joylashadi (100% kenglik):
Misol
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xxl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Avtomatik maketli ustunlar (auto layout)
Bootstrap 5’da barcha qurilmalar uchun teng kenglikdagi ustunlar yaratishning oson usuli bor: .col-xxl-* dan sonni olib tashlang va belgilangan miqdordagi col elementlarida faqat .col-xxl klassidan foydalaning. Bootstrap nechta ustun borligini aniqlaydi va har bir ustun bir xil kenglikka ega bo‘ladi.
Agar ekran o‘lchami 1400px dan kichik bo‘lsa, ustunlar gorizontal qatorlar bo‘lib ustma-ust joylashadi:
<!-- Two columns: 50% width on xxl and up-->
<div class="row">
<div class="col-xxl">1 of 2</div>
<div class="col-xxl">2 of 2</div>
</div>
<!-- Four columns: 25% width on xxl and up -->
<div class="row">
<div class="col-xxl">1 of 4</div>
<div class="col-xxl">2 of 4</div>
<div class="col-xxl">3 of 4</div>
<div class="col-xxl">4 of 4</div>
</div>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!