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 .

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

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.

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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Tèt ak pye

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

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>

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="#">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="#">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.

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

<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</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.

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 class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

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.

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

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

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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

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

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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

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

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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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.

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

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

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

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

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

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

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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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;
  }
}

Kat

Konsènan

Egzanp

Tit kat la

Kalite kontni

Kò

Tit, tèks, ak lyen

Tit kat la

Soutit kat

Imaj

Lis gwoup yo

Lavabo kwizin

Tit kat la

Tèt ak pye

Tretman espesyal tit

En

Tretman espesyal tit

Tretman espesyal tit

Dimansyon

Sèvi ak kadriyaj maketing

Tretman espesyal tit

Tretman espesyal tit

Sèvi ak sèvis piblik

Tit kat la

Tit kat la

Sèvi ak CSS koutim

Tretman espesyal tit

Tèks aliyman

Tretman espesyal tit

Tretman espesyal tit

Tretman espesyal tit

Navigasyon

Tretman espesyal tit

Tretman espesyal tit

Imaj

Kapichon imaj

Tit kat la

Tit kat la

Superpositions imaj

Tit kat la

Estil kat

Jan nou koumanse ak koulè

Tit kat prensipal la

Tit kat segondè

Tit kat siksè

Tit kat danje

Tit kat avètisman

Tit kat enfòmasyon

Tit kat limyè

Tit kat nwa

Transmèt siyifikasyon nan teknoloji asistans

Fwontyè

Tit kat prensipal la

Tit kat segondè

Tit kat siksè

Tit kat danje

Tit kat avètisman

Tit kat enfòmasyon

Tit kat limyè

Tit kat nwa

Mixins sèvis piblik yo

Tit kat siksè

Layout kat

Gwoup kat

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Pont kat

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Kolòn kat yo

Tit kat ki vlope nan yon nouvo liy

Tit kat la