Source

Kata

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

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 .

100%x180
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 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

Ipu ata [100%x180]

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.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Lisi vaega

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum ma eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Fa'aalia
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum ma eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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.

Ipu ata [100%x180]
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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum ma eros
Feso'ota'iga kata Se isi so'oga 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

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

O se tasi lauiloa i le Source Title 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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 
<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 
<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 
<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 
<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 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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.

100%x180
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

100%x180 
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

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.

100%x270
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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Sitaili pepa

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

Tala'aga ma lanu

Fa'aaogā fa'amatalaga ma fa'aoga pito i tua e sui ai foliga o se kata.

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.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
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 .sr-onlyvasega.

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.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mea fa'aoga Mixins

E mafai foi ona e suia tuaoi i luga o le ulutala kata ma le vae pe a manaʻomia, ma e oʻo lava i le aveeseina o background-colorlatou .bg-transparent.

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.

Fa'avae 
<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>

Fa'atulagaina o kata

I le fa'aopoopoina o le fa'avasegaina o mea i totonu o kata, o Bootstrap e aofia ai ni nai filifiliga mo le tu'uina atu o fa'asologa o kata. Mo le taimi nei, o nei faʻatulagaina filifiliga e leʻi tali mai .

Vaega kata

Fa'aoga kulupu kata e fa'aliliu ai kata o se elemene fa'apipi'i tasi e tutusa le lautele ma le maualuga koluma. E fa'aaoga e kulupu kata display: flex;e ausia a latou toniga tetele.

100%x180
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

100%x180
Igoa pepa

O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Fa'afouga mulimuli 3 minute talu ai

100%x180
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 kata e sili atu le umi o mea i lo le mea muamua e faʻaalia ai le gaioiga tutusa maualuga.

Fa'afouga mulimuli 3 minute talu ai

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Pe a fa'aogaina vaega kata ma vae, e otometi lava ona laina i luga a latou mea.

100%x180
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
100%x180
Igoa pepa

O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Fa'afouga mulimuli 3 minute talu ai
100%x180
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 kata e sili atu le umi o mea i lo le mea muamua e faʻaalia ai le gaioiga tutusa maualuga.

Fa'afouga mulimuli 3 minute talu ai 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Fa'ailoga pepa

Manaomia se seti o pepa tutusa lautele ma maualuga e le o pipii le tasi i le isi? Fa'aaoga pepa fa'ato'aga.

100%x200
Igoa pepa

O se kata umi lea ma ni tusitusiga lagolago o lo'o i lalo e avea o se ta'ita'i masani i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

Fa'afouga mulimuli 3 minute talu ai

100%x200
Igoa pepa

O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Fa'afouga mulimuli 3 minute talu ai

100%x200
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 kata e sili atu le umi o mea i lo le mea muamua e faʻaalia ai le gaioiga tutusa maualuga.

Fa'afouga mulimuli 3 minute talu ai

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

E pei lava o kulupu kata, e otometi lava ona laina laina vae o kata i fa'avae.

100%x180
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
100%x180
Igoa pepa

O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Fa'afouga mulimuli 3 minute talu ai
100%x180
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 kata e sili atu le umi o mea i lo le mea muamua e faʻaalia ai le gaioiga tutusa maualuga.

Fa'afouga mulimuli 3 minute talu ai 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Koluma kata

E mafai ona fa'atulagaina kata i koluma e pei o Masonry ma na'o le CSS e ala i le afifiina i totonu .card-columns. O kata e fausia i CSS columnmeatotino nai lo le flexbox mo le faʻaogaina faigofie. O kata e oka mai luga i lalo ma agavale i le taumatau.

Ulu i luga! E mafai ona eseese lau maila ma koluma kata. Ina ia puipuia kata e malepe i luga o koluma, e tatau ona tatou setiina i latou e le display: inline-blocko column-break-inside: avoidse tali pulufana.

100%x160
Igoa kata e afifi i se laina fou

O se kata umi lea ma ni tusitusiga lagolago o lo'o i lalo e avea o se ta'ita'i masani i mea fa'aopoopo. O lenei anotusi e fai si umi teisi.

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

O se tasi lauiloa i le Source Title
100%x160
Igoa pepa

O lenei kata o loʻo i ai ni tusitusiga lagolago o loʻo i lalo e avea o se taʻitaʻi masani i mea faʻaopoopo.

Fa'afouga mulimuli 3 minute talu ai

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

O se tasi lauiloa i le Source Title
Igoa pepa

O lenei kata e iai se ulutala masani ma se parakalafa puupuu o tusitusiga i lalo ifo.

Fa'afouga mulimuli 3 minute talu ai

100%x260

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

O se tasi lauiloa i le Source Title
Igoa pepa

O le isi lea kata e iai le ulutala ma tusitusiga lagolago i lalo. O lenei kata o loʻo i ai nisi mea faʻaopoopo e faʻapupulaina teisi maualuga i le aotelega.

Fa'afouga mulimuli 3 minute talu ai

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

E mafai fo'i ona fa'alautele ma fa'avasegaina koluma fa'atasi ma nisi code fa'aopoopo. O loʻo faʻaalia i lalo o se faʻaopoopoga o le .card-columnsvasega e faʻaaoga ai le CSS tutusa tatou te faʻaogaina-CSs koluma-e faʻatupuina se seti o vaega tali mo le suia o numera o koluma.

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