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.
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.
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-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.
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
A langsar hle
Cras justo odio a ni
Dapibus ac facilisis ah hian a awm a
Vestibulum chu eros-ah a awm
Cras justo odio a ni
Dapibus ac facilisis ah hian a awm a
Vestibulum chu eros-ah a awm
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.
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.
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
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.
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
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.
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 style hrang hrang
Card-ah hian an background, border leh color siam dan tur option hrang hrang a awm a.
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.
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.
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.
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
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.
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
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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.