Main content ah kal rawh Docs navigation ah kal rawh
in English

Card te pawh a awm

Bootstrap card te hian content container flexible leh extensible a pe a, variant leh option hrang hrang a awm bawk.

He page ah hian

Lam

Card chu content container a inthlak danglam thei a, a zau thei bawk. Header leh footer hrang hrang thlan theihna te, content hrang hrang te, contextual background color te, display option chak tak tak te a awm bawk. Bootstrap 3 i hriat chian chuan card hian kan panel hlui, well, leh thumbnail te a thlak a ni. Chutiang component-te ang bawka functionality chu card-te tana modifier class angin a awm bawk.

Entirna

Card hi markup leh style tlem thei ang bera siam a ni a, mahse control leh customization ton khat zet a pe chhuak thei tho. Flexbox hmanga siam niin, alignment awlsam tak an pe a, Bootstrap component dangte nen pawh an inhmeh tha hle. marginDefault-in an nei lo va , chuvangin a tul angin spacing utilities hmang rawh.

A hnuaia mi hi mixed content leh fixed width nei basic card entir nan kan rawn tarlang e. Card hian a bul tanna tur fixed width an nei lo va, chuvangin a parent element zau zawng zawng chu natural takin an rawn luah khat ang. Hei hi awlsam takin kan sizing option hrang hrang hmangin kan customize thei .

Placeholder Image cap
Card hming chu a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Khawi emaw laiah kal rawh 
<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>

Content chi hrang hrang

Card hian thu chi hrang hrang a support a, chung zingah chuan thlalak, thuziak, list group, link leh thil dang tam tak a tel a ni. A hnuaia tarlan te hi a support te entir nan a ni.

Taksa

Card pakhata building block chu a .card-body. Card chhunga padded section i mamawh apiangin hmang thin ang che.

Hei hi card body chhunga thuziak thenkhat a ni. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Title, text leh link te pawh a awm bawk

Card title hi tag .card-titlepakhata dah belhin hman a ni. <h*>Chutiang bawkin link te chu tag .card-linkpakhata dahin an dah belh a, an kiangah dah a ni bawk.<a>

Subtitle hi tag .card-subtitleah a dahin a hmang thin . <h*>Item pakhata the .card-titleleh .card-subtitlethil dah a nih .card-bodychuan card title leh subtitle chu a inmil tha hle.

Card hming chu a ni
Card subtitle a awm bawk

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Card link Link dang pakhat 
<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>

Hmanlai thil hlui te

.card-img-topcard chung lamah image a dah a. , hmang .card-texthian card-ah hian text a dah thei bawk. Text chhunga thuziak .card-textpawh standard HTML tag hmangin style theih a ni bawk.

Placeholder Image cap

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

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

Group hrang hrangte list rawh

Flush list group hmangin card pakhata content list siam rawh.

  • An item pakhat
  • Item pahnihna a ni
  • Item pathumna a ni
<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>
A langsar hle
  • An item pakhat
  • Item pahnihna a ni
  • Item pathumna a ni
<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>
  • An item pakhat
  • Item pahnihna a ni
  • Item pathumna a ni
Card hnuai lam a ni 
<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>

Kitchen sink a awm bawk

I mamawh card siam turin content type hrang hrang mix leh match la, a nih loh leh chutah chuan engkim paih vek rawh. A hnuaia tarlan te hi image style te, block te, text style te, leh list group te—chu zawng zawng chu fixed-width card-a khuh vek a ni.

Placeholder Image cap
Card hming chu a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

  • An item pakhat
  • Item pahnihna a ni
  • Item pathumna a ni
Card link Link dang pakhat 
<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>

Card chhungah optional header leh/ emaw footer te dah belh bawk ang che.

A langsar hle
Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh 
<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>

.card-headerCard header te hi <h*>elements te dah belhin style theih a ni .

A langsar hle
Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh 
<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>
Thusawi

Quote hriat hlawh tak, blockquote element chhunga awm.

Source Title -a mi hmingthang tak 
<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>
A langsar hle
Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh
Ni 2 kalta khan 
<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>

Sizing a ni

Card widthhian start tur bik a nei lo tih an ngaihtuah a, chuvangin a danglamna a awm loh chuan 100% wide an ni ang. Hei hi a tul angin custom CSS, grid class, grid Sass mixins, emaw utilities hmangin i thlak thei bawk.

Grid markup hmangin

Grid hmangin card te chu a tul angin column leh row-ah wrap la.

Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh
Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh 
<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>

Utilities hmanga thil tih a ni

Card pakhat zau zawng rang taka set turin kan sizing utility awmsa tlemte hmang rawh .

Card hming chu a ni

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Kawrkilh
Card hming chu a ni

A hnuaia supporting text nen hian natural lead-in to additional content angin.

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

Custom CSS hmangin

I stylesheet-ah emaw, inline style angin emaw custom CSS hmang la, width set rawh.

Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh 
<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>

Text alignment tih a ni

Card eng pawha text alignment chu rang takin i thlak thei a—a pum pui emaw, a hmun bik emaw—kan text align class-te hmang hian .

Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh
Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh
Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh 
<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-end" 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>

Card header (or block)-ah Bootstrap-a nav components hmangin navigation engemaw zat dah belh rawh .

Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh 
<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" aria-current="true" 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" href="#" tabindex="-1" aria-disabled="true">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>
Title bik enkawl dan tur

A hnuaia supporting text nen hian natural lead-in to additional content angin.

Khawi emaw laiah kal rawh 
<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" href="#" tabindex="-1" aria-disabled="true">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>

Hmanlai thil hlui te

Card-ah hian thlalak nena hnathawh theihna tur option tlemte a awm a. Card tawp ber pahniha “image caps” dah te, card thu awmte nena thlalak khuh te, a nih loh leh card chhunga thlalak dah mai te atang hian thlang rawh.

Hmanlai thil hlui caps

Header leh footer ang bawkin, card-ah chuan a chung leh a hnuai “image cap”—card chung lam emaw, hnuai emawa awmte—a awm thei a.

Placeholder Image cap
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni

Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni

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>

Hmanlai thil hlui overlay te

Image pakhat chu card background-ah chantir la, i card text chu overlay rawh. Image a zirin style emaw utility emaw dang i mamawh thei a, i mamawh lo thei bawk.

Placeholder Card image
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni

<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>
Content chu image san zawng aia lian tur a ni lo tih hre reng ang che. Content chu image aia lian a nih chuan content chu image pawnah a lang ang.

Khamphei

Grid leh utility class inzawmkhawm hmangin card chu mobile-friendly leh responsive takin horizontal siam theih a ni. A hnuaia entirnan hian grid gutters te chu kan paih chhuak a, class .g-0hmangin breakpoint .col-md-*-ah card chu horizontal-ah kan siam a . mdI card-a thu awm dan azirin siamrem belh a ngai mai thei.

Placeholder Image
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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>

Card style hrang hrang

Card-ah hian an background, border leh color siam dan tur option hrang hrang a awm a.

Background leh rawng hrang hrang

Card hmel danglam tur chuan text color leh background utilities hmang la .

Header a ni
Primary card hming ziah a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Secondary card hming tur a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Hlawhtlinna card hming

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Hlauhawm card hming a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Warning card hming chu a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Info card hming ziah a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Light card hming a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Dark card hming a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

<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-dark 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-dark 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 text-dark 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>
Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hiddenclass nena thup belh thuziak ang chi a ni.

Ramri

Card pakhat chauh thlak turin border utilities hmang rawh . A hnuaia tarlan ang hian parent emaw card chhunga thu awmte subset emaw -ah class border-colori dah thei tih hre reng ang che ..text-{color}.card

Header a ni
Primary card hming ziah a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Secondary card hming tur a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Hlawhtlinna card hming

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Hlauhawm card hming a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Warning card hming chu a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Info card hming ziah a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Light card hming a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

Header a ni
Dark card hming a ni

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

<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">
    <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">
    <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 hmanraw tangkai tak tak te

Card header leh footer-a border te pawh a tul angin i thlak thei a, an background-colorwith pawh i paih thei .bg-transparentbawk.

Header a ni
Hlawhtlinna card hming

Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.

A hnuai lam 
<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>

Card siam dan tur

Card chhunga content styling bakah hian Bootstrap hian card series laying out theihna tur option tlemte a keng tel bawk. Tunah chuan heng layout option te hi a la responsive lo .

Card group hrang hrang te

Card group hmangin card chu element pakhat, attached element angin a zau zawng leh a san zawng inang vek column angin render rawh. Card group te chu stacked atanga tan an ni a, breakpoint display: flex;atanga tan in uniform dimensions nen attached an nih theih nan an hmang thin.sm

Placeholder Image cap
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni

Placeholder Image cap
Card hming chu a ni

He card hian a hnuaia supporting text a nei a, chu chu natural lead-in to additional content atan a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni

Placeholder Image cap
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He card hian a hmasa aiin content rei zawk pawh a nei a, chu chuan equal height action chu a lantir thei a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni

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

Footer nei card group i hman hian an content chu a line up nghal vek ang.

Placeholder Image cap
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni
Placeholder Image cap
Card hming chu a ni

He card hian a hnuaia supporting text a nei a, chu chu natural lead-in to additional content atan a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni
Placeholder Image cap
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He card hian a hmasa aiin content rei zawk pawh a nei a, chu chuan equal height action chu a lantir thei a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni 
<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>

Grid card te pawh a awm

Bootstrap grid system leh a .row-colsclass te hmangin row khatah grid column (i card vel a wrapped) engzat nge i lantir tih control rawh. Entirnan, hetah hian .row-cols-1column pakhatah card te chu laying out a, card .row-cols-md-2pali chu row tam takah a zau zawng inang vek turin kan then a, medium breakpoint atanga chunglam a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

A thlak la, .row-cols-3card wrap palina chu i hmu ang.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Height inang i mamawh hunah .h-100card-ah te dah belh rawh. Default-a height inang i duh chuan $card-height: 100%Sass ah i set thei ang.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card tawi tak a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni.

Placeholder Image cap
Card hming chu a ni

Hei hi card sei zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Card group ang bawkin card footer pawh a line up nghal vek ang.

Placeholder Image cap
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He content hi a sei deuh deuh a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni
Placeholder Image cap
Card hming chu a ni

He card hian a hnuaia supporting text a nei a, chu chu natural lead-in to additional content atan a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni
Placeholder Image cap
Card hming chu a ni

Hei hi card zau zawk a ni a, a hnuaia supporting text awm chu natural lead-in to additional content atan a ni. He card hian a hmasa aiin content rei zawk pawh a nei a, chu chuan equal height action chu a lantir thei a ni.

Update hnuhnung ber chu 3 mins kalta khan a ni 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Masonry hmanga siam a ni

In Masonryv4 -like column-te thiltih dan entawn nan CSS-only technique kan hmang a , mahse he technique hian side effect duhawm lo tam tak a keng tel a ni Hetiang layout hi , ah neih i duh chuan Masonry plugin hi i hmang mai thei. Masonry hi Bootstrap ah hian a tel lo a , mahse i tan theih nan demo entirnan kan siam a ni.v5

Sass a ni

Variables te pawh a awm

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;