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 .
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.
<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.
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>- 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
<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.
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
<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>Header leh footer te a awm bawk
Card chhungah optional header leh/ emaw footer te dah belh bawk ang che.
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>Quote hriat hlawh tak, blockquote element chhunga awm.
<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>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">
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 rawhTitle 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.
KawrkilhCard 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 rawhTitle bik enkawl dan tur
A hnuaia supporting text nen hian natural lead-in to additional content angin.
Khawi emaw laiah kal rawhTitle 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>Navigation tih a ni
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">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">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.
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
<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.
<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>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.
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="..." 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 .
Primary card hming ziah a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Secondary card hming tur a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Hlawhtlinna card hming
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Hlauhawm card hming a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Warning card hming chu a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Info card hming ziah a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Light card hming a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
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
Primary card hming ziah a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Secondary card hming tur a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Hlawhtlinna card hming
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Hlauhawm card hming a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Warning card hming chu a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Info card hming ziah a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
Light card hming a ni
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
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.
Hlawhtlinna card hming
Card title-a siam tur leh card-a thu awm tam zawk siam turin quick example text thenkhat.
<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
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
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
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.
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.
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.
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.
<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.
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
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
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.
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.
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.
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.
<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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Card hming chu a ni
Hei hi card tawi tak a ni.
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.
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
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.
Quote hriat hlawh tak, blockquote element chhunga awm.
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
Quote hriat hlawh tak, blockquote element chhunga awm.
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
Quote hriat hlawh tak, blockquote element chhunga awm.
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>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>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;
}
}