Source

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.

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.

  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Vestibulum chu eros-ah a awm
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
A langsar hle
  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Vestibulum chu eros-ah a awm
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Vestibulum chu eros-ah a awm
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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-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>

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" 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-top" 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 .no-guttershmangin 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 no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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 thlak nan text leh background utilities hmang thin ang che .

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-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>
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 .sr-onlyclass 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 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 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 hian display: flex;an uniform sizing an neih theih nan an hmang thin.

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>

Card deck te pawh a awm bawk

A zau zawng leh a san zawng inang vek card set khat, pakhat leh pakhat inzawm lo i mamawh em? Card deck hmang rawh.

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.

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

Card group ang bawkin deck-a card footer te chu automatic in a line up 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-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 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">
  <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>

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

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

Card column hrang hrang a awm

Card te chu CSS chauh hmangin Masonry.card-columns ang chi column-ah dah theih a ni a, chu chu . Card te hi columnalignment awlsam zawk nan flexbox ai chuan CSS property hmanga siam a ni. Card hi chunglam atanga hnuai lam leh veilam atanga dinglam thlengin order a ni.

Lu a ti sang a! Card column hmanga i mileage chu a inang lo thei. Column hrang hranga card a chhe lo tur chuan bulletproof solution a la ni lo display: inline-blockangin kan set a ngai a ni.column-break-inside: avoid

Placeholder Image cap
Card title chu line thara wrap 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.

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

Source Title -a mi hmingthang tak
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

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer chu a ni.

Source Title -a mi hmingthang tak
Card hming chu a ni

He card hian a thupui pangngai leh a hnuaiah thuziak paragraph tawi tak a nei a.

Update hnuhnung ber chu 3 mins kalta khan a ni

Placeholder Card image

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

Source Title -a mi hmingthang tak
Card hming chu a ni

Hei hi card dang a ni a, a hnuaia title leh supporting text a awm bawk. He card hian a pumpuiah a sang deuh deuh theih nan content dang engemaw zat a nei bawk.

Update hnuhnung ber chu 3 mins kalta khan a ni

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>

Card column te pawh code dang engemaw zat hmangin tihzauh leh siam danglam theih a ni bawk. A hnuaia tarlan hi .card-columnskan hman thin CSS—CSS column— hmanga column awm zat thlak danglam theihna tur responsive tier set siam nan class extension a ni.

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