Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
in English

Kat

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

Nan paj sa a

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

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

  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
En
  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
Pyè kat
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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.

  • Yon atik
  • Yon dezyèm atik
  • Yon twazyèm atik
Lyen kat Yon lòt lyen
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Yon quote byen koni, ki genyen nan yon eleman blockquote.

Yon moun ki pi popilè nan Tit Sous
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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
html 
<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
html 
<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
html 
<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
html 
<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
html 
<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-end" 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
html 
<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" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Tretman espesyal tit

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

Ale yon kote
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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
html 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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 .g-0epi 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

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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è

Te ajoute nan v5.2.0

Mete yon background-colorak premye plan kontras colorak moun k ap ede nou.text-bg-{color} yo . Précédemment, li te oblije manyèlman pè chwa ou nan .text-{color}ak .bg-{color}sèvis piblik pou manier, ki ou toujou ka itilize si ou prefere.

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.

html 
<div class="card text-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-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-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-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-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-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 text-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-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 .visually-hiddenklas 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.

html 
<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">
    <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">
    <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
html 
<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 kòmanse anpile epi sèvi ak display: flex;yo vin tache ak dimansyon inifòm kòmanse nan smbreakpoint la.

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

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

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.

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Menm jan ak gwoup kat yo, pye kat 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
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Masonry

Nan v4nou te itilize yon teknik CSS-sèlman pou imite konpòtman kolòn masonry tankou, men teknik sa a te vini ak anpil efè segondè dezagreyab . Si ou vle gen kalite sa a layout nan v5, ou ka jis fè pou sèvi ak Plugin Masonry. Masonry pa enkli nan Bootstrap , men nou te fè yon egzanp demonstrasyon pou ede w kòmanse.

CSS

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch Bootstrap a k ap evolye varyab CSS, kounye a kat yo itilize varyab CSS lokal yo .cardpou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass varyab

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;