Source

Likarete

Likarete tsa Bootstrap li fana ka setshelo sa litaba se feto-fetohang le se atolositsoeng se nang le mefuta e mengata le likhetho.

About

Karete ke sets'oants'o se tenyetsehang le se ka atolosoang. E kenyelletsa likhetho bakeng sa lihlooho le botlaaseng, mefuta e mengata e fapaneng ea litaba, mebala ea bokamorao, le likhetho tse matla tsa ponts'o. Haeba u tloaelane le Bootstrap 3, likarete li nka sebaka sa liphanele tsa rona tsa khale, liliba le li-thumbnails. Ts'ebetso e ts'oanang le likarolo tseo e fumaneha joalo ka litlelase tsa ho fetola likarete.

Mohlala

Likarete li hahiloe ka li-markup le setaele tse nyane kamoo ho ka khonehang, empa li ntse li khona ho fana ka taolo e ngata le ho e etsa. E hahiloe ka flexbox, e fana ka tlhophiso e bonolo 'me e tsoakane hantle le likarolo tse ling tsa Bootstrap. Ha ba na marginka ho sa feleng, kahoo sebelisa lisebelisoa tsa sebaka ha ho hlokahala.

Ka tlase ke mohlala oa karete ea motheo e nang le dikahare tse tsoakiloeng le bophara bo tsitsitseng. Likarete ha li na bophara bo tsitsitseng ba ho qala, kahoo ka tlhaho li tla tlatsa bophara bo felletseng ba karolo ea motsoali. Sena se etsoa habonolo ka likhetho tsa rona tse fapaneng tsa boholo .

Placeholder Image cap
Sehlooho sa karete

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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

Mefuta ea litaba

Likarete li tšehetsa mefuta e mengata ea litaba, ho kenyeletsoa litšoantšo, mongolo, lihlopha tsa lenane, lihokelo, le tse ling. Ka tlase ke mehlala ea tse tšehelitsoeng.

'Mele

Sebaka sa mohaho oa karete ke .card-body. E sebelise neng kapa neng ha u hloka karolo e kentsoeng ka har'a karete.

Ena ke mongolo o mong ka har'a sehlopha sa karete. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Lihlooho, mongolo, le lihokelo

Litlotla tsa likarete li sebelisoa ka ho kenyelletsa .card-titletag <h*>. Ka mokhoa o ts'oanang, lihokelo li eketsoa le ho beoa haufi le tse ling ka ho kenyelletsa .card-linktag <a>.

Li-subtitles li sebelisoa ka ho kenyelletsa a .card-subtitleho <h*>tag. Haeba the .card-titlele .card-subtitlelintho li behiloe .card-bodynthong, sehlooho sa karete le subtitle li tsamaisana hantle.

Sehlooho sa karete
Subtitle ea karete

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Sehokelo sa karete Sehokelo se seng 
<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>

Litšoantšo

.card-img-tope beha setšoantšo hodimo ho karete. Ka .card-text, mongolo o ka eketsoa kareteng. Mongolo o ka hare .card-texto ka boela oa ngoloa ka li-tag tse tloaelehileng tsa HTML.

Placeholder Image cap

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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

Etsa lethathamo la lihlopha

Theha manane a litaba ka kareteng ka sehlopha sa lenane la flush.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum le 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>
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum le 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>

Sink ea kichineng

Kopanya 'me u bapise mefuta e mengata ea litaba ho theha karete eo u e hlokang, kapa u lahlele ntho e ngoe le e ngoe moo. Ka tlase ho bonts'itsoe mekhoa ea litšoantšo, li-blocks, mokhoa oa mongolo, le sehlopha sa lenane-tsohle li phuthetsoe ka karete ea bophara bo tsitsitseng.

Placeholder Image cap
Sehlooho sa karete

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum le eros
Sehokelo sa karete Sehokelo se seng 
<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">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>

Kenya hlooho le/kapa botlaaseng ba hau ka har'a karete.

Featured
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Lihlooho tsa likarete li ka hlophisoa ka ho kenyelletsa .card-headerlikarolo <h*>.

Featured
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae 
<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>
Qotsa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli 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>
Featured
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Matsatsi a 2 a fetileng 
<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>

Boholo

Likarete ha li na taba e tobileng widthea ho qala, kahoo li tla ba bophara ba 100% ntle le ha ho boletsoe ka tsela e 'ngoe. U ka fetola sena kamoo ho hlokahalang ka CSS e tloaelehileng, lihlopha tsa marang-rang, li-mixins tsa grid Sass, kapa lisebelisoa.

Ho sebelisa grid markup

U sebelisa marang-rang, phuthela likarete ka likholomo le mela ha ho hlokahala.

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Ho sebelisa lisebelisoa

Sebelisa lisebelisoa tsa rona tse seng kae tse fumanehang ho etsa boholo ba karete kapele.

Sehlooho sa karete

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Konopo
Sehlooho sa karete

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Ho sebelisa CSS e tloaelehileng

Sebelisa CSS ea tloaelo ho li-stylesheets tsa hau kapa joalo ka litaele tse ka har'a mela ho beha bophara.

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Ho tsamaisana le mongolo

U ka fetola kapele tekano ea mongolo ea karete efe kapa efe—ka kakaretso kapa likarolo tse itseng—ka litlelase tsa rona tsa ho ikamahanya le mongolo .

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

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

Eketsa ho tsamaea ho itseng hloohong ea karete (kapa thibela) e nang le likarolo tsa nav tsa Bootstrap .

Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae 
<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="#" tabindex="-1" aria-disabled="true">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>
Kalafo e khethehileng ea sehlooho

Ka mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

Eya kae-kae 
<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="#" tabindex="-1" aria-disabled="true">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>

Litšoantšo

Likarete li kenyelletsa likhetho tse 'maloa tsa ho sebetsa ka litšoantšo. Khetha ho kenya "li-caps" tsa setšoantšo qetellong ea karete, ho koahela litšoantšo ka dikahare tsa karete, kapa ho kenya setšoantšo ka har'a karete.

Likatiba tsa litšoantšo

Ho tšoana le lihlooho le botlaaseng, likarete li ka kenyelletsa holimo le tlaase "li-caps" tsa setšoantšo - litšoantšo tse ka holimo kapa ka tlaase ho karete.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Image cap 
<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-top" alt="...">
</div>

Likoahelo tsa setšoantšo

Fetolela setšoantšo bokamorao ba karete 'me u koahele mongolo oa karete ea hau. Ho itšetlehile ka setšoantšo, u ka 'na ua hloka kapa u se ke ua hloka mekhoa e meng kapa lisebelisoa tse ling.

Placeholder Card image
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

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

Hlokomela hore litaba ha lia lokela ho ba kholo ho feta bolelele ba setšoantšo. Haeba litaba li le kholo ho feta setšoantšo, litaba li tla hlahisoa ka ntle ho setšoantšo.

Mekhoa ea likarete

Likarete li na le likhetho tse fapaneng tsa ho khetha semelo sa bona, meeli le mebala.

Bokamorago le mmala

Sebelisa mongolo le lisebelisoa tsa morao-rao ho fetola chebahalo ea karete.

Hlooho
Sehlooho sa karete ea mantlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea bobeli

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea katleho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea kotsi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea temoso

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea lintlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e khanyang

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e lefifi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

<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>
Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .sr-onlysehlopha.

Moeli

Sebelisa lisebelisoa tsa moeli ho fetola border-colorkarete feela. Hlokomela hore o ka beha .text-{color}litlelase ho motsoali .cardkapa karoloana ea litaba tsa karete joalo ka ha ho bonts'itsoe ka tlase.

Hlooho
Sehlooho sa karete ea mantlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea bobeli

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea katleho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea kotsi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea temoso

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete ea lintlha

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e khanyang

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

Hlooho
Sehlooho sa karete e lefifi

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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

Lisebelisoa tsa motsoako

U ka boela ua fetola meeli ho hlooho ea karete le botlaaseng ha ho hlokahala, esita le ho tlosa bona background-colorka .bg-transparent.

Hlooho
Sehlooho sa karete ea katleho

Mongolo o mong o potlakileng oa ho aha holim'a sehlooho sa karete le ho etsa boholo ba litaba tsa karete.

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

Sebopeho sa karete

Ntle le ho hlophisa litaba ka har'a likarete, Bootstrap e kenyelletsa likhetho tse 'maloa tsa ho beha letoto la likarete. Hajoale, likhetho tsena tsa moralo ha li so arabele .

Lihlopha tsa likarete

Sebelisa lihlopha tsa likarete ho fana ka likarete e le ntho e le 'ngoe, e khomaretsoeng ka bophara bo lekanang le likholomo tsa bophahamo. Lihlopha tsa likarete li sebelisa display: flex;ho fihlela boholo ba tsona bo lekanang.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Karete ena e na le litaba tse telele ho feta tsa pele tse bontšang ketso e lekanang ea bophahamo.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

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

Ha u sebelisa lihlopha tsa likarete tse nang le botlaaseng, litaba tsa tsona li tla ikamahanya le maemo.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Karete ena e na le litaba tse telele ho feta tsa pele tse bontšang ketso e lekanang ea bophahamo.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng 
<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>

Likarolo tsa karete

U hloka sete ea likarete tse lekanang ka bophara le bophahamo tse sa hokeloang ho tse ling? Sebelisa likarete tsa karete.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Karete ena e na le litaba tse telele ho feta tsa pele tse bontšang ketso e lekanang ea bophahamo.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

<div class="card-deck">
  <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>
      <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>

Joalo ka lihlopha tsa likarete, botlaaseng ba likarete ka har'a li-decks li tla ikamahanya le maemo.

Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng
Placeholder Image cap
Sehlooho sa karete

Ena ke karete e batsi e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Karete ena e na le litaba tse telele ho feta tsa pele tse bontšang ketso e lekanang ea bophahamo.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng 
<div class="card-deck">
  <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>

Litšiea tsa karete

Likarete li ka hlophisoa ka likholomo tse kang Masonry ka CSS feela ka ho li phuthela ka .card-columns. Likarete li hahiloe ka columnthepa ea CSS sebakeng sa flexbox bakeng sa ho tsamaisana ha bonolo. Likarete li laeloa ho tloha holimo ho ea tlaase le ho tloha ho le letšehali ho ea ho le letona.

Hlokomela! Limaele tsa hau tse nang le likholomo tsa likarete li ka fapana. Ho thibela likarete hore li robehe likholomong, re tlameha ho li etsa display: inline-blockjoalo column-break-inside: avoidka ha li so ka li thibela likulo.

Placeholder Image cap
Sehlooho sa karete se fihlang moleng o mocha

Ena ke karete e telele e nang le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling. Litaba tsena li telele hanyane.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli Title
Placeholder Image cap
Sehlooho sa karete

Karete ena e na le mongolo o tšehetsang ka tlase e le tataiso ea tlhaho ho litaba tse ling.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Posuere erat e felletseng.

Motho ea tummeng ho Mohloli Title
Sehlooho sa karete

Karete ena e na le sehlooho se tloaelehileng le serapa se khuts'oane sa mongolo ka tlase ho eona.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli Title
Sehlooho sa karete

Ena ke karete e 'ngoe e nang le sehlooho le mongolo o tšehetsang ka tlase. Karete ena e na le litaba tse ling tse tla etsa hore e be telele hanyane ka kakaretso.

E qetetse ho ntlafatsoa metsotsong e 3 e fetileng

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 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 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 text-white">
        <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 src="..." class="card-img-top" alt="...">
  </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>

Likholomo tsa likarete li ka atolosoa le ho etsoa ka mokhoa o ikhethileng ka khoutu e 'ngoe e eketsehileng. Ho bontšitsoe ka tlase ke katoloso ea .card-columnssehlopha ka ho sebelisa CSS e tšoanang eo re e sebelisang - likholomo tsa CSS - ho hlahisa sehlopha sa lithaere tse arabelang bakeng sa ho fetola palo ea likholomo.

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