in English

Kartalar

Bootstrap kartalari bir nechta variant va variantlarga ega moslashuvchan va kengaytiriladigan kontent konteynerini taqdim etadi.

Haqida

Karta moslashuvchan va kengaytiriladigan kontent konteyneridir. U sarlavhalar va altbilgilar uchun variantlarni, turli xil tarkibni, kontekstli fon ranglarini va kuchli displey imkoniyatlarini o'z ichiga oladi. Agar siz Bootstrap 3 bilan tanish bo'lsangiz, kartalar bizning eski panellarimiz, quduqlarimiz va eskizlarimizni almashtiradi. Ushbu komponentlarga o'xshash funksionallik kartalar uchun modifikator sinflari sifatida mavjud.

Misol

Kartalar iloji boricha kamroq belgilar va uslublar bilan yaratilgan, ammo baribir tonna nazorat va sozlashni ta'minlay oladi. Flexbox bilan yaratilgan ular oson tekislashni taklif qiladi va boshqa Bootstrap komponentlari bilan yaxshi aralashadi. Ularda marginsukut bo'yicha yo'q, shuning uchun kerak bo'lganda oraliq yordamchi dasturlardan foydalaning .

Quyida aralash tarkibli va belgilangan kenglikdagi asosiy kartaning namunasi keltirilgan. Kartochkalarda boshlash uchun belgilangan kenglik yo'q, shuning uchun ular tabiiy ravishda asosiy elementning to'liq kengligini to'ldiradi. Bu bizning turli o'lcham variantlarimiz bilan osongina moslashtiriladi .

Placeholder Image cap
Karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Bir joyga boring 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tarkib turlari

Kartalar rasmlar, matn, ro'yxat guruhlari, havolalar va boshqalarni o'z ichiga olgan turli xil tarkibni qo'llab-quvvatlaydi. Quyida qo'llab-quvvatlanadigan narsalarga misollar keltirilgan.

Tana

Kartaning qurilish bloki bu .card-body. Karta ichida to'ldirilgan qism kerak bo'lganda undan foydalaning.

Bu karta korpusidagi ba'zi matn. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Sarlavhalar, matn va havolalar

Karta sarlavhalari tegga qo'shish orqali ishlatiladi .card-title. <h*>Xuddi shu tarzda, havolalar qo'shiladi va tegga qo'shish .card-linkorqali bir-birining yoniga joylashtiriladi.<a>

Subtitrlar tegga .card-subtitlea qo'shish orqali ishlatiladi . <h*>Agar .card-titleva .card-subtitleelementlari .card-bodyelementga joylashtirilsa, kartaning sarlavhasi va taglavhasi yaxshi tekislanadi.

Karta sarlavhasi
Karta subtitri

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Karta havolasi Boshqa havola 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Tasvirlar

.card-img-toptasvirni kartaning yuqori qismiga qo'yadi. , bilan .card-textmatn kartaga qo'shilishi mumkin. Ichidagi matn .card-textstandart HTML teglari bilan ham uslublanishi mumkin.

Placeholder Image cap

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Guruhlarni ro'yxatga olish

Flaş ro'yxati guruhiga ega kartada kontent ro'yxatini yarating.

  • Buyum
  • Ikkinchi element
  • Uchinchi element
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Tanlangan
  • Buyum
  • Ikkinchi element
  • Uchinchi element
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Buyum
  • Ikkinchi element
  • Uchinchi element
Karta altbilgisi 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Oshxona lavabosi

Kerakli kartani yaratish uchun bir nechta kontent turlarini aralashtiring va moslang yoki u erda hamma narsani tashlang. Quyida tasvir uslublari, bloklar, matn uslublari va ro'yxatlar guruhi ko'rsatilgan - barchasi belgilangan kenglikdagi kartaga o'ralgan.

Placeholder Image cap
Karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

  • Buyum
  • Ikkinchi element
  • Uchinchi element
Karta havolasi Boshqa havola 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Karta ichiga ixtiyoriy sarlavha va/yoki altbilgi qo'shing.

Tanlangan
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Karta sarlavhalarini elementlarga qo'shish orqali uslublash mumkin .card-header.<h*>

Tanlangan
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Iqtibos

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Tanlangan
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring
2 kun oldin 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Hajmi

Kartalar widthboshlash uchun hech qanday aniq belgi yo'q, shuning uchun ular boshqacha ko'rsatilmagan bo'lsa, 100% kenglikda bo'ladi. Buni kerak bo'lganda maxsus CSS, grid sinflari, grid Sass mikslari yoki yordamchi dasturlar bilan o'zgartirishingiz mumkin.

Grid belgilaridan foydalanish

To'rdan foydalanib, kerak bo'lganda kartalarni ustunlar va qatorlarga o'rang.

Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Utilitlardan foydalanish

Kartaning kengligini tezda o'rnatish uchun bir nechta mavjud o'lchamli yordamchi dasturlarimizdan foydalaning.

Karta sarlavhasi

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Tugma
Karta sarlavhasi

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Tugma 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Maxsus CSS-dan foydalanish

Kenglikni o'rnatish uchun uslublar jadvallarida yoki ichki uslublar sifatida maxsus CSS-dan foydalaning.

Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Matnni tekislash

Matnni tekislash sinflarimiz yordamida istalgan kartaning matn hizalanishini toʻliq yoki alohida qismlarida tezda oʻzgartirishingiz mumkin .

Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap-ning nav komponentlari bilan kartaning sarlavhasiga (yoki blokiga) biroz navigatsiya qo'shing .

Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Maxsus nom bilan davolash

Qo'shimcha kontentga tabiiy kirish sifatida quyidagi qo'llab-quvvatlovchi matn bilan.

Bir joyga boring 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tasvirlar

Kartalar tasvirlar bilan ishlash uchun bir nechta variantni o'z ichiga oladi. Kartaning har ikki uchiga “tasvir qalpoqlarini” qo‘shish, rasmlarni karta mazmuni bilan qoplash yoki shunchaki tasvirni kartaga joylashtirishni tanlang.

Rasm qalpoqlari

Sarlavhalar va pastki ma'lumotlarga o'xshab, kartalar yuqori va pastki "tasvir qopqoqlarini" o'z ichiga olishi mumkin - kartaning yuqori yoki pastki qismidagi tasvirlar.

Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan

Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Rasm qoplamalari

Tasvirni karta foniga aylantiring va kartangiz matnini ustiga qo'ying. Rasmga qarab, sizga qo'shimcha uslublar yoki yordamchi dasturlar kerak bo'lishi mumkin yoki kerak emas.

Placeholder Card image
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
E'tibor bering, kontent tasvir balandligidan katta bo'lmasligi kerak. Agar kontent rasmdan kattaroq bo'lsa, kontent tasvirdan tashqarida ko'rsatiladi.

Gorizontal

Tarmoq va yordamchi sinflarning kombinatsiyasidan foydalangan holda, kartalar mobil qurilmalar uchun qulay va sezgir tarzda gorizontal holga keltirilishi mumkin. Quyidagi misolda biz panjara oluklarini olib tashlaymiz va to'xtash nuqtasida kartani gorizontal holga keltirish uchun sinflardan .no-guttersfoydalanamiz . Sizning kartangiz tarkibiga qarab qo'shimcha tuzatishlar talab qilinishi mumkin..col-md-*md

Placeholder Image
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Karta uslublari

Kartalar fon, chegara va rangni sozlash uchun turli xil variantlarni o'z ichiga oladi.

Fon va rang

Karta ko'rinishini o'zgartirish uchun matn va fon yordam dasturlaridan foydalaning.

Sarlavha
Asosiy karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ikkilamchi karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Muvaffaqiyat kartasi nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Xavfli karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ogohlantirish kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ma'lumot kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Engil karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Qorong'i karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Yordamchi texnologiyalarga ma'no etkazish

Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .sr-onlysinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.

Chegara

Faqat kartani o'zgartirish uchun chegara yordam dasturidan foydalaning . E'tibor bering, siz quyida ko'rsatilganidek , ota-onaga yoki karta tarkibining bir qismiga sinflarni border-colorqo'yishingiz mumkin ..text-{color}.card

Sarlavha
Asosiy karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ikkilamchi karta nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Muvaffaqiyat kartasi nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Xavfli karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ogohlantirish kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Ma'lumot kartasining sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Engil karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Sarlavha
Qorong'i karta sarlavhasi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins yordamchi dasturlari

Bundan tashqari, kerak bo'lganda kartaning sarlavhasi va altbilgisidagi chegaralarni o'zgartirishingiz va hatto ularni background-colorbilan olib tashlashingiz mumkin .bg-transparent.

Sarlavha
Muvaffaqiyat kartasi nomi

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Altbilgi 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Karta tartibi

Kartalardagi tarkibni shakllantirishdan tashqari, Bootstrap kartalar seriyasini joylashtirish uchun bir nechta variantni o'z ichiga oladi. Hozircha ushbu tartib variantlari hali javob bermaydi .

Karta guruhlari

Kartalarni bir xil kenglik va balandlik ustunlari bilan bitta biriktirilgan element sifatida ko'rsatish uchun karta guruhlaridan foydalaning. Karta guruhlari to'plangan holda boshlanadi va to'xtash display: flex;nuqtasidan boshlab bir xil o'lchamlarga ega bo'lish uchun ishlatiladi sm.

Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan

Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan

Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Altbilgilar bilan karta guruhlarini ishlatganda, ularning mazmuni avtomatik ravishda qatorga tushadi.

Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan
Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan
Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.

Oxirgi marta 3 daqiqa oldin yangilangan 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Karta to'plamlari

Bir-biriga biriktirilmagan teng kenglik va balandlik kartalari to'plami kerakmi? Karta to'plamlaridan foydalaning.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan

Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan

Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Xuddi karta guruhlarida bo'lgani kabi, palubadagi karta altbilgilari avtomatik ravishda qatorga tushadi.

Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Oxirgi marta 3 daqiqa oldin yangilangan
Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan
Placeholder Image cap
Karta sarlavhasi

Bu kengroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu karta teng balandlikdagi harakatni ko'rsatadigan birinchisidan ham uzunroq tarkibga ega.

Oxirgi marta 3 daqiqa oldin yangilangan 
<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Grid kartalari

Har bir satrda qancha panjara ustunlarini (kartalaringiz atrofiga o'ralgan) ko'rsatishingizni boshqarish uchun Bootstrap grid tizimi va uning .row-colssinflaridan foydalaning. Misol uchun, bu erda .row-cols-1kartalarni bitta ustunga qo'yish va .row-cols-md-2to'rtta kartani o'rtacha uzilish nuqtasidan boshlab bir nechta qatorlar bo'ylab teng kenglikka bo'lish.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Uni o'zgartiring .row-cols-3va siz to'rtinchi karta o'ramini ko'rasiz.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Agar sizga teng balandlik kerak .h-100bo'lsa, kartalarga qo'shing. Agar siz sukut bo'yicha teng balandliklarni xohlasangiz $card-height: 100%, Sass-da o'rnatishingiz mumkin.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Placeholder Image cap
Karta sarlavhasi

Bu qisqa karta.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud.

Placeholder Image cap
Karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Karta ustunlari

Kartalarni faqat CSS-ga o'ralgan holda Masonlik.card-columns kabi ustunlarga ajratish mumkin . columnKartalar qulayroq hizalanish uchun flexbox o'rniga CSS xususiyatlari bilan yaratilgan. Kartalar yuqoridan pastgacha va chapdan o'ngga tartiblanadi.

Oldindan qisqa ma'lumot berish! Karta ustunlari bilan kilometringiz farq qilishi mumkin. Kartalar ustunlar bo'ylab sinishining oldini olish uchun ularni hali o'q o'tkazmaydigan yechim display: inline-blocksifatida sozlashimiz kerak.column-break-inside: avoid

Placeholder Image cap
Yangi qatorga o'tadigan karta sarlavhasi

Bu uzunroq karta boʻlib, quyida qoʻshimcha kontentga tabiiy kirish uchun qoʻllab-quvvatlovchi matn mavjud. Bu tarkib biroz uzunroq.

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir
Placeholder Image cap
Karta sarlavhasi

Bu kartada qoʻshimcha kontentga tabiiy kirish uchun quyida qoʻllab-quvvatlovchi matn mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir
Karta sarlavhasi

Ushbu kartada oddiy sarlavha va uning ostida matnning qisqa paragrafi mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan

Placeholder Card image

Blok tirnoq elementida joylashgan taniqli iqtibos.

Manba sarlavhasida mashhur kimdir
Karta sarlavhasi

Bu quyida sarlavha va qo'llab-quvvatlovchi matnga ega bo'lgan boshqa karta. Ushbu kartada uni biroz balandroq qilish uchun qo'shimcha tarkib mavjud.

Oxirgi marta 3 daqiqa oldin yangilangan

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Karta ustunlari ham kengaytirilishi va qo'shimcha kod bilan moslashtirilishi mumkin. Quyida kengaytmasi ko'rsatilgan.card-columns biz foydalanadigan CSS-dan foydalangan holda sinfning kengaytmasi ko'rsatilgan - CSS ustunlari - ustunlar sonini o'zgartirish uchun javob beradigan darajalar to'plamini yaratish.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}