Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

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.

Letlakaleng le

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 .

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

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.
html 
<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
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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.

Placeholder Image cap

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.

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

Lokeletša dihlopha

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

  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
E tšweleditšwe
  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
Letlakala la ka tlase la karata
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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.

Placeholder Image cap
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.

  • Ntho e nngwe
  • Selo sa bobedi
  • Selo sa boraro
Kgokagano ya karata Kgokagano ye nngwe
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

E tšweleditš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
html 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

E tšweleditš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
html 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Setsopolwa

Setsopolwa se se tsebegago, seo se lego ka gare ga elemente ya blockquote.

Motho yo a tumilego ka go Source Title
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
E tšweleditš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
html 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

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
html 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

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
html 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

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

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

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

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

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

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.

Placeholder Image cap
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

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

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.

Placeholder Card image
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

html 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Hlokomela gore diteng ga se tša swanela go ba tše kgolo go feta botelele bja seswantšho. Ge e le gore diteng di kgolo go feta seswantšho diteng di tla bontšhwa ka ntle ga seswantšho.

Rapamego

Ka go diriša motswako wa diklase tša keriti le tša didirišwa, dikarata di ka dirwa tše di rapaletšego ka tsela yeo e nago le bogwera bja sellathekeng le yeo e arabelago. Mohlaleng wo o lego ka mo tlase, re tloša di-gutter tša keriti ka .g-0le go diriša .col-md-*diklase go dira gore karata e rapaletše ntlheng ya go mdkgaotša. Dipeakanyo tše dingwe di ka nyakega go ithekgile ka diteng tša karata ya gago.

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

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

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

E okeditšwe ka go v5.2.0

Bea a background-colorka go fapana foreground colorle bathuši ba rena.text-bg-{color} . Pele go be go nyakega go kopanya ka seatla kgetho ya gago ya .text-{color}le .bg-{color}didirišwa tša go dira setaele, tšeo o sa dutšego o ka di diriša ge e ba o rata.

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.

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

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.

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

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
html 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

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 thoma di kgobokeditšwe gomme di šomiša display: flex;go ba tše di kgomareditšwego ka ditekanyo tša go swana go thoma ka ntlha ya go smkgaotša.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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

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

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.

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

Dikarata tša keriti

Šomiša tshepedišo ya keriti ya Bootstrap le .row-colsdiklase tša yona go laola gore ke dikholomo tše kae tša keriti (tšeo di phuthetšwego go dikologa dikarata tša gago) tšeo o di bontšhago ka mothalo. Go fa mohlala, mo ke .row-cols-1go beakanya dikarata godimo ga kholomo e tee, le .row-cols-md-2go aroganya dikarata tše nne go ya go bophara bjo bo lekanago go putla methaladi ye mentši, go tšwa go ntlha ya go thubega ya magareng godimo.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

E fetole go .row-cols-3gomme o tla bona go phuthelwa ga karata ya bone.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Ge o nyaka botelele bjo bo lekanago, oketša .h-100dikarata. Ge o nyaka bophagamo bjo bo lekanago ka go ikemela, o ka beakanya $card-height: 100%ka go Sass.

Placeholder Image cap
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.

Placeholder Image cap
Thaetlele ya karata

Ye ke karata ye kopana.

Placeholder Image cap
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.

Placeholder Image cap
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.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Go dira masenke

Ka v4re ile ra diriša mokgwa wa CSS feela go ekiša boitshwaro bja dikholomo tše di swanago le Masonry , eupša mokgwa wo o ile wa tla le ditla-morago tše dintši tše di sa kgahlišego . Ge o nyaka go ba le mohuta wo wa peakanyo ka go v5, o ka no dira tšhomišo ya plugin ya Masonry. Masonry ga e akaretšwe go Bootstrap , eupša re dirile mohlala wa demo go go thuša go thoma.

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya mokgwa wa go fetoga wa diphetogo tša CSS wa Bootstrap, dikarata bjale di šomiša diphetogo tša CSS tša selegae godimo .cardbakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Diphetogo tša Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;