Source

Kat

Kat Bootstrap yo bay yon veso kontni fleksib ak ekstansib ak plizyè variants ak opsyon.

Konsènan

Yon kat se yon veso kontni fleksib ak extensible. Li gen ladann opsyon pou tèt ak pye, yon gran varyete kontni, koulè background kontèks, ak opsyon ekspozisyon pwisan. Si w abitye ak Bootstrap 3, kat ranplase ansyen panno, pwi, ak ti miniature nou yo. Fonksyonalite ki sanble ak eleman sa yo disponib kòm klas modifikatè pou kat.

Egzanp

Kat yo bati ak ti mak ak estil ke posib, men yo toujou jere bay yon tòn kontwòl ak personnalisation. Bati ak flexbox, yo ofri aliyman fasil epi melanje byen ak lòt konpozan Bootstrap. Yo pa gen okenn marginpa default, kidonk sèvi ak sèvis piblik espas jan sa nesesè.

Anba a se yon egzanp yon kat debaz ki gen kontni melanje ak yon lajè fiks. Kat pa gen okenn lajè fiks yo kòmanse, kidonk yo pral natirèlman ranpli tout lajè nan eleman paran li yo. Sa a se fasil Customized ak opsyon divès kalite gwosè nou an .

Placeholder Image cap
Tit kat la

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Ale yon kote 
<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>

Kalite kontni

Kat sipòte yon gran varyete kontni, tankou imaj, tèks, gwoup lis, lyen, ak plis ankò. Anba a gen kèk egzanp sou sa ki sipòte.

Kò

Blòk konstriksyon yon kat se .card-body. Sèvi ak li chak fwa ou bezwen yon seksyon Matlasye nan yon kat.

Sa a se kèk tèks ki nan kò yon kat. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tit, tèks, ak lyen

Tit kat yo itilize lè yo ajoute .card-titlenan yon <h*>tag. Nan menm fason an, yo ajoute lyen epi yo mete youn akote lòt lè yo ajoute .card-linknan yon <a>tag.

Yo itilize sous-titres lè yo ajoute yon .card-subtitlenan <h*>tag. Si yo mete .card-titleak .card-subtitleatik yo nan yon .card-bodyatik, tit kat la ak sous-titre yo byen aliye.

Tit kat la
Soutit kat

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Lyen kat Yon lòt lyen 
<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>

Imaj

.card-img-topmete yon imaj sou tèt kat la. Avèk .card-text, ou ka ajoute tèks nan kat la. Tèks nan .card-textka tou style ak estanda HTML tags yo.

Placeholder Image cap

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

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

Lis gwoup yo

Kreye lis kontni nan yon kat ak yon gwoup lis flush.

  • Cras justo odio
  • Dapibus ak fasilite nan
  • Vestibulum nan eros
<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>
En
  • Cras justo odio
  • Dapibus ak fasilite nan
  • Vestibulum nan eros
<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>

Lavabo kwizin

Melanje ak matche ak plizyè kalite kontni pou kreye kat ou bezwen an, oswa jete tout bagay ladan l. Yo montre pi ba a estil imaj, blòk, estil tèks, ak yon gwoup lis—tout vlope nan yon kat lajè fiks.

Placeholder Image cap
Tit kat la

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

  • Cras justo odio
  • Dapibus ak fasilite nan
  • Vestibulum nan eros
Lyen kat Yon lòt lyen 
<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>

Ajoute yon header si ou vle ak/oswa pye nan yon kat.

En
Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote 
<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>

Tèt kat yo ka estile lè yo ajoute .card-headernan <h*>eleman.

En
Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote 
<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Yon moun ki pi popilè nan Tit Sous 
<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>
En
Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote
2 jou de sa 
<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>

Dimansyon

Kat yo sipoze pa espesifik widthpou yo kòmanse, kidonk yo pral 100% lajè sof si yo di otreman. Ou ka chanje sa a jan sa nesesè ak CSS koutim, klas grid, mixin grid Sass, oswa sèvis piblik.

Sèvi ak kadriyaj maketing

Sèvi ak kadriyaj la, vlope kat yo nan kolòn ak ranje jan sa nesesè.

Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote
Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote 
<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>

Sèvi ak sèvis piblik

Sèvi ak ti ponyen itilite nou yo disponib pou dimensionnement pou byen vit fikse lajè yon kat.

Tit kat la

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Bouton
Tit kat la

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

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

Sèvi ak CSS koutim

Sèvi ak CSS koutim nan fèy style ou oswa kòm estil aliye pou mete yon lajè.

Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote 
<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>

Tèks aliyman

Ou ka byen vit chanje aliyman tèks nenpòt kat-an antye oswa pati espesifik-ak klas aliyman tèks nou yo .

Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote
Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote
Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote 
<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>

Ajoute kèk navigasyon nan tèt yon kat (oswa blòk) ak eleman nav Bootstrap la .

Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote 
<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>
Tretman espesyal tit

Avèk tèks sipò ki anba a kòm yon antre natirèl nan kontni adisyonèl.

Ale yon kote 
<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>

Imaj

Kat gen ladan kèk opsyon pou travay ak imaj. Chwazi nan mete "kap imaj" nan chak fen nan yon kat, kouvri imaj ak kontni kat, oswa tou senpleman entegre imaj la nan yon kat.

Kapichon imaj

Menm jan ak tèt yo ak pye yo, kat yo ka gen ladan "kap imaj" anlè ak anba - imaj nan tèt oswa anba yon kat.

Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa

Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa

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>

Superpositions imaj

Vire yon imaj nan yon background kat epi kouvri tèks kat ou a. Tou depan de imaj la, ou ka oswa ou pa bezwen plis estil oswa sèvis piblik.

Placeholder Card image
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa

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

Remake byen ke kontni pa ta dwe pi gwo pase wotè imaj la. Si kontni an pi gwo pase imaj la kontni an ap parèt deyò imaj la.

Orizontal

Sèvi ak yon konbinezon de klas griy ak sèvis piblik, kat yo ka fè orizontal nan yon fason mobil zanmitay ak reponn. Nan egzanp ki anba a, nou retire goutyè gri yo ak .no-guttersepi itilize .col-md-*klas pou fè kat la orizontal nan pwen mdrupture a. Yo ka bezwen plis ajisteman selon kontni kat ou a.

Placeholder Image
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa

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

Estil kat

Kat yo genyen plizyè opsyon pou personnaliser orijin yo, fontyè yo, ak koulè.

Jan nou koumanse ak koulè

Sèvi ak tèks ak sèvis piblik background pou chanje aparans yon kat.

Header
Tit kat prensipal la

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat segondè

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat siksè

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat danje

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat avètisman

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat enfòmasyon

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat limyè

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat nwa

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

<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>
Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a ​​se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-onlyklas la.

Fwontyè

Sèvi ak sèvis piblik fwontyè pou chanje jis border-colornan yon kat. Remake byen ke ou ka mete .text-{color}klas sou paran an .cardoswa yon pati nan sa ki nan kat la jan yo montre anba a.

Header
Tit kat prensipal la

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat segondè

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat siksè

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat danje

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat avètisman

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat enfòmasyon

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat limyè

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

Header
Tit kat nwa

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

<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 sèvis piblik yo

Ou kapab tou chanje fwontyè yo sou antèt kat la ak pye a jan sa nesesè, e menm retire yo background-colorak .bg-transparent.

Header
Tit kat siksè

Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.

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

Layout kat

Anplis stil kontni ki nan kat yo, Bootstrap gen ladan kèk opsyon pou mete seri kat yo. Pou le moman, opsyon layout sa yo poko reponn .

Gwoup kat

Sèvi ak gwoup kat pou rann kat kòm yon sèl, eleman tache ak kolòn egal lajè ak wotè. Gwoup kat yo itilize display: flex;pou reyalize gwosè inifòm yo.

Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa

Placeholder Image cap
Tit kat la

Kat sa a gen tèks sipò pi ba a kòm yon antre natirèl nan kontni adisyonèl.

Dènye mete ajou 3 minit de sa

Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kat sa a gen menm kontni pi long pase premye a ki montre ke aksyon wotè egal.

Dènye mete ajou 3 minit de sa

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

Lè w ap itilize gwoup kat ak pye, kontni yo pral otomatikman aliye.

Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa
Placeholder Image cap
Tit kat la

Kat sa a gen tèks sipò pi ba a kòm yon antre natirèl nan kontni adisyonèl.

Dènye mete ajou 3 minit de sa
Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kat sa a gen menm kontni pi long pase premye a ki montre ke aksyon wotè egal.

Dènye mete ajou 3 minit de sa 
<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>

Pont kat

Ou bezwen yon seri kat egal lajè ak wotè ki pa tache youn ak lòt? Sèvi ak pil kat.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa

Placeholder Image cap
Tit kat la

Kat sa a gen tèks sipò pi ba a kòm yon antre natirèl nan kontni adisyonèl.

Dènye mete ajou 3 minit de sa

Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kat sa a gen menm kontni pi long pase premye a ki montre ke aksyon wotè egal.

Dènye mete ajou 3 minit de sa

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

Menm jan ak gwoup kat, pye kat nan pil yo pral otomatikman liy.

Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Dènye mete ajou 3 minit de sa
Placeholder Image cap
Tit kat la

Kat sa a gen tèks sipò pi ba a kòm yon antre natirèl nan kontni adisyonèl.

Dènye mete ajou 3 minit de sa
Placeholder Image cap
Tit kat la

Sa a se yon kat pi laj ak sipò tèks anba a kòm yon plon natirèl nan kontni adisyonèl. Kat sa a gen menm kontni pi long pase premye a ki montre ke aksyon wotè egal.

Dènye mete ajou 3 minit de sa 
<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>

Kat kadriyaj

Sèvi ak sistèm kadriyaj Bootstrap la ak .row-colsklas li yo pou kontwole konbyen kolòn kadriyaj (vlope kat ou yo) ou montre pou chak ranje. Pou egzanp, isit la ap .row-cols-1mete kat yo sou yon sèl kolòn, epi .row-cols-md-2divize kat kat nan lajè egal sou plizyè ranje, soti nan pwen an mwayen pou leve.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

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

Chanje li .row-cols-3epi w ap wè katriyèm vlope kat la.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

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

Lè ou bezwen wotè egal, ajoute .h-100nan kat yo. Si ou vle wotè egal pa default, ou ka mete $card-height: 100%nan Sass.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Placeholder Image cap
Tit kat la

Sa a se yon kat kout.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl.

Placeholder Image cap
Tit kat la

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

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

Kolòn kat yo

Kat yo ka òganize an kolòn tankou Masonry ak jis CSS lè yo vlope yo nan .card-columns. Kat yo bati ak columnpwopriyete CSS olye pou yo flexbox pou aliyman pi fasil. Kat yo kòmande depi anwo jouk anba epi kite a dwat.

Tèt leve! Kilométrage ou ak kolòn kat yo ka varye. Pou anpeche kat yo kraze atravè kolòn, nou dwe mete yo display: inline-blockkòm column-break-inside: avoidse pa yon solisyon bal ankò.

Placeholder Image cap
Tit kat ki vlope nan yon nouvo liy

Sa a se yon kat ki pi long ak tèks sipò anba a kòm yon plon natirèl nan kontni adisyonèl. Kontni sa a se yon ti kras pi long.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Yon moun ki pi popilè nan Tit Sous
Placeholder Image cap
Tit kat la

Kat sa a gen tèks sipò pi ba a kòm yon antre natirèl nan kontni adisyonèl.

Dènye mete ajou 3 minit de sa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer poze erat.

Yon moun ki pi popilè nan Tit Sous
Tit kat la

Kat sa a gen yon tit regilye ak yon ti paragraf tèks anba li.

Dènye mete ajou 3 minit de sa

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Yon moun ki pi popilè nan Tit Sous
Tit kat la

Sa a se yon lòt kat ki gen tit ak tèks sipò anba a. Kat sa a gen kèk kontni adisyonèl pou fè li yon ti kras pi wo an jeneral.

Dènye mete ajou 3 minit de sa

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

Kolòn kat yo kapab tou pwolonje ak Customized ak kèk kòd adisyonèl. Yo montre pi ba a yon ekstansyon .card-columnsklas la ki sèvi ak menm CSS nou itilize a—kolòn CSS—pou jenere yon seri nivo ki reponn pou chanje kantite kolòn yo.

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