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 .
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 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.
<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>leswao.
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.
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 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.
- 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>- 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>- 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 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.
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
<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>Hlogo le letlakala la ka tlase
Oketša hlogo ya boikhethelo le/goba letlakala la ka fase ka gare ga karata.
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 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<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>Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.
<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>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">
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 felotsokoKalafo 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.
KunopeThaetlele 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 felotsokoKalafo e kgethegilego ya thaetlele
Ka sengwalwa sa thekgo ka fase bjalo ka go eta pele ga tlhago go diteng tša tlaleletšo.
Eya felotsokoKalafo 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>Go sepelasepela
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="#" 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 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="#" 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>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.
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
<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.
<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 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 .no-guttersle 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.
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 mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" 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
Šomiša didirišwa tša sengwalwa le tša ka morago go fetoša ponagalo ya karata.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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.
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
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
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 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.
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.
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.
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.
<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>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.
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
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
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 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>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.
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.
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.
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.
<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>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.
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.
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.
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.
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.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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.
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.
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.
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.
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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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.
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.
Thaetlele ya karata
Ye ke karata ye kopana.
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.
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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>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.
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.
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.
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
Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.
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 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>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;
}
}