Awọn kaadi

Awọn kaadi Bootstrap n pese eiyan akoonu to rọ ati extensible pẹlu ọpọlọpọ awọn iyatọ ati awọn aṣayan.

Nipa

Kaadi jẹ eiyan akoonu to rọ ati extensible. O pẹlu awọn aṣayan fun awọn akọsori ati awọn ẹlẹsẹ, akoonu lọpọlọpọ, awọn awọ abẹlẹ ayika, ati awọn aṣayan ifihan agbara. Ti o ba faramọ pẹlu Bootstrap 3, awọn kaadi rọpo awọn panẹli atijọ wa, awọn kanga, ati eekanna atanpako. Išẹ ti o jọra si awọn paati yẹn wa bi awọn kilasi modifier fun awọn kaadi.

Apeere

Awọn kaadi ti wa ni itumọ ti pẹlu bi kekere siṣamisi ati awọn aza bi o ti ṣee, sugbon si tun ṣakoso awọn lati fi kan pupọ ti Iṣakoso ati isọdi. Ti a ṣe pẹlu flexbox, wọn funni ni titete irọrun ati dapọ daradara pẹlu awọn paati Bootstrap miiran. Wọn ko ni marginnipasẹ aiyipada, nitorina lo awọn ohun elo aye bi o ṣe nilo.

Ni isalẹ jẹ apẹẹrẹ ti kaadi ipilẹ pẹlu akoonu adalu ati iwọn ti o wa titi. Awọn kaadi ko ni iwọn ti o wa titi lati bẹrẹ, nitorinaa wọn yoo kun nipa ti ara ni kikun iwọn ti ẹya obi rẹ. Eyi jẹ adani ni irọrun pẹlu ọpọlọpọ awọn aṣayan iwọn wa .

Akọle kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Lọ ibikan

<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>

Awọn iru akoonu

Awọn kaadi ṣe atilẹyin fun ọpọlọpọ akoonu, pẹlu awọn aworan, ọrọ, awọn ẹgbẹ atokọ, awọn ọna asopọ, ati diẹ sii. Ni isalẹ wa ni awọn apẹẹrẹ ti ohun ti o ṣe atilẹyin.

Ara

Awọn ile Àkọsílẹ ti a kaadi ni awọn .card-body. Lo nigbakugba ti o nilo apakan fifẹ laarin kaadi kan.

Eleyi jẹ diẹ ninu awọn ọrọ laarin a kaadi ara.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Awọn akọle, ọrọ, ati awọn ọna asopọ

Awọn akọle kaadi jẹ lilo nipasẹ fifi kun .card-titlesi <h*>tag. Ni ọna kanna, awọn ọna asopọ ti wa ni afikun ati gbe si ara wọn nipa fifi aami .card-linksi <a>.

Awọn atunkọ jẹ lilo nipa fifi aami kan .card-subtitlekun <h*>. Ti o ba ti gbe .card-titleati awọn .card-subtitleohun kan sinu .card-bodyohun kan, akọle kaadi ati atunkọ ti wa ni ibamu daradara.

Akọle kaadi

Itumọ kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Ọna asopọ kaadi Miiran ọna asopọ

<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>

Awọn aworan

.card-img-topgbe aworan kan si oke kaadi naa. Pẹlu .card-text, ọrọ le ti wa ni afikun si kaadi. Ọrọ laarin .card-texttun le ṣe aṣa pẹlu awọn afi HTML boṣewa.

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

<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>

Akojọ awọn ẹgbẹ

Ṣẹda awọn atokọ ti akoonu ninu kaadi pẹlu ẹgbẹ atokọ ṣiṣan.

Ohun kan
Nkan keji
Ohun kẹta

<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>

Afihan

Ohun kan
Nkan keji
Ohun kẹta

<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>

Ohun kan
Nkan keji
Ohun kẹta

Ẹsẹ kaadi

<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>

Idana ifọwọ

Darapọ ki o baramu awọn oriṣi akoonu lọpọlọpọ lati ṣẹda kaadi ti o nilo, tabi jabọ ohun gbogbo sinu ibẹ. Ti o han ni isalẹ jẹ awọn ara aworan, awọn bulọọki, awọn ọna ọrọ, ati ẹgbẹ atokọ kan — gbogbo wọn ti a we sinu kaadi iwọn ti o wa titi.

Akọle kaadi

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Ohun kan
Nkan keji
Ohun kẹta

Ọna asopọ kaadi Miiran ọna asopọ

<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>

Akọsori ati ẹlẹsẹ

Ṣafikun akọsori yiyan ati/tabi ẹlẹsẹ laarin kaadi kan.

Afihan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

<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>

Awọn akọle kaadi le jẹ aṣa nipasẹ fifi kun .card-headersi <h*>awọn eroja.

Afihan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

<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>

Sọ

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

Ẹnikan olokiki ni Akọle Orisun

<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>

Afihan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

2 ọjọ seyin

<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>

Titobi

Awọn kaadi ro pe ko si ni pato widthlati bẹrẹ, nitorinaa wọn yoo jẹ 100% fife ayafi ti bibẹẹkọ ti sọ. O le yi eyi pada bi o ṣe nilo pẹlu aṣa CSS, awọn kilasi grid, grid Sass mixins, tabi awọn ohun elo.

Lilo aami akoj

Lilo akoj, fi ipari si awọn kaadi ni awọn ọwọn ati awọn ori ila bi o ṣe nilo.

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

<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>

Lilo awọn ohun elo

Lo ọwọ wa ti awọn ohun elo iwọn to wa lati ṣeto iwọn kaadi ni kiakia.

Akọle kaadi

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Bọtini

Akọle kaadi

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Bọtini

<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>

Lilo aṣa CSS

Lo CSS ti aṣa ninu awọn iwe ara rẹ tabi bi awọn ara laini lati ṣeto iwọn kan.

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

<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>

Titete ọrọ

O le yara yi titete ọrọ ti kaadi eyikeyi pada — ni odindi rẹ tabi awọn apakan kan pato — pẹlu awọn kilasi titọ ọrọ ọrọ wa .

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

<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>

Ṣafikun diẹ ninu lilọ kiri si akọsori kaadi (tabi bulọki) pẹlu awọn paati nav Bootstrap .

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

<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>

Pataki akọle itọju

Pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Lọ ibikan

<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>

Awọn aworan

Awọn kaadi pẹlu awọn aṣayan diẹ fun ṣiṣẹ pẹlu awọn aworan. Yan lati fikun “awọn fila aworan” ni boya opin kaadi kan, awọn aworan bò pẹlu akoonu kaadi, tabi nirọrun fifi aworan naa sinu kaadi kan.

Awọn bọtini aworan

Gegebi awọn akọle ati awọn ẹlẹsẹ, awọn kaadi le pẹlu oke ati isalẹ "awọn bọtini aworan" -awọn aworan ni oke tabi isalẹ ti kaadi kan.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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>

Awọn agbekọja aworan

Yi aworan pada si ipilẹ kaadi ki o bo ọrọ kaadi rẹ. Da lori aworan naa, o le tabi ko le nilo awọn aza tabi awọn ohun elo afikun.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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 akiyesi pe akoonu ko yẹ ki o tobi ju giga ti aworan naa. Ti akoonu ba tobi ju aworan naa akoonu yoo han ni ita aworan naa.

Petele

Lilo apapọ akoj ati awọn kilasi iwulo, awọn kaadi le ṣe petele ni ore-alagbeka ati ọna idahun. Ni apẹẹrẹ ni isalẹ, a yọ awọn gotters akoj pẹlu .no-guttersati lo .col-md-*awọn kilasi lati ṣe petele kaadi ni aaye fifọ md. Awọn atunṣe siwaju le nilo da lori akoonu kaadi rẹ.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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>

Kaadi aza

Awọn kaadi pẹlu awọn aṣayan oriṣiriṣi fun isọdi awọn ẹhin wọn, awọn aala, ati awọ.

Background ati awọ

Lo ọrọ ati awọn ohun elo abẹlẹ lati yi irisi kaadi pada.

Akọsori

Akọle kaadi akọkọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Atẹle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi aseyori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi ewu

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Ikilọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Alaye

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Ina kaadi akọle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Dark kaadi akọle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

<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>

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-onlykilasi naa.

Aala

Lo awọn ohun elo aala lati yi border-colorkaadi nikan pada. Ṣe akiyesi pe o le fi .text-{color}awọn kilasi sori obi .cardtabi ipin ti awọn akoonu kaadi bi o ti han ni isalẹ.

Akọsori

Akọle kaadi akọkọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Atẹle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi aseyori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi ewu

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Ikilọ

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Akọle kaadi Alaye

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Ina kaadi akọle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Akọsori

Dark kaadi akọle

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

<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 igbesi

O tun le yi awọn aala lori akọsori kaadi ati ẹlẹsẹ bi o ti nilo, ati paapaa yọ wọn kuro background-colorpẹlu .bg-transparent.

Akọsori

Akọle kaadi aseyori

Diẹ ninu awọn ọrọ apẹẹrẹ iyara lati kọ sori akọle kaadi ki o ṣe idapọ ti akoonu kaadi naa.

Ẹlẹsẹ

<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>

Ifilelẹ kaadi

Ni afikun si aṣa akoonu laarin awọn kaadi, Bootstrap pẹlu awọn aṣayan diẹ fun tito lẹsẹsẹ awọn kaadi. Fun akoko yii, awọn aṣayan ifilelẹ wọnyi ko ti ṣe idahun .

Awọn ẹgbẹ kaadi

Lo awọn ẹgbẹ kaadi fun a mu awọn kaadi bi a nikan, so ano pẹlu dogba iwọn ati ki o iga ọwọn. Awọn ẹgbẹ kaadi bẹrẹ ni tolera ati lo display: flex;lati di asopọ pẹlu awọn iwọn aṣọ ti o bẹrẹ ni aaye smfifọ.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Kaadi yii paapaa ni akoonu to gun ju ti akọkọ lọ lati ṣafihan iṣẹ giga dogba yẹn.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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>

Nigbati o ba nlo awọn ẹgbẹ kaadi pẹlu awọn ẹlẹsẹ, akoonu wọn yoo laini laifọwọyi.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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>

Awọn deki kaadi

Nilo kan ti ṣeto iwọn dogba ati awọn kaadi iga ti o ko ba wa ni so si ọkan miiran? Lo awọn deki kaadi.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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>

Gẹgẹ bi pẹlu awọn ẹgbẹ kaadi, awọn ẹlẹsẹ kaadi ni awọn deki yoo laini laifọwọyi.

Akọle kaadi

Eyi jẹ kaadi ti o gbooro pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Akọle kaadi

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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>

Awọn kaadi akoj

Lo eto akoj Bootstrap ati awọn .row-colskilasi rẹ lati ṣakoso iye awọn ọwọn akoj (ti a we ni ayika awọn kaadi rẹ) ti o fihan ni ọna kan. Fun apẹẹrẹ, nibi ti n .row-cols-1gbe awọn kaadi jade lori iwe kan, ati .row-cols-md-2pipin awọn kaadi mẹrin si iwọn dogba kọja awọn ori ila pupọ, lati ibi fifọ alabọde soke.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

<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>

Yipada si .row-cols-3ati pe iwọ yoo rii ipari kaadi kẹrin.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

<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>

Nigba ti o ba nilo dogba iga, fi .h-100si awọn kaadi. Ti o ba fẹ awọn giga dogba nipasẹ aiyipada, o le ṣeto $card-height: 100%ni Sass.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Akọle kaadi

Eleyi jẹ kukuru kan kaadi.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Akọle kaadi

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

<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>

Awọn ọwọn kaadi

Awọn kaadi le ti wa ni ṣeto sinu Masonry - like ọwọn pẹlu kan CSS nipa yiyi wọn sinu .card-columns. Awọn kaadi ti wa ni itumọ ti pẹlu CSS column-ini dipo ti flexbox fun rọrun titete. Awọn kaadi ti wa ni pase lati oke si isalẹ ati osi si otun.

Efeti sile! Ijinna rẹ pẹlu awọn ọwọn kaadi le yatọ. Lati yago fun awọn kaadi fifọ kọja awọn ọwọn, a gbọdọ ṣeto wọn si display: inline-blockbi column-break-inside: avoidkii ṣe ojutu ọta ibọn sibẹsibẹ.

Kaadi akọle ti o murasilẹ si titun kan ila

Eyi jẹ kaadi to gun pẹlu ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun. Àkóónú yìí ti pẹ́ díẹ̀.

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

Ẹnikan olokiki ni Akọle Orisun

Akọle kaadi

Kaadi yii ni ọrọ atilẹyin ni isalẹ bi itọsọna adayeba si akoonu afikun.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

Ẹnikan olokiki ni Akọle Orisun

Akọle kaadi

Kaadi yii ni akọle deede ati paragirafi kukuru ti ọrọ ni isalẹ rẹ.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

Ẹnikan olokiki ni Akọle Orisun

Akọle kaadi

Eyi jẹ kaadi miiran pẹlu akọle ati ọrọ atilẹyin ni isalẹ. Kaadi yii ni diẹ ninu akoonu afikun lati jẹ ki o ga ni apapọ.

Imudojuiwọn to kẹhin ni iṣẹju 3 sẹhin

<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>

Kaadi ọwọn le tun ti wa ni tesiwaju ati ki o adani pẹlu diẹ ninu awọn afikun koodu. Ti o han ni isalẹ jẹ itẹsiwaju ti .card-columnskilasi ni lilo CSS kanna ti a nlo — awọn ọwọn CSS — lati ṣe agbekalẹ akojọpọ awọn ipele idahun fun iyipada nọmba awọn ọwọn.

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

Awọn kaadi

Nipa

Apeere

Akọle kaadi

Awọn iru akoonu

Ara

Awọn akọle, ọrọ, ati awọn ọna asopọ

Akọle kaadi

Itumọ kaadi

Awọn aworan

Akojọ awọn ẹgbẹ

Idana ifọwọ

Akọle kaadi

Akọsori ati ẹlẹsẹ

Pataki akọle itọju

Afihan

Pataki akọle itọju

Pataki akọle itọju

Titobi

Lilo aami akoj

Pataki akọle itọju

Pataki akọle itọju

Lilo awọn ohun elo

Akọle kaadi

Akọle kaadi

Lilo aṣa CSS

Pataki akọle itọju

Titete ọrọ

Pataki akọle itọju

Pataki akọle itọju

Pataki akọle itọju

Lilọ kiri

Pataki akọle itọju

Pataki akọle itọju

Awọn aworan

Awọn bọtini aworan

Akọle kaadi

Akọle kaadi

Awọn agbekọja aworan

Akọle kaadi

Petele

Akọle kaadi

Kaadi aza

Background ati awọ

Akọle kaadi akọkọ

Akọle kaadi Atẹle

Akọle kaadi aseyori

Akọle kaadi ewu

Akọle kaadi Ikilọ

Akọle kaadi Alaye

Ina kaadi akọle

Dark kaadi akọle

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Aala

Akọle kaadi akọkọ

Akọle kaadi Atẹle

Akọle kaadi aseyori

Akọle kaadi ewu

Akọle kaadi Ikilọ

Akọle kaadi Alaye

Ina kaadi akọle

Dark kaadi akọle

Mixins igbesi

Akọle kaadi aseyori

Ifilelẹ kaadi

Awọn ẹgbẹ kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Awọn deki kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Akọle kaadi

Awọn kaadi akoj