Source

Dikarata

Dikarata tša Bootstrap di fa setshelo sa dikagare seo se fetofetogago le maemo le seo se katološwago ka diphetogo tše ntši le dikgetho.

Mabapi le

Karata ke setshelo sa diteng seo se fetofetogago le maemo le seo se katološwago . E akaretša dikgetho tša dihlogo le dithalwa tša ka fase, mehutahuta ya diteng, mebala ya morago ya seemo, le dikgetho tša pontšho tše maatla. Ge e ba o tlwaelane le Bootstrap 3, dikarata di tšea sebaka sa diphanele tša rena tša kgale, didiba, le diswantšho tše dinyenyane. Mošomo wo o swanago le wa dikarolo tšeo o hwetšagala bjalo ka dihlopha tša sefetoši tša dikarata.

Mohlala

Dikarata di agilwe ka go swaya go se nene le mekgwa ka mo go kgonegago, eupša di sa dutše di kgona go tliša tone ya taolo le go dira gore e be ya gago. E agilwe ka flexbox, di fana ka go logaganya mo go bonolo le go hlakanya gabotse le dikarolo tše dingwe tša Bootstrap. Ba na le ha ba na marginka default, kahoo sebelisa spacing utilities e le ho hlokahala.

Ka tlase ke mohlala wa karata ya motheo yeo e nago le diteng tše di hlakantšwego le bophara bjo bo sa fetogego. Dikarata ga di na bophara bjo bo sa fetogego bja go thoma, ka fao ka tlhago di tla tlatša bophara bjo bo tletšego bja elemente ya yona ya motswadi. Se se rulaganywa gabonolo ka dikgetho tša rena tše di fapa-fapanego tša go lekanyetša bogolo .

100% x 180 e le
Thaetlele ya karata

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

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

Mehuta ya diteng

Dikarata di thekga dikagare tše dintši, go akaretša diswantšho, sengwalwa, dihlopha tša lenaneo, dikgokagano le tše dingwe. Ka tlase ke mehlala ya seo se thekgwago.

Mmele

Selo sa go aga sa karata ke .card-body. E diriše neng le neng ge o nyaka karolo yeo e nago le dilo tše dintši ka gare ga karata.

Ye ke sengwalwa se sengwe ka gare ga mmele wa karata. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Dihlogo, sengwalwa, le dikgokagano

Dithaetlele tša dikarata di šomišwa ka go tlaleletša .card-titlego <h*>thepo. Ka tsela ye e swanago, dikgokagano di a okeletšwa le go bewa kgauswi le tše dingwe ka go tlaleletša .card-linkgo <a>thepo.

Ditlhalošo tša ka fase di šomišwa ka go oketša a .card-subtitlego <h*>tag. Ge e .card-titlele gore le .card-subtitledilo di beilwe ka gare ga .card-bodyselo, sehlogo sa karata le thaetlele ya ka fase di logaganywa gabotse.

Thaetlele ya karata
Sehlogo sa ka tlase sa karata

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Kgokagano ya karata Kgokagano ye nngwe 
<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>

Diswantšho

.card-img-tope bea seswantšho godimo ga karata. Ka .card-text, sengwalwa se ka okeletšwa karateng. Sengwalwa ka gare .card-textse ka boela se setaele ka dithepo ta HTML ta maemo.

Kepisi ya seswantšho [100%x180].

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

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

Lokeletša dihlopha

Hlama mananeo a diteng ka gare ga karata ka sehlopha sa lenaneo la go hlatswa.

  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Vestibulum ka 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>
E bontšhitšwe
  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Vestibulum ka 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>

Sinki ya ka khitšhing

Kopanya le go nyalelanya mehuta ye mentši ya diteng go hlama karata yeo o e hlokago, goba o lahlele se sengwe le se sengwe ka fao. Ka mo tlase go bontšhitšwe mekgwa ya diswantšho, diboloko, mekgwa ya mongwalo le sehlopha sa lelokelelo—ka moka di phuthetšwe ka karata ya bophara bjo bo sa fetogego.

Kepisi ya seswantšho [100%x180].
Thaetlele ya karata

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Vestibulum ka eros
Kgokagano ya karata Kgokagano ye nngwe 
<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>

Oketša hlogo ya boikhethelo le/goba letlakala la ka fase ka gare ga karata.

E bontšhitšwe
Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

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

Dihlogo tša dikarata di ka setaele ka go tlaleletša .card-headergo <h*>dielemente.

E bontšhitšwe
Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Eya felotsoko 
<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>
Setsopolwa

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go 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>
E bontšhitšwe
Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Eya felotsoko
2 matsatsi 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>

Go lekanyetša bogolo

Dikarata di tšea gore ga go na mo go itšego widthgo thoma, ka gona di tla ba 100% ka bophara ntle le ge go boletšwe ka tsela e nngwe. O ka fetoša se ka moo go nyakegago ka CSS ya tlwaelo, diklase tša keriti, di-mixin tša keriti Sass, goba didirišwa.

Go šomiša go swaya keriti

Ka go šomiša keriti, phuthela dikarata ka dikholomo le methaladi ka moo go nyakegago.

Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Eya felotsoko
Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

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

Go diriša didirišwa tša go thuša

Diriša didirišwa tša rena tše sego kae tša go lekanyetša bogolo tšeo di lego gona go beakanya bophara bja karata ka pela.

Thaetlele ya karata

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Kunope
Thaetlele ya karata

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

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

Go diriša CSS ya tlwaelo

Šomiša CSS ya tlwaelo ka go matlakala a gago a setaele goba bjalo ka ditaele tša ka gare ga mothaladi go beakanya bophara.

Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

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

Go logaganya sengwalwa

O ka fetoša ka pela go logaganya mongwalo wa karata le ge e le efe—ka botlalo bja yona goba dikarolo tše itšego—ka diklase tša rena tša go logaganya sengwalwa .

Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Eya felotsoko
Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Eya felotsoko
Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

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

Oketša go sepelasepela go itšego go hlogo ya karata (goba thibelo) ka dikarolo tša nav tša Bootstrap .

Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Eya felotsoko 
<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>
Kalafo e kgethegilego ya thaetlele

Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

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

Diswantšho

Dikarata di akaretša dikgetho tše sego kae tša go šoma ka diswantšho. Kgetha go tšwa go go tlaleletša “dikepisi tša diswantšho” mafelelong a mangwe le a mangwe a karata, go apeša diswantšho ka diteng tša karata goba go fo tsenya seswantšho ka gare ga karata.

Dikepisi tša seswantšho

Go swana le dihlogo le ditlhaka tša ka tlase, dikarata di ka akaretša “dikepisi tša diswantšho” tša ka godimo le tša ka tlase—diswantšho tšeo di lego ka godimo goba ka tlase ga karata.

100% x 180 e le
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Last updated 3 mins e fetileng

Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Last updated 3 mins e fetileng

100% x 180 e le 
<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>

Dikhupetšo tša seswantšho

Fetoša seswantšho go ba bokamorago bja karata gomme o apeše sengwalwa sa karata ya gago. Go ya ka seswantšho, o ka nyaka goba wa se nyake mekgwa ya tlaleletšo goba didirišwa.

100% x 270
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Last updated 3 mins e fetileng

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

Mekgwa ya dikarata

Dikarata di akaretša dikgetho tše di fapa-fapanego tša go dira gore ditlogo tša tšona, mellwane le mmala o be wa gago.

Lemorago le mmala

Šomiša didirišwa tša sengwalwa le tša ka morago go fetoša ponagalo ya karata.

Hlogo ya ditaba
Thaetlele ya karata ya mathomo

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya bobedi

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya katlego

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya kotsi

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya temošo

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Info karete ya sehlogo

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya seetša

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata e lefifi

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

<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>
Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.

Mollwane

Diriša didirišwa tša mollwane go fetoša feela border-colorya karata. Hlokomela gore o ka bea .text-{color}diklase godimo ga motswadi .cardgoba sehlopha se senyenyane sa dikagare tša karata bjalo ka ge go bontšhitšwe ka mo tlase.

Hlogo ya ditaba
Thaetlele ya karata ya mathomo

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya bobedi

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya katlego

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya kotsi

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya temošo

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Info karete ya sehlogo

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata ya seetša

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Hlogo ya ditaba
Thaetlele ya karata e lefifi

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

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

Didirišwa tša mixins

O ka fetola gape mellwane godimo ga hlogo ya karata le letlakala la ka fase ge go nyakega, gaešita le go tloša ya bona background-colorka .bg-transparent.

Hlogo ya ditaba
Thaetlele ya karata ya katlego

Sengwalwa se sengwe sa mohlala sa ka pela go aga godimo ga sehlogo sa karata le go dira bontši bja diteng tša karata.

Letlakala la ka tlase 
<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>

Peakanyo ya karata

Go tlaleletša go setaele sa diteng ka gare ga dikarata, Bootstrap e akaretša dikgetho tše mmalwa tša go beakanya letoto la dikarata. Mo nakong ye, dikgetho tše tša peakanyo ga se tša hlwa di arabela .

Dihlopha tša dikarata

Šomiša dihlopha tša dikarata go tšweletša dikarata bjalo ka elemente e tee, ye e kgomareditšwego ka dikholomo tša bophara le botelele bjo bo lekanago. Dihlopha tša dikarata di šomiša display: flex;go fihlelela bogolo bja tšona bja yunifomo.

100% x 180 e le
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Last updated 3 mins e fetileng

100% x 180 e le
Thaetlele ya karata

Karata ye e na le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Last updated 3 mins e fetileng

100% x 180 e le
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Karata ye e na le diteng tše telele le go feta tša pele go bontšha tiro yeo ya botelele bjo bo lekanago.

Last updated 3 mins e fetileng

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

Ge o šomiša dihlopha tša dikarata tše di nago le dithalwa tša ka fase, diteng tša tšona di tla lokela ka go iketla.

100% x 180 e le
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Last updated 3 mins e fetileng
100% x 180 e le
Thaetlele ya karata

Karata ye e na le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Last updated 3 mins e fetileng
100% x 180 e le
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Karata ye e na le diteng tše telele le go feta tša pele go bontšha tiro yeo ya botelele bjo bo lekanago.

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

Dikgato tša dikarata

O hloka sete ya dikarata tša bophara le botelele bjo bo lekanago tšeo di sa kgomaretšwego go tše dingwe? Diriša di-deck tša dikarata.

100% x 200
Thaetlele ya karata

Ye ke karata ye telele ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Last updated 3 mins e fetileng

100% x 200
Thaetlele ya karata

Karata ye e na le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Last updated 3 mins e fetileng

100% x 200
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Karata ye e na le diteng tše telele le go feta tša pele go bontšha tiro yeo ya botelele bjo bo lekanago.

Last updated 3 mins e fetileng

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

Go swana le ka dihlopha tša dikarata, difoka tša ka tlase tša dikarata ka gare ga di-deck di tla lokela ka go iketla.

100% x 180 e le
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Last updated 3 mins e fetileng
100% x 180 e le
Thaetlele ya karata

Karata ye e na le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Last updated 3 mins e fetileng
100% x 180 e le
Thaetlele ya karata

Ye ke karata ye e nabilego ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Karata ye e na le diteng tše telele le go feta tša pele go bontšha tiro yeo ya botelele bjo bo lekanago.

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

Dikholomo tša dikarata

Dikarata di ka rulaganywa ka dikholomo tše di swanago le Masonry ka CSS feela ka go di phuthela ka .card-columns. Dikarata di agilwe ka columndithoto tša CSS go e na le flexbox bakeng sa go logaganya gabonolo. Dikarata di otarwa go tloga godimo go ya fase le go tloga go le letshadi go ya go le letona.

Dihlogo godimo! Dimaele tša gago ka dikholomo tša dikarata di ka fapana. Go thibela dikarata go thubega go putla dikholomo, re swanetše go di beakanya go display: inline-blockas column-break-inside: avoidisn’t a bulletproof solution yet.

100% x 160
Thaetlele ya karata yeo e phuthelago go ya mothalong o mofsa

Ye ke karata ye telele ye e nago le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo. Diteng tše di telele go se nene.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title
100% x 160
Thaetlele ya karata

Karata ye e na le sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.

Last updated 3 mins e fetileng

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat.

Motho yo a tumilego ka go Source Title
Thaetlele ya karata

Karata ye e na le sehlogo sa ka mehla le temana ye kopana ya mongwalo ka fase ga yona.

Last updated 3 mins e fetileng

100% x 260

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title
Thaetlele ya karata

Ye ke karata ye nngwe yeo e nago le sehlogo le sengwalwa sa thekgo ka fase. Karata ye e na le diteng tše dingwe tša tlaleletšo go e dira gore e be e telele go se nene ka kakaretšo.

Last updated 3 mins e fetileng

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

Dikholomo tša dikarata le tšona di ka katološwa le go rulaganywa ka khoutu e itšego ya tlaleletšo. Go bontšhitšwe ka mo tlase ke katoloso ya .card-columnssehlopha ka go diriša CSS e swanago yeo re e dirišago—dikholomo tša CSS— go tšweletša sete ya maemo a go arabela bakeng sa go fetoša palo ya dikholomo.

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