Barcha klasslar
Barcha Bootstrap 4 klasslarining to‘liq ro‘yxati
Barcha Bootstrap 4 CSS klasslarining tavsif va misollar bilan to‘liq ro‘yxati:
| Klass | Tavsif | Misol | Kategoriya |
|---|---|---|---|
.active |
Navigatsiya panelidagi faol havolaga oq matn rangini beradi. | Sinab ko‘ring | Navbar |
.active |
Ro‘yxat guruhidagi faol ro‘yxat elementiga ko‘k fon rangini beradi | Sinab ko‘ring | Ro‘yxat guruhlari |
.active |
"Bosilgan" tugma ko‘rinishini berish uchun to‘q ko‘k fon rangini qo‘shadi | Sinab ko‘ring | Tugmalar |
.active |
Ochiluvchi menyudagi faol menyu elementiga ko‘k fon rangini beradi | Sinab ko‘ring | Ochiluvchi menyular |
.active |
Faol sahifalash havolasiga ko‘k fon rangini beradi (joriy sahifani ajratib ko‘rsatish uchun) | Sinab ko‘ring | Sahifalash |
.active |
Joriy karusel elementini ko‘rsatadi | Sinab ko‘ring | Karusel |
.alert |
Ogohlantirish xabari blokini yaratadi | Sinab ko‘ring | Ogohlantirishlar |
.alert-danger |
Qizil ogohlantirish. Xavfli yoki salbiy oqibatlarga olib kelishi mumkin bo‘lgan harakatni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-dark |
To‘q rangli ogohlantirish. To‘q kulrang ogohlantirish bloki | Sinab ko‘ring | Ogohlantirishlar |
.alert-dismissible |
Yopiladigan ogohlantirish blokini bildiradi. Bu klass .close klassi bilan birga ogohlantirishni yopish uchun ishlatiladi (qo‘shimcha ichki chekinish qo‘shadi) |
Sinab ko‘ring | Ogohlantirishlar |
.alert-heading |
Ko‘rsatilgan elementga color:inherit ni qo‘shadi |
Sinab ko‘ring | Ogohlantirishlar |
.alert-info |
Moviy (teal) ogohlantirish. Neytral, axborot beruvchi o‘zgarish yoki harakatni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-light |
Och rangli ogohlantirish. Och kulrang ogohlantirish bloki | Sinab ko‘ring | Ogohlantirishlar |
.alert-link |
Ogohlantirishlar ichidagi havolalarga mos rang berish uchun ishlatiladi | Sinab ko‘ring | Ogohlantirishlar |
.alert-primary |
Ko‘k ogohlantirish. Muhim harakatni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-secondary |
Kulrang ogohlantirish. "Kamroq" muhim harakatni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-success |
Yashil ogohlantirish. Muvaffaqiyatli yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.alert-warning |
Sariq ogohlantirish. Bu harakatda ehtiyot bo‘lish kerakligini bildiradi | Sinab ko‘ring | Ogohlantirishlar |
.align-baseline |
Element ota elementning tayanch chizig‘i (baseline) bo‘yicha tekislanadi. Bu standart holat | Sinab ko‘ring | Yordamchi klasslar |
.align-bottom |
Element qatordagi eng pastki element bilan tekislanadi | Sinab ko‘ring | Yordamchi klasslar |
.align-middle |
Element ota elementning o‘rtasiga joylashtiriladi | Sinab ko‘ring | Yordamchi klasslar |
.align-top |
Element qatordagi eng baland elementning yuqori qismi bilan tekislanadi | Sinab ko‘ring | Yordamchi klasslar |
.align-text-top |
Element ota element shriftining yuqori qismi bilan tekislanadi | Sinab ko‘ring | Yordamchi klasslar |
.align-text-bottom |
Element ota element shriftining pastki qismi bilan tekislanadi | Sinab ko‘ring | Yordamchi klasslar |
.align-content-around |
Yig‘ilgan elementlarni "around" usulida tekislaydi | Sinab ko‘ring | Flex |
.align-content-*-around |
Turli ekranlarda yig‘ilgan elementlarni "around" usulida tekislaydi | Sinab ko‘ring | Flex |
.align-content-center |
Yig‘ilgan elementlarni markazda tekislaydi | Sinab ko‘ring | Flex |
.align-content-*-center |
Turli ekranlarda yig‘ilgan elementlarni markazda tekislaydi | Sinab ko‘ring | Flex |
.align-content-end |
Yig‘ilgan elementlarni oxirida tekislaydi | Sinab ko‘ring | Flex |
.align-content-*-end |
Turli ekranlarda yig‘ilgan elementlarni oxirida tekislaydi | Sinab ko‘ring | Flex |
.align-content-start |
Yig‘ilgan elementlarni boshidan tekislaydi | Sinab ko‘ring | Flex |
.align-content-*-start |
Turli ekranlarda yig‘ilgan elementlarni boshidan tekislaydi | Sinab ko‘ring | Flex |
.align-content-stretch |
Yig‘ilgan elementlarni cho‘zadi | Sinab ko‘ring | Flex |
.align-content-*-stretch |
Turli ekranlarda yig‘ilgan elementlarni cho‘zadi | Sinab ko‘ring | Flex |
.align-items-start |
Bitta qatordagi elementlarni boshidan tekislaydi | Sinab ko‘ring | Flex |
.align-items-*-start |
Turli ekranlarda bitta qatordagi elementlarni boshidan tekislaydi | Sinab ko‘ring | Flex |
.align-items-end |
Bitta qatordagi elementlarni oxirida tekislaydi | Sinab ko‘ring | Flex |
.align-items-*-end |
Turli ekranlarda bitta qatordagi elementlarni oxirida tekislaydi | Sinab ko‘ring | Flex |
.align-items-center |
Bitta qatordagi elementlarni markazda tekislaydi | Sinab ko‘ring | Flex |
.align-items-*-center |
Turli ekranlarda bitta qatordagi elementlarni markazda tekislaydi | Sinab ko‘ring | Flex |
.align-items-baseline |
Bitta qatordagi elementlarni tayanch chiziq (baseline) bo‘yicha tekislaydi | Sinab ko‘ring | Flex |
.align-items-*-baseline |
Turli ekranlarda bitta qatordagi elementlarni tayanch chiziq (baseline) bo‘yicha tekislaydi | Sinab ko‘ring | Flex |
.align-items-stretch |
Bitta qatordagi elementlarni cho‘zadi | Sinab ko‘ring | Flex |
.align-items-*-stretch |
Turli ekranlarda bitta qatordagi elementlarni cho‘zadi | Sinab ko‘ring | Flex |
.align-self-start |
Flex elementni boshidan tekislaydi | Sinab ko‘ring | Flex |
.align-self-*-start |
Turli ekranlarda flex elementni boshidan tekislaydi | Sinab ko‘ring | Flex |
.align-self-end |
Flex elementni oxirida tekislaydi | Sinab ko‘ring | Flex |
.align-self-*-end |
Turli ekranlarda flex elementni oxirida tekislaydi | Sinab ko‘ring | Flex |
.align-self-center |
Flex elementni markazda tekislaydi | Sinab ko‘ring | Flex |
.align-self-*-center |
Turli ekranlarda flex elementni markazda tekislaydi | Sinab ko‘ring | Flex |
.align-self-baseline |
Flex elementni tayanch chiziq (baseline) bo‘yicha tekislaydi | Sinab ko‘ring | Flex |
.align-self-*-baseline |
Turli ekranlarda flex elementni tayanch chiziq (baseline) bo‘yicha tekislaydi | Sinab ko‘ring | Flex |
.align-self-stretch |
Flex elementni cho‘zadi | Sinab ko‘ring | Flex |
.align-self-*-stretch |
Turli ekranlarda flex elementni cho‘zadi | Sinab ko‘ring | Flex |
.badge |
Yumaloq nishon yaratadi (kulrang doira — ko‘pincha raqamli indikator sifatida ishlatiladi) | Sinab ko‘ring | Nishonlar |
.badge-danger |
Qizil nishon. Xavfli yoki salbiy oqibatlarga olib kelishi mumkin bo‘lgan harakatni bildiradi | Sinab ko‘ring | Nishonlar |
.badge-dark |
To‘q rangli nishon. To‘q kulrang ogohlantirish bloki | Sinab ko‘ring | Nishonlar |
.badge-info |
Moviy (teal) nishon. Neytral, axborot beruvchi o‘zgarish yoki harakatni bildiradi | Sinab ko‘ring | Nishonlar |
.badge-light |
Och rangli nishon. Och kulrang ogohlantirish bloki | Sinab ko‘ring | Nishonlar |
.badge-pill |
Nishonni yumaloqroq qiladi | Sinab ko‘ring | Nishonlar |
.badge-primary |
Ko‘k nishon. Muhim harakatni bildiradi | Sinab ko‘ring | Nishonlar |
.badge-secondary |
Kulrang nishon. "Kamroq" muhim harakatni bildiradi | Sinab ko‘ring | Nishonlar |
.badge-success |
Yashil nishon. Muvaffaqiyatli yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Nishonlar |
.badge-warning |
Sariq nishon. Bu harakatda ehtiyot bo‘lish kerakligini bildiradi | Sinab ko‘ring | Nishonlar |
.bg-danger |
Elementga qizil fon rangini beradi. Xavf yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Ranglar |
.bg-dark |
Elementga to‘q kulrang fon rangini beradi | Sinab ko‘ring | Ranglar |
.bg-info |
Elementga moviy (teal) fon rangini beradi. Qandaydir ma’lumotni ifodalaydi | Sinab ko‘ring | Ranglar |
.bg-light |
Elementga och kulrang fon rangini beradi | Sinab ko‘ring | Ranglar |
.bg-primary |
Elementga ko‘k fon rangini beradi. Muhim narsani ifodalaydi | Sinab ko‘ring | Ranglar |
.bg-secondary |
Elementga kulrang fon rangini beradi. "Kamroq" muhim harakatni bildiradi | Sinab ko‘ring | Ranglar |
.bg-success |
Elementga yashil fon rangini beradi. Muvaffaqiyat yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Ranglar |
.bg-warning |
Elementga sariq/to‘q sariq fon rangini beradi. Ogohlantirish yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Ranglar |
.blockquote |
Boshqa manbadan iqtibos keltirilgan kontent bloklarini bezaydi (kattaroq shrift o‘lchamini (1.25rem) qo‘shadi) | Sinab ko‘ring | Tipografiya |
.blockquote-footer |
Blockquote ichidagi manba nomini bezaydi (chekinishli och kulrang matn) | Sinab ko‘ring | Tipografiya |
.border |
Elementga chegara qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.border-bottom-0 |
Elementdan pastki chegarani olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.border-danger |
Elementga qizil chegara qo‘shadi (xavfni bildiradi) | Sinab ko‘ring | Yordamchi klasslar |
.border-dark |
Elementga to‘q rangli chegara qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.border-info |
Elementga moviy (teal) chegara qo‘shadi (ma’lumotni bildiradi) | Sinab ko‘ring | Yordamchi klasslar |
.border-left-0 |
Elementdan chap chegarani olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.border-light |
Elementga och kulrang chegara qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.border-primary |
Elementga ko‘k chegara qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.border-right-0 |
Elementdan o‘ng chegarani olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.border-top-0 |
Elementdan yuqori chegarani olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.border-secondary |
Elementga kulrang chegara qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.border-success |
Elementga yashil chegara qo‘shadi (muvaffaqiyatni bildiradi) | Sinab ko‘ring | Yordamchi klasslar |
.border-warning |
Elementga to‘q sariq chegara qo‘shadi (ogohlantirishni bildiradi) | Sinab ko‘ring | Yordamchi klasslar |
.border-white |
Elementga oq chegara qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.border-0 |
Elementdan barcha chegaralarni olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.breadcrumb |
Sahifalash turi. Joriy sahifaning navigatsiya iyerarxiyasidagi o‘rnini ko‘rsatadi | Sinab ko‘ring | Sahifalash |
.breadcrumb-item |
Breadcrumb ichidagi ro‘yxat elementlari yoki havolalarni bezaydi | Sinab ko‘ring | Sahifalash |
.btn |
Oddiy tugma yaratadi (kulrang fon va yumaloq burchaklar) | Sinab ko‘ring | Tugmalar |
.btn-block |
Ota elementning butun kengligini egallaydigan blok darajasidagi tugma yaratadi | Sinab ko‘ring | Tugmalar |
.btn-dark |
To‘q kulrang tugma | Sinab ko‘ring | Tugmalar |
.btn-danger |
Qizil tugma. Xavf yoki salbiy harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-group |
Tugmalarni bitta qatorda guruhlaydi | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-lg |
Katta tugmalar guruhi (guruhdagi barcha tugmalarni kattalashtiradi — shrift o‘lchami va ichki chekinish oshiriladi) | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-sm |
Kichik tugmalar guruhi (guruhdagi barcha tugmalarni kichraytiradi) | Sinab ko‘ring | Tugmalar guruhi |
.btn-group-vertical |
Tugmalar guruhini vertikal ravishda ustma-ust joylashtiradi | Sinab ko‘ring | Tugmalar guruhi |
.btn-info |
Moviy (teal) tugma. Neytral, axborot beruvchi o‘zgarish yoki harakatni ifodalaydi | Sinab ko‘ring | Tugmalar |
.btn-light |
Och kulrang tugma | Sinab ko‘ring | Tugmalar |
.btn-link |
Tugmani havolaga o‘xshatadi (tugma xatti-harakati saqlanadi) | Sinab ko‘ring | Tugmalar |
.btn-lg |
Katta tugma | Sinab ko‘ring | Tugmalar |
.btn-outline-dark |
To‘q kulrang hoshiyali (outline) tugma | Sinab ko‘ring | Tugmalar |
.btn-outline-danger |
Qizil hoshiyali (outline) tugma. Xavf yoki salbiy harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-outline-info |
Moviy (teal) hoshiyali (outline) tugma. Neytral, axborot beruvchi o‘zgarish yoki harakatni ifodalaydi | Sinab ko‘ring | Tugmalar |
.btn-outline-light |
Och kulrang hoshiyali (outline) tugma | Sinab ko‘ring | Tugmalar |
.btn-outline-primary |
Ko‘k hoshiyali (outline) tugma. | Sinab ko‘ring | Tugmalar |
.btn-outline-secondary |
Kulrang hoshiyali (outline) tugma. "Kamroq" muhim harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-outline-success |
Yashil hoshiyali (outline) tugma. Muvaffaqiyat yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-outline-warning |
To‘q sariq hoshiyali (outline) tugma. Ogohlantirish yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Tugmalar |
.btn-primary |
Ko‘k tugma. Muhim narsani bildiradi | Sinab ko‘ring | Tugmalar |
.btn-sm |
Kichik tugma | Sinab ko‘ring | Tugmalar |
.btn-secondary |
Kulrang tugma. "Kamroq" muhim harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-success |
Yashil tugma. Muvaffaqiyat yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Tugmalar |
.btn-toolbar |
Murakkabroq komponentlar uchun tugmalar guruhlari to‘plamlarini tugmalar paneliga (toolbar) birlashtiradi | Sinab ko‘ring | Tugmalar guruhi |
.btn-warning |
To‘q sariq tugma. Ogohlantirish yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Tugmalar |
.card |
Kartochka yaratadi | Sinab ko‘ring | Kartochkalar |
.card-body |
Kartochka kontenti uchun konteyner | Sinab ko‘ring | Kartochkalar |
.card-columns |
Kartochkalardan masonry uslubidagi grid yaratish uchun konteyner | Sinab ko‘ring | Kartochkalar |
.card-danger |
Kartochkaga qizil fon rangini beradi. Xavf yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Kartochkalar |
.card-dark |
Kartochkaga kulrang fon rangini beradi | Sinab ko‘ring | Kartochkalar |
.card-deck |
Balandligi va kengligi teng bo‘lgan kartochkalardan grid yaratish uchun konteyner | Sinab ko‘ring | Kartochkalar |
.card-footer |
Kartochkaning pastki qismi (footer) | Sinab ko‘ring | Kartochkalar |
.card-group |
Balandligi va kengligi teng bo‘lgan kartochkalardan yon tashqi chekinishlarsiz grid yaratish uchun konteyner | Sinab ko‘ring | Kartochkalar |
.card-header |
Kartochka sarlavhasi (header) | Sinab ko‘ring | Kartochkalar |
.card-header-tabs |
Kartochka sarlavhasi ichidagi navigatsiya tablarini bezaydi | Sinab ko‘ring | Kartochkalar |
.card-header-pills |
Kartochka sarlavhasi ichidagi navigatsiya pill’larini bezaydi | Sinab ko‘ring | Kartochkalar |
.card-img-bottom |
Rasmni kartochka ichida pastga joylashtiradi | Sinab ko‘ring | Kartochkalar |
.card-img-overlay |
Rasmni kartochka foniga aylantiradi. Ko‘pincha rasm ustiga matn qo‘shish uchun ishlatiladi | Sinab ko‘ring | Kartochkalar |
.card-img-top |
Rasmni kartochka ichida yuqoriga joylashtiradi | Sinab ko‘ring | Kartochkalar |
.card-info |
Kartochkaga moviy (teal) fon rangini beradi. Qandaydir ma’lumotni ifodalaydi | Sinab ko‘ring | Kartochkalar |
.card-light |
Kartochkaga och kulrang fon rangini beradi | Sinab ko‘ring | Kartochkalar |
.card-link |
Kartochka ichidagi istalgan havolaga ko‘k rang va hover effektini qo‘shadi | Sinab ko‘ring | Kartochkalar |
.card-primary |
Kartochkaga ko‘k fon rangini beradi. Muhim narsani ifodalaydi | Sinab ko‘ring | Kartochkalar |
.card-secondary |
Kartochkaga kulrang fon rangini beradi. "Kamroq" muhim narsani ifodalaydi | Sinab ko‘ring | Kartochkalar |
.card-subtitle |
.card-subtitle .card-title dan keyin ishlatiladi va elementga quyidagini qo‘shadi: margin-top: -.375rem; margin-bottom: 0; |
Sinab ko‘ring | Kartochkalar |
.card-success |
Kartochkaga yashil fon rangini beradi. Muvaffaqiyat yoki ijobiy harakatni bildiradi | Sinab ko‘ring | Kartochkalar |
.card-text |
Agar p elementi .card-body ichidagi oxirgi (yoki yagona) farzand element bo‘lsa, undagi pastki tashqi chekinishlarni (margin) olib tashlash uchun ishlatiladi |
Sinab ko‘ring | Kartochkalar |
.card-title |
Kartochka ichidagi istalgan sarlavha elementiga sarlavha (title) uslubini qo‘shadi | Sinab ko‘ring | Kartochkalar |
.card-warning |
Kartochkaga sariq/to‘q sariq fon rangini beradi. Ogohlantirish yoki salbiy harakatni ifodalaydi | Sinab ko‘ring | Kartochkalar |
.carousel |
Karusel (slayd-shou) yaratadi | Sinab ko‘ring | Karusel |
.carousel-caption |
Karuseldagi har bir slayd uchun izoh (caption) matnini yaratadi | Sinab ko‘ring | Karusel |
.carousel-control-next |
Karuselning "keyingi" element havolasi uchun konteyner | Sinab ko‘ring | Karusel |
.carousel-control-next-icon |
"Keyingi" belgisi/tugmasini (o‘ngga yo‘nalgan strelka) yaratish uchun .carousel-control-next bilan birga ishlatiladi |
Sinab ko‘ring | Karusel |
.carousel-control-prev |
Karuselning "oldingi" element havolasi uchun konteyner | Sinab ko‘ring | Karusel |
.carousel-control-prev-icon |
"Oldingi" belgisi/tugmasini (chapga yo‘nalgan strelka) yaratish uchun .carousel-control-prev bilan birga ishlatiladi |
Sinab ko‘ring | Karusel |
.carousel-indicators |
Har bir slayd pastiga kichik nuqtalar/indikatorlar qo‘shadi (ular karuselda nechta slayd borligini va foydalanuvchi hozir qaysi slaydni ko‘rayotganini bildiradi) | Sinab ko‘ring | Karusel |
.carousel-inner |
Slayd elementlari uchun konteyner | Sinab ko‘ring | Karusel |
.carousel-item |
Har bir slayd kontentini belgilaydi | Sinab ko‘ring | Karusel |
.clearfix |
Float’larni tozalaydi (clear) | Sinab ko‘ring | Yordamchi klasslar |
.close |
Yopish belgisini bezaydi. U ko‘pincha ogohlantirishlar va modal oynalarda ishlatiladi. Belgining o‘zini hosil qilish uchun ko‘pincha × simvoli bilan birga ishlatiladi (u "x" harfiga qaraganda chiroyliroq ko‘rinadi). Standart holatda o‘ngga joylashadi (float) | Sinab ko‘ring | Yordamchi klasslar |
.col-auto |
Forma ustunlarining o‘lchami ularning kontentiga qarab avtomatik belgilanishini ta’minlaydi | Sinab ko‘ring | Formalar |
.col-* |
Juda kichik qurilmalar uchun ustunli maket yaratadi (boshqa ustun klasslari bilan birga ishlatilmasa, undan kattalari/barcha qurilmalar uchun ham). * 1 dan 12 gacha bo‘lgan son bo‘lishi mumkin |
Sinab ko‘ring | Grid tizimi |
.col-sm-* |
Kichik qurilmalar uchun ustunli maket yaratadi (boshqa ustun klasslari bilan birga ishlatilmasa, undan kattalari uchun ham). * 1 dan 12 gacha bo‘lgan son bo‘lishi mumkin |
Sinab ko‘ring | Grid tizimi |
.col-md-* |
O‘rta qurilmalar uchun ustunli maket yaratadi (boshqa ustun klasslari bilan birga ishlatilmasa, undan kattalari uchun ham). * 1 dan 12 gacha bo‘lgan son bo‘lishi mumkin |
Sinab ko‘ring | Grid tizimi |
.col-lg-* |
Katta qurilmalar uchun ustunli maket yaratadi (boshqa ustun klasslari bilan birga ishlatilmasa, undan kattalari uchun ham). * 1 dan 12 gacha bo‘lgan son bo‘lishi mumkin |
Sinab ko‘ring | Grid tizimi |
.col-xl-* |
Juda katta qurilmalar uchun ustunli maket yaratadi. * 1 dan 12 gacha bo‘lgan son bo‘lishi mumkin |
Sinab ko‘ring | Grid tizimi |
.collapse |
Yig‘iladigan kontentni bildiradi — uni kerak bo‘lganda yashirish yoki ko‘rsatish mumkin | Sinab ko‘ring | Yig‘iladigan bloklar |
.collapse show |
Yig‘iladigan kontentni standart holatda ko‘rsatadi | Sinab ko‘ring | Yig‘iladigan bloklar |
.container |
Kengligi ekran o‘lchamlariga qarab belgilanadigan qat’iy kenglikdagi konteyner. Chap va o‘ng tomonda teng tashqi chekinish (margin). | Sinab ko‘ring | Konteynerlar |
.container-fluid |
Ekranning butun kengligini egallaydigan konteyner | Sinab ko‘ring | Konteynerlar |
.container-* |
Moslashuvchan konteynerlar | Sinab ko‘ring | Konteynerlar |
.custom-checkbox |
Maxsus checkbox’lar uchun o‘rovchi element/konteyner | Sinab ko‘ring | Maxsus formalar |
.custom-control |
Maxsus formalar uchun o‘rovchi element/konteyner | Sinab ko‘ring | Maxsus formalar |
.custom-control-input |
Maxsus forma elementi | Sinab ko‘ring | Maxsus formalar |
.custom-control-inline |
Bir qatordagi (gorizontal — yonma-yon) maxsus forma elementlari | Sinab ko‘ring | Maxsus formalar |
.custom-control-label |
Maxsus forma elementi bilan birga ishlatiladigan maxsus yorliq (label) | Sinab ko‘ring | Maxsus formalar |
.custom-file |
Maxsus fayl yuklash maydoni | Sinab ko‘ring | Maxsus formalar |
.custom-file-input |
Maxsus fayl yuklash maydoni | Sinab ko‘ring | Maxsus formalar |
.custom-file-label |
Fayl maydoni uchun maxsus yorliq (label) | Sinab ko‘ring | Maxsus formalar |
.custom-radio |
Maxsus radio tugmalar uchun o‘rovchi element/konteyner | Sinab ko‘ring | Maxsus formalar |
.custom-range |
Maxsus diapazon (range) elementi | Sinab ko‘ring | Maxsus formalar |
.custom-select |
Maxsus tanlash menyusi | Sinab ko‘ring | Maxsus formalar |
.custom-select-lg |
Katta maxsus tanlash menyusi | Sinab ko‘ring | Maxsus formalar |
.custom-select-sm |
Kichik maxsus tanlash menyusi | Sinab ko‘ring | Maxsus formalar |
.custom-switch |
Maxsus almashtirgich (toggle switch) | Sinab ko‘ring | Maxsus formalar |
.disabled |
Tugmani nofaol qiladi (shaffoflik qo‘shadi, sichqoncha ustiga olib borilganda esa kursor "to‘xtash taqiqlangan" belgisi ko‘rinishiga keladi) | Sinab ko‘ring | Tugmalar |
.disabled |
Ochiluvchi menyu elementini nofaol qiladi (kulrang matn rangini beradi, sichqoncha ustiga olib borilganda esa kursor "to‘xtash taqiqlangan" belgisi ko‘rinishiga keladi) | Sinab ko‘ring | Ochiluvchi menyular |
.disabled |
Sahifalash havolasini nofaol qiladi (uni bosib bo‘lmaydi — kulrang matn rangini beradi, sichqoncha ustiga olib borilganda esa kursor "to‘xtash taqiqlangan" belgisi ko‘rinishiga keladi) | Sinab ko‘ring | Sahifalash |
.disabled |
Ro‘yxat guruhidagi ro‘yxat elementini nofaol qiladi (uni bosib bo‘lmaydi — och kulrang rang beradi va ro‘yxat elementi havolalaridagi hover effektini olib tashlaydi) | Sinab ko‘ring | Ro‘yxat guruhlari |
.dropdown |
Foydalanuvchiga oldindan belgilangan ro‘yxatdan bitta qiymatni tanlash imkonini beruvchi ochib-yopiladigan menyu yaratadi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-divider |
Ochiluvchi menyudagi havolalarni ingichka gorizontal chiziq bilan ajratish uchun ishlatiladi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-header |
Ochiluvchi menyu ichiga sarlavhalar qo‘shish uchun ishlatiladi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-item |
Ochiluvchi menyu elementini yaratadi (.dropdown-menu ichidagi havola yoki tugmalarga qo‘shiladi) | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-item-text |
Ochiluvchi menyu elementiga oddiy matn qo‘shish uchun yoki havolalarga standart havola uslubini berish uchun ishlatiladi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-menu |
Ochiluvchi menyu konteyneriga standart stillarni qo‘shadi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-menu-right |
Ochiluvchi menyuni o‘ngga tekislaydi | Sinab ko‘ring | Ochiluvchi menyular |
.dropdown-toggle |
Ochiluvchi menyuni yashiradigan va ko‘rsatadigan (toggle) tugmada ishlatiladi | Sinab ko‘ring | Ochiluvchi menyular |
.dropleft |
Ochiluvchi menyuni chapga tekislaydi | Sinab ko‘ring | Ochiluvchi menyular |
.dropright |
Ochiluvchi menyuni o‘ngga tekislaydi | Sinab ko‘ring | Ochiluvchi menyular |
.dropup |
Yuqoriga ochiladigan menyuni (dropup) bildiradi (pastga emas, yuqoriga) | Sinab ko‘ring | Ochiluvchi menyular |
.d-block |
Blok element yaratadi (display:block ni qo‘shadi) |
Sinab ko‘ring | Yordamchi klasslar |
.d-*-block |
Muayyan ekran kengligida blok element yaratadi | Sinab ko‘ring | Yordamchi klasslar |
.d-inline |
Elementni inline qiladi | Sinab ko‘ring | Yordamchi klasslar |
.d-*-inline |
Elementni muayyan ekran o‘lchamida inline qiladi | Sinab ko‘ring | Yordamchi klasslar |
.d-inline-block |
Elementni inline-block qiladi | Sinab ko‘ring | Yordamchi klasslar |
.d-*-inline-block |
Elementni muayyan ekran o‘lchamida inline-block qiladi | Sinab ko‘ring | Yordamchi klasslar |
.d-flex |
Flexbox konteyner yaratadi va uning bevosita farzand elementlarini flex elementlarga aylantiradi | Sinab ko‘ring | Flex |
.d-*-flex |
Muayyan ekran o‘lchamida flexbox konteyner yaratadi | Sinab ko‘ring | Flex |
.d-inline-flex |
Inline flexbox konteyner yaratadi | Sinab ko‘ring | Flex |
.d-*-inline-flex |
Muayyan ekran o‘lchamida inline flexbox konteyner yaratadi | Sinab ko‘ring | Flex |
.d-none |
Elementni yashiradi | Sinab ko‘ring | Yordamchi klasslar |
.d-*-none |
Elementni muayyan ekran o‘lchamida yashiradi | Sinab ko‘ring | Yordamchi klasslar |
.d-table |
Elementni jadval (table) sifatida ko‘rsatadi | Sinab ko‘ring | Yordamchi klasslar |
.d-*-table |
Elementni muayyan ekran o‘lchamida jadval (table) sifatida ko‘rsatadi | Sinab ko‘ring | Yordamchi klasslar |
.d-table-cell |
Elementni jadval katagi (table cell) sifatida ko‘rsatadi | Sinab ko‘ring | Yordamchi klasslar |
.d-*-table-cell |
Elementni muayyan ekran o‘lchamida jadval katagi (table cell) sifatida ko‘rsatadi | Sinab ko‘ring | Yordamchi klasslar |
.d-table-row |
Elementni jadval qatori (table row) sifatida ko‘rsatadi | Sinab ko‘ring | Yordamchi klasslar |
.d-*-table-row |
Elementni muayyan ekran o‘lchamida jadval qatori (table row) sifatida ko‘rsatadi | Sinab ko‘ring | Yordamchi klasslar |
.embed-responsive |
Joylashtirilgan kontent (embed) uchun konteyner. Video yoki slayd-shoularning istalgan qurilmada to‘g‘ri masshtablanishini ta’minlaydi | Sinab ko‘ring | Rasmlar |
.embed-responsive-16by9 |
Joylashtirilgan kontent (embed) uchun konteyner. Tomonlar nisbati 16:9 bo‘lgan joylashtirilgan kontent yaratadi | Sinab ko‘ring | Rasmlar |
.embed-responsive-3by4 |
Joylashtirilgan kontent (embed) uchun konteyner. Tomonlar nisbati 3:4 bo‘lgan joylashtirilgan kontent yaratadi | Sinab ko‘ring | Rasmlar |
.embed-responsive-item |
.embed-responsive ichida ishlatiladi. Videoni ota elementga chiroyli tarzda moslab masshtablaydi |
Sinab ko‘ring | Rasmlar |
.fade |
Ogohlantirish blokini yopishda asta-sekin yo‘qolish (fade) effektini qo‘shadi | Sinab ko‘ring | Ogohlantirishlar |
.fade |
Tab/pill kontentini ko‘rsatishda asta-sekin paydo bo‘lish (fade) effektini qo‘shadi | Sinab ko‘ring | Navigatsiya menyulari |
.fade |
Modal oyna ochilayotganda asta-sekin paydo bo‘lish (fade) effektini qo‘shadi | Sinab ko‘ring | Modal oyna |
.fixed-bottom |
Elementni ekranning pastki qismida qotirib qo‘yadi (sticky/fixed) | Sinab ko‘ring | Yordamchi klasslar |
.fixed-top |
Elementni ekranning yuqori qismida qotirib qo‘yadi (sticky/fixed) | Sinab ko‘ring | Yordamchi klasslar |
.flex-column |
Flex elementlarni vertikal joylashtiradi | Sinab ko‘ring | Flex |
.flex-*-column |
Turli ekran o‘lchamlarida flex elementlarni vertikal joylashtiradi: | Sinab ko‘ring | Flex |
.flex-column-reverse |
Flex elementlarni vertikal va teskari tartibda joylashtiradi | Sinab ko‘ring | Flex |
.flex-*-column-reverse |
Turli ekran o‘lchamlarida flex elementlarni vertikal va teskari tartibda joylashtiradi | Sinab ko‘ring | Flex |
.flex-fill |
Flex element(lar)ni teng kenglikdagi ustunlarga majburlash uchun ularga qo‘llaniladi | Sinab ko‘ring | Flex |
.flex-*-fill |
Turli ekranlarda flex elementlarni teng kenglikka majburlaydi | Sinab ko‘ring | Flex |
.flex-grow-0|1 |
Alohida flex element qolgan bo‘sh joyni egallashi uchun unga qo‘llaniladi | Sinab ko‘ring | Flex |
.flex-nowrap |
Flex elementlarni o‘ramaydi (keyingi qatorga o‘tkazmaydi) | Sinab ko‘ring | Flex |
.flex-*-nowrap |
Turli ekranlarda elementlarni o‘ramaydi (keyingi qatorga o‘tkazmaydi) | Sinab ko‘ring | Flex |
.flex-shrink-0|1 |
Alohida flex element kerak bo‘lganda kichrayishi uchun unga qo‘llaniladi | Flex | |
.flex-row |
Flex elementlarni gorizontal (yonma-yon) joylashtiradi | Sinab ko‘ring | Flex |
.flex-*-row |
Muayyan ekran o‘lchamida flex elementlarni gorizontal joylashtiradi | Sinab ko‘ring | Flex |
.flex-row-reverse |
Flex elementlarni gorizontal va o‘ngga tekislangan holda joylashtiradi | Sinab ko‘ring | Flex |
.flex-*-row-reverse |
Muayyan ekran o‘lchamida flex elementlarni gorizontal va o‘ngga tekislangan holda joylashtiradi | Sinab ko‘ring | Flex |
.flex-wrap |
Flex elementlarni o‘raydi (keyingi qatorga o‘tkazadi) | Sinab ko‘ring | Flex |
.flex-*-wrap |
Turli ekranlarda elementlarni o‘raydi (keyingi qatorga o‘tkazadi) | Sinab ko‘ring | Flex |
.flex-wrap-reverse |
Flex elementlarni teskari tartibda o‘raydi | Sinab ko‘ring | Flex |
.flex-*-wrap-reverse |
Turli ekranlarda flex elementlarni teskari tartibda o‘raydi | Sinab ko‘ring | Flex |
.float-left |
Elementni chapga joylashtiradi (float) | Sinab ko‘ring | Yordamchi klasslar |
.float-*-left |
Turli ekranlarda elementni chapga joylashtiradi (float) | Sinab ko‘ring | Yordamchi klasslar |
.float-none |
Elementdan float’ni olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.float-right |
Elementni o‘ngga joylashtiradi (float) | Sinab ko‘ring | Yordamchi klasslar |
.float-*-right |
Turli ekranlarda elementni chapga joylashtiradi (float) | Sinab ko‘ring | Yordamchi klasslar |
.font-italic |
Kursiv (Italic) matn | Sinab ko‘ring | Tipografiya |
.font-weight-bold |
Qalin matn | Sinab ko‘ring | Tipografiya |
.font-weight-bolder |
Yanada qalinroq matn (font-weight:bolder) | Sinab ko‘ring | Tipografiya |
.font-weight-light |
Ingichka (light) matn (font-weight:300) | Sinab ko‘ring | Tipografiya |
.font-weight-lighter |
Yanada ingichkaroq matn (font-weight:lighter) | Sinab ko‘ring | Tipografiya |
.font-weight-normal |
Oddiy (normal) matn (font-weight:400) | Sinab ko‘ring | Tipografiya |
.form-check |
Checkbox’lar uchun konteyner. To‘g‘ri ichki chekinish (padding) qo‘shadi | Sinab ko‘ring | Formalar |
.form-check-inline |
Checkbox’larni bitta qatorda (gorizontal) ko‘rsatadi | Sinab ko‘ring | Formalar |
.form-check-input |
Checkbox’larni to‘g‘ri tashqi chekinishlar (margin) bilan bezaydi | Sinab ko‘ring | Formalar |
.form-check-label |
Checkbox’lar bilan birga ishlatiladigan label’lar uchun to‘g‘ri tashqi chekinishlarni ta’minlaydi | Sinab ko‘ring | Formalar |
.form-control |
input, textarea va select elementlari sahifaning butun kengligini egallashi va moslashuvchan bo‘lishi uchun ularga qo‘llaniladi | Sinab ko‘ring | Formalar |
.form-control-file |
type="file" bo‘lgan kiritish maydoniga display:block va width:100% ni qo‘shadi |
Sinab ko‘ring | Formalar |
.form-control-lg |
Katta forma elementi | Sinab ko‘ring | Formalar |
.form-control-plaintext |
Forma elementini oddiy matn ko‘rinishida bezaydi | Sinab ko‘ring | Formalar |
.form-control-range |
type="range" bo‘lgan kiritish maydoniga display:block va width:100% ni qo‘shadi |
Sinab ko‘ring | Formalar |
.form-control-sm |
Kichik forma elementi | Sinab ko‘ring | Formalar |
.form-group |
Forma kiritish maydoni va yorlig‘i (label) uchun konteyner | Sinab ko‘ring | Formalar |
.form-inline |
<form> elementini inline-block elementlar bilan chapga tekislangan holga keltiradi (Bu faqat kengligi kamida 768px bo‘lgan viewport’lardagi formalarga tegishli) | Sinab ko‘ring | Formalar |
.form-row |
Moslashuvchan ustunlar uchun konteyner (.row ga qaraganda chap va o‘ng tashqi chekinishlari kichikroq / ustunlar orasidagi standart bo‘shliqlarni qayta belgilaydi) |
Sinab ko‘ring | Formalar |
.h1 - .h6 |
Elementni tanlangan klassdagi sarlavhaga (h1-h6) o‘xshatadi | Sinab ko‘ring | Tipografiya |
.h-25 |
Element balandligini 25% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
.h-50 |
Element balandligini 50% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
.h-75 |
Element balandligini 75% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
.h-100 |
Element balandligini 100% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
.img-fluid |
Moslashuvchan rasm (max-width:100% va height:auto qo‘shadi) | Sinab ko‘ring | Rasmlar |
.img-thumbnail |
Rasmni eskiz (thumbnail) ko‘rinishiga keltiradi (ingichka och kulrang chegaralar) | Sinab ko‘ring | Rasmlar |
.initialism |
<abbr> elementi ichidagi matnni biroz kichikroq shrift o‘lchamida ko‘rsatadi |
Sinab ko‘ring | Tipografiya |
.input-group |
Kiritish maydoni oldiga yoki orqasiga "yordamchi matn" sifatida belgi (icon), matn yoki tugma qo‘shib, uni boyitish uchun konteyner | Sinab ko‘ring | Kiritish guruhi |
.input-group-append |
Kiritish maydoni orqasiga yordamchi matn qo‘shish uchun kiritish guruhi konteyneri | Sinab ko‘ring | Kiritish guruhi |
.input-group-lg |
Katta kiritish guruhi | Sinab ko‘ring | Kiritish guruhi |
.input-group-prepend |
Kiritish maydoni oldiga yordamchi matn qo‘shish uchun kiritish guruhi konteyneri | Sinab ko‘ring | Kiritish guruhi |
.input-group-sm |
Kichik kiritish guruhi | Sinab ko‘ring | Kiritish guruhi |
.input-group-text |
Kiritish guruhidagi yordamchi matnni bezaydi | Sinab ko‘ring | Kiritish guruhi |
.input-lg |
Katta kiritish maydoni | Sinab ko‘ring | Kiritish maydoni o‘lchami |
.input-sm |
Kichik kiritish maydoni | Sinab ko‘ring | Kiritish maydoni o‘lchami |
.invalid-feedback |
Validatsiya qilinadigan formalarda ishlatiladigan maxsus validatsiya xabarini yaratadi (qizil matn rangi) | Sinab ko‘ring | Formalar |
.invalid-tooltip |
Validatsiya qilinadigan formalarda ishlatiladigan maxsus validatsiya xabarini yaratadi (qizil tooltip) | Sinab ko‘ring | Formalar |
.invisible |
Elementni ko‘rinmas qiladi | Sinab ko‘ring | Yordamchi klasslar |
.is-invalid |
Forma elementini validatsiya qiladi (kiritish maydonlariga qizil chegara qo‘shadi). Eslatma: server tomoni uchun | Sinab ko‘ring | Formalar |
.is-valid |
Forma elementini validatsiya qiladi (kiritish maydonlariga yashil chegara qo‘shadi). Eslatma: server tomoni uchun | Sinab ko‘ring | Formalar |
.jumbotron |
Ichidagi matn shrift o‘lchamlarini kattalashtiradigan, ichki chekinishli va yumaloq burchakli kulrang sarlavha/blok yaratadi. Maxsus kontent yoki ma’lumotga alohida e’tibor qaratish uchun ishlatiladi | Sinab ko‘ring | Jumbotron |
.jumbotron-fluid |
Yumaloq burchaklarsiz, to‘liq kenglikdagi jumbotron (ichki chekinishli kulrang sarlavha) yaratadi | Sinab ko‘ring | Jumbotron |
.justify-content-* |
Flex elementlarni boshidan, oxirida, markazda, between va "around" usulida tekislaydi | Sinab ko‘ring | Flex |
.justify-content-*-around |
Turli ekran o‘lchamlarida flex elementlarni "around" usulida tekislaydi | Sinab ko‘ring | Flex |
.justify-content-*-between |
Turli ekran o‘lchamlarida flex elementlarni "between" usulida tekislaydi | Sinab ko‘ring | Flex |
.justify-content-*-center |
Turli ekran o‘lchamlarida flex elementlarni markazda tekislaydi | Sinab ko‘ring | Flex |
.justify-content-*-end |
Turli ekran o‘lchamlarida flex elementlarni oxirida tekislaydi | Sinab ko‘ring | Flex |
.justify-content-*-start |
Turli ekran o‘lchamlarida flex elementlarni boshidan tekislaydi | Sinab ko‘ring | Flex |
.lead |
Paragrafning shrift o‘lchami va qator balandligini oshiradi | Sinab ko‘ring | Tipografiya |
.list-group |
<li> elementlari uchun chegarali ro‘yxat guruhini yaratadi |
Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-flush |
Ro‘yxat guruhidagi ro‘yxat elementlaridan ba’zi chegaralar va yumaloq burchaklarni olib tashlaydi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-horizontal |
Ro‘yxat elementlarini vertikal emas, gorizontal ko‘rsatadi (bir-birining ustida emas, yonma-yon) | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-horizontal-* |
Turli ekran o‘lchamlarida ro‘yxat elementlarini vertikal emas, gorizontal ko‘rsatadi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item |
Ro‘yxat guruhidagi har bir <li> elementiga qo‘shiladi |
Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-action |
Ro‘yxat guruhi ichidagi havolalar sichqoncha ustiga olib borilganda ajralib turishi uchun ularga qo‘shiladi (to‘qroq fon) | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-danger |
Ro‘yxat guruhidagi ro‘yxat elementi uchun qizil fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-dark |
Ro‘yxat guruhidagi ro‘yxat elementi uchun to‘q kulrang fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-info |
Ro‘yxat guruhidagi ro‘yxat elementi uchun och ko‘k fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-light |
Ro‘yxat guruhidagi ro‘yxat elementi uchun och kulrang fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-primary |
Ro‘yxat guruhidagi ro‘yxat elementi uchun ko‘k fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-success |
Ro‘yxat guruhidagi ro‘yxat elementi uchun yashil fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-group-item-warning |
Ro‘yxat guruhidagi ro‘yxat elementi uchun sariq fon rangi | Sinab ko‘ring | Ro‘yxat guruhi |
.list-inline |
Barcha ro‘yxat elementlarini bitta qatorga joylashtiradi (har bir <li> elementida .list-inline-item bilan birga ishlatiladi) |
Sinab ko‘ring | Tipografiya |
.list-inline-item |
Barcha ro‘yxat elementlarini bitta qatorga joylashtiradi (ota <ul> elementidagi .list-inline bilan birga ishlatiladi) |
Sinab ko‘ring | Tipografiya |
.list-unstyled |
<ul> yoki <ol> ro‘yxatidan barcha standart list-style stillarini (markerlar, chap tashqi chekinish va h.k.) olib tashlaydi |
Sinab ko‘ring | Tipografiya |
.mark |
Matnni ajratib ko‘rsatadi: Ajratilgan matn | Sinab ko‘ring | Tipografiya |
.media |
Media obyektlarni (masalan, rasm yoki videolarni) kontent bilan birga tekislaydi (ko‘pincha blog postidagi izohlar va h.k. uchun ishlatiladi) | Sinab ko‘ring | Media obyektlar |
.media-body |
Media kontent uchun konteyner | Sinab ko‘ring | Media obyektlar |
.modal |
Kontentni modal oyna sifatida belgilaydi va unga fokus beradi | Sinab ko‘ring | Modal oynalar |
.modal-body |
Modal oyna tanasi (body) uslubini belgilaydi. Bu yerga istalgan HTML belgilashni (p, img va h.k.) qo‘shing | Sinab ko‘ring | Modal oynalar |
.modal-content |
Modal oynani bezaydi (chegara, fon rangi va h.k.). Kerak bo‘lsa, uning ichiga modal oynaning sarlavhasi (header), tanasi (body) va pastki qismini (footer) qo‘shing | Sinab ko‘ring | Modal oynalar |
.modal-dialog-centered |
Modal oynani sahifada vertikal va gorizontal bo‘yicha markazga joylashtiradi | Sinab ko‘ring | Modal oynalar |
.modal-dialog-scrollable |
Modal oyna ichiga aylantirish chizig‘ini (scrollbar) qo‘shadi | Sinab ko‘ring | Modal oynalar |
.modal-footer |
Modal oynaning pastki qismi (footer) (ko‘pincha amal tugmasi va yopish tugmasini o‘z ichiga oladi) | Sinab ko‘ring | Modal oynalar |
.modal-header |
Modal oynaning sarlavhasi (header) (ko‘pincha sarlavha matni va yopish tugmasini o‘z ichiga oladi) | Sinab ko‘ring | Modal oynalar |
.modal-lg |
Katta modal oyna (standartdan kengroq) | Sinab ko‘ring | Modal oynalar |
.modal-sm |
Kichik modal oyna (kengligi kichikroq) | Sinab ko‘ring | Modal oynalar |
.modal-xl |
Juda katta modal oyna | Sinab ko‘ring | Modal oynalar |
.m-# / m-*-# |
Moslashuvchan tashqi chekinish (margin) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.mt-# / mt-*-# |
Moslashuvchan yuqori tashqi chekinish (margin-top) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.mb-# / mb-*-# |
Moslashuvchan pastki tashqi chekinish (margin-bottom) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.ml-# / ml-*-# |
Moslashuvchan chap tashqi chekinish (margin-left) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.mr-# / mr-*-# |
Moslashuvchan o‘ng tashqi chekinish (margin-right) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.mx-# / mx-*-# |
Moslashuvchan chap va o‘ng (gorizontal) tashqi chekinish klasslari (auto qiymati ham mumkin). * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.my-# / my-*-# |
Moslashuvchan yuqori va pastki (vertikal) tashqi chekinish klasslari (auto qiymati ham mumkin). * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.mx-auto |
Elementni gorizontal bo‘yicha markazga joylashtiradi | Sinab ko‘ring | Yordamchi klasslar |
.nav nav-tabs |
Tablardan iborat menyu yaratadi | Sinab ko‘ring | Tablar |
.nav nav-pills |
Pill’lardan iborat menyu yaratadi | Sinab ko‘ring | Tablar |
.nav-justified |
Tab/pill havolalarini teng kenglikda tekislaydi | Sinab ko‘ring | Tablar |
.navbar |
Navigatsiya paneli yaratadi | Sinab ko‘ring | Navbar |
.navbar-nav |
.navbar konteyneri ichidagi navigatsiya havolalari uchun konteyner | Sinab ko‘ring | Navbar |
.navbar-brand |
Logotip yoki sarlavhani ifodalash uchun navigatsiya paneli ichidagi havola yoki sarlavha elementiga qo‘shiladi | Sinab ko‘ring | Navbar |
.navbar-collapse |
Navigatsiya panelini yig‘adi (mobil telefonlar va kichik planshetlarda yashiriladi hamda menyu/gamburger belgisi bilan almashtiriladi) | Sinab ko‘ring | Navbar |
.navbar-expand-* |
Moslashuvchan yig‘ilish klassi — navigatsiya panelini small (sm), medium (md), large (lg) yoki extra large (xl) ekranlarda vertikal joylashtiradi | Sinab ko‘ring | Navbar |
.navbar-dark |
Navigatsiya panelidagi barcha havolalarga oq matn rangini beradi | Sinab ko‘ring | Navbar |
.navbar-light |
Navigatsiya panelidagi barcha havolalarga qora matn rangini beradi | Sinab ko‘ring | Navbar |
.navbar-text |
Navigatsiya paneli ichidagi havola bo‘lmagan har qanday elementlarni vertikal bo‘yicha tekislaydi (to‘g‘ri ichki chekinishni ta’minlaydi) | Sinab ko‘ring | Navbar |
.navbar-toggler |
Kichik ekranlarda navigatsiya panelini ochadigan tugmani bezaydi. Avtomatik ravishda gamburger/uchta chiziq ko‘rinishida bezaladi | Sinab ko‘ring | Navbar |
.nav-link |
Navigatsiya paneli ichidagi havolalarni (anchor) bezash uchun ishlatiladi | Sinab ko‘ring | Navbar |
.nav-item |
Navigatsiya paneli ichidagi ro‘yxat elementlarini bezash uchun ishlatiladi | Sinab ko‘ring | Navbar |
.needs-validation |
Yuborilgan formaga validatsiya stillarini qo‘shadi | Sinab ko‘ring | Formalar |
.no-gutters |
Ustunlardan bo‘shliqlarni (gutter/qo‘shimcha oraliq) olib tashlaydi | Sinab ko‘ring | Grid tizimi |
.page-item |
Sahifalash ichidagi ro‘yxat elementlarini bezaydi | Sinab ko‘ring | Sahifalash |
.page-link |
Sahifalash ichidagi havolalarni bezaydi | Sinab ko‘ring | Sahifalash |
.pagination |
Sahifalash yaratadi (saytingizda sahifalar ko‘p bo‘lganda foydali | Sinab ko‘ring | Sahifalash |
.pagination-lg |
Katta sahifalash (har bir sahifalash havolasi kattaroq shrift o‘lchami va ko‘proq ichki chekinishga ega bo‘ladi) | Sinab ko‘ring | Sahifalash |
.pagination-sm |
Kichik sahifalash (har bir sahifalash havolasi kichikroq shrift o‘lchami va kamroq ichki chekinishga ega bo‘ladi) | Sinab ko‘ring | Sahifalash |
.pre-scrollable |
<pre> elementini aylantiriladigan qiladi (350px li max-height beradi va y o‘qi bo‘yicha aylantirish chizig‘ini qo‘shadi) |
Sinab ko‘ring | Yordamchilar |
.progress |
Progress barlar uchun konteyner | Sinab ko‘ring | Progress barlar |
.progress-bar |
Progress bar yaratadi | Sinab ko‘ring | Progress barlar |
.progress-bar-animated |
Progress barni animatsiyali qiladi (yo‘l-yo‘l chiziqlar bilan birga ishlatiladi) | Sinab ko‘ring | Progress barlar |
.progress-bar-striped |
Progress barga yo‘l-yo‘l chiziqlar qo‘shadi | Sinab ko‘ring | Progress barlar |
.p-# / p-*-# |
Moslashuvchan ichki chekinish (padding) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.pt-# / pt-*-# |
Moslashuvchan yuqori ichki chekinish (padding-top) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.pb-# / pb-*-# |
Moslashuvchan pastki ichki chekinish (padding-bottom) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.pl-# / pl-*-# |
Moslashuvchan chap ichki chekinish (padding-left) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.pr-# / pr-*-# |
Moslashuvchan o‘ng ichki chekinish (padding-right) klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.py-# / py-*-# |
Moslashuvchan yuqori va pastki ichki chekinish klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.px-# / px-*-# |
Moslashuvchan chap va o‘ng ichki chekinish klasslari. * o‘rnida sm, md, lg yoki xl bo‘lishi mumkin. # — 0 dan 5 gacha bo‘lgan son | Sinab ko‘ring | Yordamchi klasslar |
.rounded |
Elementga yumaloq burchaklar qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.rounded-bottom |
Elementning pastki burchaklarini yumaloqlaydi | Sinab ko‘ring | Yordamchi klasslar |
.rounded-circle |
Elementni doira shakliga keltiradi (IE8 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi) | Sinab ko‘ring | Yordamchi klasslar |
.rounded-left |
Elementning chap burchaklarini yumaloqlaydi | Sinab ko‘ring | Yordamchi klasslar |
.rounded-right |
Elementning o‘ng burchaklarini yumaloqlaydi | Sinab ko‘ring | Yordamchi klasslar |
.rounded-top |
Elementning yuqori burchaklarini yumaloqlaydi | Sinab ko‘ring | Yordamchi klasslar |
.rounded-0 |
Elementdan yumaloq burchaklarni olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.row |
Moslashuvchan ustunlar uchun konteyner | Sinab ko‘ring | Grid tizimi |
.row-cols-* |
Yonma-yon ko‘rinadigan ustunlar sonini belgilaydi | Sinab ko‘ring | Grid tizimi |
.shadow |
Elementga soya qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.shadow-lg |
Elementga katta soya qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.shadow-none |
Elementdan soyalarni olib tashlaydi | Sinab ko‘ring | Yordamchi klasslar |
.shadow-sm |
Elementga kichik soya qo‘shadi | Sinab ko‘ring | Yordamchi klasslar |
.small |
Istalgan sarlavhada ochroq, ikkinchi darajali matn yaratadi | Sinab ko‘ring | Tipografiya |
.spinner-border |
Spinner (yuklanish indikatori) yaratadi | Sinab ko‘ring | Spinnerlar |
.spinner-border-sm |
Kichikroq spinner (yuklanish indikatori) yaratadi | Sinab ko‘ring | Spinnerlar |
.spinner-grow |
"Kattalashib boradigan" spinner (yuklanish indikatori) yaratadi | Sinab ko‘ring | Spinnerlar |
.spinner-grow-sm |
"Kattalashib boradigan" kichikroq spinner (yuklanish indikatori) yaratadi | Sinab ko‘ring | Spinnerlar |
.sr-only |
Elementni ekran o‘quvchi dasturlardan tashqari barcha qurilmalarda yashiradi | Sinab ko‘ring | Yordamchi klasslar |
.sr-only-focusable |
Elementni ekran o‘quvchi dasturlardan tashqari barcha qurilmalarda yashiradi | Sinab ko‘ring | Yordamchi klasslar |
.sticky-top |
Sahifa aylantirilib, elementdan o‘tib ketilganda uni sahifaning yuqori qismida qotirib qo‘yadi (sticky/fixed) | Sinab ko‘ring | Yordamchi klasslar |
.stretched-link |
Havolani o‘z ichiga olgan blokni (ota elementni) bosiladigan qilish uchun havolaga qo‘shiladi (faqat position:relative bo‘lgan ota elementlarda ishlaydi) | Sinab ko‘ring | Yordamchi klasslar |
.tab-content |
Almashtiriladigan/dinamik tab/pill’lar yaratish uchun .tab-pane bilan birga ishlatiladi |
Sinab ko‘ring | Tablar |
.tab-pane |
Almashtiriladigan/dinamik tab/pill’lar yaratish uchun .tab-content bilan birga ishlatiladi |
Sinab ko‘ring | Tablar |
.table |
Jadvalga asosiy stillarni qo‘shadi (ichki chekinish, pastki chegaralar va h.k.) | Sinab ko‘ring | Jadvallar |
.table-active |
Jadval qatoriga (<tr> yoki jadval katagiga (<td>) kulrang fon rangini beradi (hover uchun ishlatiladigan rang bilan bir xil) |
Sinab ko‘ring | Jadvallar |
.table-bordered |
Jadval va kataklarning barcha tomonlariga chegara qo‘shadi | Sinab ko‘ring | Jadvallar |
.table-borderless |
Jadvaldan chegaralarni olib tashlaydi | Sinab ko‘ring | Jadvallar |
.table-condensed |
Kataklarning ichki chekinishini ikki baravar qisqartirib, jadvalni ixchamroq qiladi | Sinab ko‘ring | Jadvallar |
.table-dark |
Jadvalga qora fon va oq matn beradi | Sinab ko‘ring | Jadvallar |
.table-hover |
Hover effektli jadval yaratadi (sichqoncha ustiga olib borilganda jadval qatorlariga kulrang fon rangini beradi) | Sinab ko‘ring | Jadvallar |
.table-responsive-* |
Jadvalni moslashuvchan qiladi (kerak bo‘lganda gorizontal aylantirish chizig‘ini qo‘shadi). Standart holatda aylantirish chizig‘i kengligi 992px dan kichik ekranlarda (kerak bo‘lsa) jadvalga qo‘shiladi. Kengligi 992px dan katta ekranlarda hech qanday farq bo‘lmaydi. Biroq ekran kengligiga qarab jadvalda aylantirish chizig‘i QACHON paydo bo‘lishini belgilash uchun sm|md|lg|xl dan foydalanishingiz mumkin | Sinab ko‘ring | Jadvallar |
.table-striped |
Jadvalga zebra kabi yo‘l-yo‘l chiziqlar qo‘shadi | Sinab ko‘ring | Jadvallar |
.text-break |
Uzun matn maketni buzishining oldini oladi | Sinab ko‘ring | Tipografiya |
.text-capitalize |
Har bir so‘zni bosh harf bilan boshlaydi | Sinab ko‘ring | Tipografiya |
.text-center |
Matnni markazga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-*-center |
Turli ekranlarda matnni markazga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-danger |
Qizil matn rangi. Xavfni bildiradi | Sinab ko‘ring | Ranglar |
.text-dark |
To‘q kulrang matn rangi | Sinab ko‘ring | Tipografiya |
.text-decoration-none |
Havoladan tagiga chizishni (underline) olib tashlaydi | Sinab ko‘ring | Tipografiya |
.text-hide |
Matnni yashiradi (element matn kontentini fon rasmi bilan almashtirishga yordam beradi) | Sinab ko‘ring | Tipografiya |
.text-info |
Och ko‘k matn rangi. Ma’lumotni bildiradi | Sinab ko‘ring | Ranglar |
.text-light |
Och kulrang matn rangi | Sinab ko‘ring | Ranglar |
.text-justify |
Matnni ikki chet bo‘yicha (justify) tekislaydi | Sinab ko‘ring | Tipografiya |
.text-left |
Matnni chapga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-*-left |
Turli ekranlarda matnni chapga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-lowercase |
Matnni kichik harflarga o‘tkazadi | Sinab ko‘ring | Tipografiya |
.text-muted |
Kulrang matn rangi | Sinab ko‘ring | Ranglar |
.text-nowrap |
Matnning keyingi qatorga o‘tishining oldini oladi | Sinab ko‘ring | Tipografiya |
.text-primary |
Ko‘k matn rangi. Muhim narsani bildiradi | Sinab ko‘ring | Ranglar |
.text-secondary |
Kulrang matn rangi. "Kamroq" muhim narsani bildiradi | Sinab ko‘ring | Ranglar |
.text-reset |
Matn yoki havola rangini tiklaydi (rangni ota elementdan meros qilib oladi) | Sinab ko‘ring | Tipografiya |
.text-right |
Matnni o‘ngga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-*-right |
Turli ekranlarda matnni o‘ngga tekislaydi | Sinab ko‘ring | Tipografiya |
.text-success |
Yashil matn rangi. Muvaffaqiyatni bildiradi | Sinab ko‘ring | Ranglar |
.text-uppercase |
Matnni katta harflarga o‘tkazadi | Sinab ko‘ring | Tipografiya |
.text-warning |
Sariq/to‘q sariq matn rangi. Ogohlantirishni bildiradi | Sinab ko‘ring | Ranglar |
.text-white |
Oq matn rangi | Sinab ko‘ring | Ranglar |
.thead-dark |
Jadval sarlavhalariga qora fon rangini beradi | Sinab ko‘ring | Jadvallar |
.thead-light |
Jadval sarlavhalariga kulrang fon rangini beradi | Sinab ko‘ring | Jadvallar |
.toast |
Toast yaratadi (bir necha soniyadan keyin yo‘qoladigan ogohlantirish oynasi) | Sinab ko‘ring | Toast xabarlar |
.toast-body |
Toast tanasi (body) | Sinab ko‘ring | Toast xabarlar |
.toast-header |
Toast sarlavhasi (header) | Sinab ko‘ring | Toast xabarlar |
.valid-feedback |
Validatsiya qilinadigan formalarda ishlatiladigan maxsus validatsiya xabarini yaratadi (yashil matn rangi) | Sinab ko‘ring | Formalar |
.valid-tooltip |
Validatsiya qilinadigan formalarda ishlatiladigan maxsus validatsiya xabarini yaratadi (yashil tooltip) | Sinab ko‘ring | Formalar |
.visible |
Elementni ko‘rinadigan qiladi | Sinab ko‘ring | Yordamchi klasslar |
.was-validated |
Forma elementiga validatsiya stillarini qo‘shadi | Sinab ko‘ring | Formalar |
.w-25 |
Element kengligini 25% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
.w-50 |
Element kengligini 50% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
.w-75 |
Element kengligini 75% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
.w-100 |
Element kengligini 100% ga o‘rnatadi | Sinab ko‘ring | Yordamchi klasslar |
Yuqoridagi jadvalda barcha mavjud Bootstrap 4 klasslari ko‘rsatilgan.
Maslahat: Barcha Bootstrap 3 klasslarining to‘liq ro‘yxatini ko‘rish uchun Bootstrap 3 barcha CSS klasslari ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!