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 .

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.

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.

Yon atik
Yon dezyèm atik
Yon twazyèm atik

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

Yon atik
Yon dezyèm atik
Yon twazyèm atik

<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

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

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

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

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

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

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

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

<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

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

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

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

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

Sèvi ak koulè tèks ak sèvis piblik background pou chanje aparans nan 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-dark 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-dark 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-dark 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 .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.

<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

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

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

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

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.

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.

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.

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

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.

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.

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.

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

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.

Tit kat la

Sa a se yon kat kout.

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.

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

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="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 masonry -tankou kolòn, 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.

Sass

Varyab

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$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;

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

Orizontal

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

Kat kadriyaj

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Tit kat la

Tit kat la