Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
Check
in English

Kata

O kata a Bootstrap e maua ai se atigipusa fetuutuunai ma faʻalauteleina ma le tele o fesuiaiga ma filifiliga.

I luga o lenei itulau

E uiga i

O le kata ose mea e mafai ona fetu'una'i ma fa'alautele. E aofia ai filifiliga mo ulutala ma vae, o le tele o anotusi eseese, lanu o talaaga, ma filifiliga faʻaalia mamana. Afai e te masani i le Bootstrap 3, o kata e sui ai a matou paneli tuai, vaieli, ma ata. O galuega fa'atusa i na vaega o lo'o avanoa e fai ma vasega fa'aopoopo mo kata.

Faataitaiga

O kata e fausia i ni fa'ailoga la'ititi ma sitaili e mafai, ae o lo'o mafai lava ona tu'uina atu le tele o le fa'atonuga ma le fa'atulagaina. Fausia i le flexbox, latou te ofoina faigofie le faʻaogaina ma faʻafefiloi lelei ma isi vaega Bootstrap. E leai ni margina latou mea fa'aletonu, o lea ia fa'aoga avanoa avanoa pe a mana'omia.

O loʻo i lalo se faʻataʻitaʻiga o se kata faʻavae ma mea faʻafefiloi ma se lautele tumau. O kata e leai se lautele tumau e amata ai, o lea e masani lava ona faʻatumuina le lautele atoa o lona elemene matua. O lenei mea e faigofie ona faʻapipiʻiina ma a tatou filifiliga sizing eseese .

Placeholder Image cap
Igoa pepa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Alu i se mea
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>

Ituaiga mataupu

E lagolagoina e kata le tele o anotusi, e aofia ai ata, tusitusiga, vaega o lisi, sootaga, ma isi mea. O lo'o i lalo fa'ata'ita'iga o mea o lo'o lagolagoina.

Tino

O le poloka fau o se kata o le .card-body. Fa'aoga i so'o se taimi e te mana'omia ai se vaega fa'atumu i totonu o se kata.

O nisi nei o tusitusiga i totonu o se tino kata.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Ulutala, tusitusiga, ma so'oga

Fa'aigoa pepa e fa'aoga e ala i le fa'aopoopo .card-titlei se <h*>fa'ailoga. I le auala lava e tasi, e faʻaopoopoina soʻotaga ma tuʻu i tafatafa o le tasi ma le isi e ala i le faʻaopoopoina .card-linki se <a>pine.

O ulutala e fa'aogaina e ala i le fa'aopoopoina o le a .card-subtitlei se <h*>fa'ailoga. Afai e tuu le .card-titlema .card-subtitlemea i totonu o se .card-bodymea, o le igoa kata ma le ulutala e fetaui lelei.

Igoa pepa
Fa'aulutala o Kata

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Feso'ota'iga kata Se isi so'oga
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>

Ata

.card-img-toptuu se ata i le pito i luga o le kata. Fa'atasi ai ma .card-textle , e mafai ona fa'aopoopoina tusitusiga i le kata. O tusitusiga i totonu .card-texte mafai fo'i ona fa'avasega ma fa'ailoga HTML masani.

Placeholder Image cap

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

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>

Lisi vaega

Fausia lisi o mea i totonu o se kata faʻatasi ai ma se kulupu lisi faʻafefe.

  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
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>
Fa'aalia
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
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>
  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
Fa'avae pepa
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>

Togo umukuka

Fa'afefiloi ma fa'afetaui ituaiga anotusi e fai ai le kata e te mana'omia, pe togi mea uma i totonu. O lo'o fa'aalia i lalo sitaili ata, poloka, sitaili o tusitusiga, ma se vaega lisi—ua afifi uma i se kata fa'amautu-lautele.

Placeholder Image cap
Igoa pepa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

  • Se mea
  • O se mea lona lua
  • O se mea lona tolu
Feso'ota'iga kata Se isi so'oga
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>

Fa'aopoopo se ulutala ma/po'o se vae i totonu o se kata.

Fa'aalia
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
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>

E mafai ona fa'apipi'i fa'auluulu pepa e fa'aopoopo .card-headeri <h*>elemene.

Fa'aalia
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
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>
Upusii

O se upusii ta'uta'ua, o lo'o i totonu o se elemene poloka upusii.

O se tasi lauiloa i le Source Title
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>
Fa'aalia
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
2 aso talu ai
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>

Tele

E manatu kata e leai se mea patino widthe amata ai, o lea e 100% le lautele se'i vagana ua ta'ua. E mafai ona e suia lenei mea pe a manaʻomia ile CSS masani, vasega faʻasologa, faʻafefiloi Sass faʻafefiloi, poʻo mea aoga.

Fa'aaogā fa'ailoga fa'asologa

Fa'aaoga le fa'asologa, afifi kata i koluma ma laina pe a mana'omia.

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
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>

Faʻaaogaina mea faʻaoga

Fa'aoga la matou lima o mea fa'aoga tetele e maua e seti vave ai le lautele o se kata.

Igoa pepa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

faamau
Igoa pepa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

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

Fa'aaogaina o le CSS masani

Fa'aoga le CSS fa'aleaganu'u i lau sitaili po'o sitaili i totonu e seti ai le lautele.

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
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>

Fa'atonuga o tusitusiga

E mafai ona e vave suia le fa'aogaina o tusitusiga o so'o se kata—i lona atoaga po'o vaega fa'apitoa-ma a matou vasega fa'aoga tusitusiga .

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
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>

Fa'aopoopo nisi fa'asagaga i le fa'auluuluga o le kata (po'o le poloka) fa'atasi ai ma vaega fa'asaga a Bootstrap .

Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
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>
Togafitiga fa'apitoa

Faatasi ai ma tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i totonu o mea faʻaopoopo.

Alu i se mea
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>

Ata

O kata e aofia ai nai filifiliga mo le galue i ata. Filifili mai le fa'apipi'iina o “tapaiga o ata” i itu uma e lua o se kata, ufiufi ata i totonu o le kata, pe na o le fa'apipi'i o le ata i totonu o se kata.

O pulou ata

E tutusa ma ulutala ma vae, o kata e mafai ona aofia ai luga ma lalo “puupuu ata”—ata i luga po o lalo o se kata.

Placeholder Image cap
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

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>

Fa'apipi'i ata

Su'e se ata i tua o le kata ma fa'alava le tusitusiga a lau kata. Fa'alagolago i le ata, atonu e te mana'omia pe e te le mana'omia ni sitaili fa'aopoopo po'o mea fa'aoga.

Placeholder Card image
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

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>
Manatua e le tatau ona lapopoa le anotusi nai lo le maualuga o le ata. Afai o mea e sili atu nai lo le ata o le a fa'aalia le anotusi i fafo o le ata.

Fa'asagaga

I le fa'aogaina o le fa'aogaina o fa'asologa ma vasega aoga, e mafai ona fa'alava kata i se auala feavea'i-faauo ma tali atu. I le fa'ata'ita'iga o lo'o i lalo, matou te 'ave'esea fa'amau fa'atasi .g-0ma fa'aoga .col-md-*vasega e fa'ata'atia ai le kata i le mea e mdmotu ai. Atonu e mana'omia nisi fetuutuuna'iga e fa'atatau i mea o lo'o i totonu o lau kata.

Placeholder Image
Igoa pepa

Ole kata lautele lea ma fa'amatalaga lagolago o lo'o i lalo e fai ma ta'ita'i fa'anatura i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

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>

Sitaili pepa

O kata e aofia ai filifiliga eseese mo le faʻavasegaina o latou talaaga, tuaoi, ma lanu.

Tala'aga ma lanu

Fa'aopoopo i le v5.2.0

Seti se background-colorfa'atusatusaga i luma colorma o tatou .text-bg-{color}fesoasoani . I le taimi muamua sa manaʻomia le faʻapipiʻiina ma le lima o lau filifiliga .text-{color}ma .bg-{color}mea aoga mo le faʻavasegaina, lea e mafai lava ona e faʻaogaina pe a e manaʻo ai.

Ulutala
Igoa pepa muamua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lona lua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Success card title

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa mata'utia

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lapatai

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa fa'amatalaga

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa kata mama

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa pogisa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

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>
Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina i le lanu e manino mai le anotusi lava ia (fa'ata'ita'iga o tusitusiga va'aia), pe fa'aofi mai i isi auala, e pei o tusitusiga fa'aopoopo natia i le .visually-hiddenvasega.

tuaoi

Fa'aoga mea fa'aoga tuaoi e sui ai na'o le border-colorkata. Manatua e mafai ona e tuʻuina .text-{color}vasega i luga o matua .cardpoʻo se vaega o mea o loʻo i totonu o le kata e pei ona faʻaalia i lalo.

Ulutala
Igoa pepa muamua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lona lua

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Success card title

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa mata'utia

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa lapatai

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa fa'amatalaga

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa kata mama

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

Ulutala
Igoa pepa pogisa

O nisi fa'ata'ita'iga vave o tusitusiga e fau i luga o le igoa kata ma fa'atupuina le tele o mea o lo'o i totonu o le kata.

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 utilities

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

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>

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Placeholder Image cap
Card title

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.

Last updated 3 mins ago

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>

When using card groups with footers, their content will automatically line up.

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Placeholder Image cap
Card title

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.

Last updated 3 mins ago
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>

Grid cards

Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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>

Change it to .row-cols-3 and you’ll see the fourth card wrap.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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>

When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a short card.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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>

Just like with card groups, card footers will automatically line up.

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Placeholder Image cap
Card title

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.

Last updated 3 mins ago
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

In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.

CSS

Variables

Added in v5.2.0

I le avea ai o se vaega o le faʻaogaina o suiga CSS a Bootstrap, ua faʻaogaina nei e kata le faʻaogaina o le CSS faʻapitonuʻu .cardmo le faʻaleleia atili o taimi masani. O tau mo le CSS fesuiaiga e faʻatulagaina e ala i le Sass, o lea o loʻo lagolagoina pea le Sass customization.

  --#{$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 fesuiaiga

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