U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Kaararka

Kaararka Bootstrap waxay bixiyaan weel ka kooban oo dabacsan oo la dheerayn karo oo leh noocyo iyo doorashooyin badan.

Boggan

Ku saabsan

Kaarku waa weel nuxur ah oo dabacsan oo la bixi karo. Waxaa ka mid ah ikhtiyaarrada loogu talagalay madaxa iyo cagaha, noocyo badan oo kala duwan oo ka kooban, midabada asalka ah, iyo fursadaha bandhigga ee xoogga leh. Haddii aad aqoon u leedahay Bootstrap 3, kaadhadhku waxay beddelaan baalalkeennii hore, ceelasha, iyo thumbnails. Shaqada la midka ah ee qaybahaas ayaa loo heli karaa sidii fasallada wax ka beddelka ee kaararka.

Tusaale

Kaararka waxaa lagu dhisay calaamado yar iyo qaabab sida ugu macquulsan, laakiin wali waxay maareeyaan inay keenaan tiro badan oo xakameyn iyo habeyn ah. Lagu dhisay flexbox, waxay bixiyaan toosin sahlan waxayna si fiican isugu daraan qaybaha kale ee Bootstrap. Iyagu ma haystaan margin​​si caadi ah, markaa isticmaal utility kala fogeynta hadba sida loogu baahdo.

Hoos waxaa ku yaal tusaale kaarka aasaasiga ah oo leh waxyaabo isku dhafan iyo ballac go'an. Kaadhadhku ma laha ballac go'an oo lagu bilaabo, markaa waxay si dabiici ah u buuxin doonaan ballaca buuxa ee walxaha waalidka. Tani si fudud ayaa loogu habeeyey iyada oo la adeegsanayo xulashooyinka cabbirka ee kala duwan .

Placeholder Image cap
Magaca kaadhka

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

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

Noocyada nuxurka

Kaadhadhku waxay taageeraan waxyaabo badan oo kala duwan, oo ay ku jiraan sawirro, qoraal, kooxo liiska, isku xidhka, iyo in ka badan. Hoos waxaa ah tusaalayaal waxa la taageeray

Jirka

Dhismaha kaadhku waa .card-body. Isticmaal mar kasta oo aad u baahato qayb daboolan oo kaadhka dhexdiisa ah.

Tani waa qayb ka mid ah qoraalka kaarka jirka.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Ciwaanka, qoraalka, iyo isku xidhka

Magacyada kaadhka waxa loo isticmaalaa in lagu .card-titledaro <h*>sumadda Si la mid ah, isku xirka ayaa lagu daraa oo la dhigayaa midba midka kale iyadoo lagu darayo .card-linktag <a>.

Qoraal-hoosaadyada waxa loo adeegsadaa in lagu .card-subtitledaro <h*>sumadda Haddii shayga .card-titleiyo .card-subtitlealaabada lagu dhejiyo .card-bodyshay, magaca kaadhka iyo qoraal hoosaadka ayaa si fiican u toosan.

Magaca kaadhka
Qoraal-hoosaadka kaadhka

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Xiriirinta kaadhka Xiriir kale
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>

Sawirada

.card-img-topdhigaya sawirka kore ee kaadhka. Iyadoo .card-text, qoraalka lagu dari karaa kaarka. Qoraalka dhexdiisa .card-textsidoo kale waxaa lagu qaabayn karaa calaamadaha HTML ee caadiga ah.

Placeholder Image cap

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

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>

Liiska kooxaha

Ku samee liisaska waxa ku jira kaadhka oo leh koox liis ah.

  • Shay
  • Shay labaad
  • Shayga saddexaad
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>
Sifaysan
  • Shay
  • Shay labaad
  • Shayga saddexaad
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>
  • Shay
  • Shay labaad
  • Shayga saddexaad
Kaadhka cagta
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>

Saxanka jikada

Isku qas oo ku dheji noocyo badan oo ka kooban si aad u abuurto kaarka aad u baahan tahay, ama ku tuur wax kasta oo halkaas ku jira. Hoos waxaa lagu muujiyey qaababka sawirka, baloogyada, qaababka qoraalka, iyo kooxda liiska—dhammaan waxay ku duuban yihiin kaar ballac go'an.

Placeholder Image cap
Magaca kaadhka

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

  • Shay
  • Shay labaad
  • Shayga saddexaad
Xiriirinta kaadhka Xiriir kale
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>

Ku dar madax-madaxeed ikhtiyaari ah iyo/ama cag-goyn gudaha kaadhka.

Sifaysan
Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

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

Madax kaararka waxaa lagu qaabayn karaa iyadoo lagu darayo .card-headercuriyeyaasha <h*>.

Sifaysan
Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

Meel tag
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>
Xigasho

Xigasho si fiican loo yaqaan, oo ku jirta curiyaha blockquote.

Qof caan ku ah Ciwaanka Isha
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>
Sifaysan
Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

Meel tag
2 maalmood ka hor
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>

Cabbirka

Kaadhadhku waxay u maleynayaan inaysan jirin wax gaar ah widthoo lagu bilaabo, markaa waxay noqon doonaan 100% ballaaran haddii aan si kale loo sheegin. Waxaad tan ku beddeli kartaa hadba sida loogu baahdo CSS, fasallada grid, grid Sass mixins, ama utilities.

Isticmaalka calaamadaynta grid

Adigoo isticmaalaya shabaqlaha, ku duub kaadhadhka tiirar iyo saf marka loo baahdo.

Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

Meel tag
Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

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

Isticmaalka utility

Isticmaal muggeed ee agabka cabbirka ee la heli karo si aad dhaqso ugu dejiso ballaca kaadhka.

Magaca kaadhka

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

badhanka
Magaca kaadhka

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

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

Isticmaalka CSS-ga caadiga ah

U adeegso CSS-ga caadiga ah xaashidaada qaab-dhismeedka ama qaababka khad hoose si aad u dejiso ballac.

Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

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

toosinta qoraalka

Waxaad si dhakhso ah u bedeli kartaa toosinta qoraalka kaadh kasta - gabi ahaanba ama qaybo gaar ah - oo leh fasaladayada qoraalka alignment .

Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

Meel tag
Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

Meel tag
Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

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

Ku dar xoogaa navigation ah madaxa kaarka (ama xannibaadda) oo leh qaybaha nav ee Bootstrap .

Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

Meel tag
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>
Daaweynta cinwaan gaar ah

Iyada oo qoraalka taageerada hoose uu yahay hoggaan dabiici ah oo u horseedaya macluumaad dheeraad ah.

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

Sawirada

Kaararka waxaa ku jira dhowr ikhtiyaar oo lagu shaqeynayo sawirada. Ka dooro ku dhejinta "koofiyadaha sawirka" ee labada gees ee kaadhka, ku daboolaya sawirada kaadhka ka kooban, ama si fudud ugu dheji sawirka kaadhka.

Koofiyadaha sawirka

Si la mid ah madaxyada iyo cagaha, kaararku waxa ay ku jiri karaan kor iyo hoos "koofiyadaha sawirka" -sawiro xagga sare ama hoose ee kaadhka.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer

Waxa cusboneysiiyay 3 daqiiqo kahor

Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer

Waxa cusboneysiiyay 3 daqiiqo kahor

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>

Dusha sare ee sawirka

U rog sawirka asalka kaadhka oo ku daboosho qoraalka kaadhkaaga. Iyadoo ku xiran sawirka, waxaa laga yaabaa inaad u baahnid ama uma baahnid habab dheeraad ah ama qalabyo.

Placeholder Card image
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer

Waxa cusboneysiiyay 3 daqiiqo kahor

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>
Ogow in nuxurku aanu ka weynaan dhererka sawirka. Haddii nuxurku ka weyn yahay sawirka, waxa ku jira waxa lagu soo bandhigi doonaa meel ka baxsan sawirka.

Horizontal

Isticmaalka isku-darka fasalada shabaqyada iyo tamarta, kaadhadhku waxa loo samayn karaa si toos ah mobile-saaxiibtinimo iyo hab jawaab celin leh. Tusaalaha hoose, waxaanu ku saarna majaraha xadhkaha goostay .g-0oo aanu isticmaalnaa .col-md-*fasalo si aanu kaadhka uga dhigno mid jiifa barta mdjabinta. Dib u habeyn dheeraad ah ayaa loo baahan karaa iyadoo ku xiran waxa kaadhkaga ku jira.

Placeholder Image
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer

Waxa cusboneysiiyay 3 daqiiqo kahor

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>

Qaababka kaararka

Kaararka waxaa ku jira doorashooyin kala duwan oo lagu habeynayo asalkooda, xuduudahooda, iyo midabkooda.

Asalkii hore iyo midabka

Lagu daray v5.2.0

Samee background-colorhorudhac isbar -color bardhiga kaaliyayaashayada.text-bg-{color} . Markii hore waxa loo baahnaa in gacanta lagu lammaaniyo doorashadaada .text-{color}iyo .bg-{color}utility-ka qaabaynta, kuwaas oo aad weli isticmaali karto haddii aad doorbidayso.

Madax
Magaca kaadhka aasaasiga ah

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka sare

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka guusha

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka khatarta ah

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka digniinta

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka macluumaadka

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Cinwaanka kaadhka khafiifka ah

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka madow

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

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>
U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.

Xuduud

Isticmaal utility xuduudaha si aad u bedesho kaliya border-colorkaarka. Ogsoonow inaad ku dhejin karto .text-{color}xiisado waalidka .cardama qayb ka mid ah waxa kaadhka ku jira sida hoos ku cad.

Madax
Magaca kaadhka aasaasiga ah

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka sare

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka guusha

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka khatarta ah

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka digniinta

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka macluumaadka

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Cinwaanka kaadhka khafiifka ah

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

Madax
Magaca kaadhka madow

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

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>

Mixins utilities

Waxa kale oo aad bedeli kartaa xudduudaha madaxa kaadhka iyo cagaha sida loo baahdo, oo xitaa ka background-colorsaar .bg-transparent.

Madax
Magaca kaadhka guusha

Qoraal tusaale degdeg ah qaar ka mid ah si loogu dhiso cinwaanka kaadhka oo laga dhigo inta badan waxa kaadhka ku jira.

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

Qaabaynta kaadhka

Marka lagu daro habaynta waxa ku jira kaadhadhka dhexdiisa, Bootstrap waxa ku jira dhawr ikhtiyaar oo lagu dejinayo kaarar taxane ah. Waqtigan xaadirka ah, xulashooyinka qaabeynta weli kama jawaabaan .

Kooxaha kaararka

Isticmaal kooxaha kaadhka si aad kaararka ugu soo bandhigto hal unug, oo ku lifaaqan oo leh tiirar ballac iyo dherer le'eg. Kooxaha kaadhadhku waxay bilaabaan inay is dulsaaran yihiin oo ay isticmaalaan display: flex;si ay ugu xidhmaan cabbirro lebbisan oo ka bilaabmaya barta smjabinta.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer

Waxa cusboneysiiyay 3 daqiiqo kahor

Placeholder Image cap
Magaca kaadhka

Kaarkani waxa uu leeyahay qoraal taageeraya hoosta oo ah hogaan dabiici ah oo keenaya waxyaabo dheeraad ah.

Waxa cusboneysiiyay 3 daqiiqo kahor

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.

Waxa cusboneysiiyay 3 daqiiqo kahor

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>

Markaad isticmaalayso kooxaha kaadhka leh cago-yaalka, waxa ku jira si toos ah ayay saf ugu geli doonaan.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer

Waxa cusboneysiiyay 3 daqiiqo kahor
Placeholder Image cap
Magaca kaadhka

Kaarkani waxa uu leeyahay qoraal taageeraya hoosta oo ah hogaan dabiici ah oo keenaya waxyaabo dheeraad ah.

Waxa cusboneysiiyay 3 daqiiqo kahor
Placeholder Image cap
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.

Waxa cusboneysiiyay 3 daqiiqo kahor
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>

Kaararka xargaha

Isticmaal nidaamka xariiqda Bootstrap iyo .row-colsfasalladiisa si aad u xakamayso inta tiirar xajmiyeedka (ku duudduuban kaararkaaga) ee aad muujiso safkiiba. Tusaale ahaan, halkan waxa .row-cols-1aan ku kala saaraynaa kaadhadhka hal tiir, oo .row-cols-md-2loo qaybinayo afar kaadh oo ballac ahaan le'eg oo safaf badan ah, laga bilaabo barta kala goynta dhexdhexaadka ah.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

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>

U beddel .row-cols-3oo waxaad arki doontaa duubka kaadhka afraad.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

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>

Markaad u baahan tahay dherer siman, .h-100ku dar kaararka. Haddii aad rabto in dhererka siman sida caadiga ah, waxaad dejin kartaa $card-height: 100%Sass.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh gaaban

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh dheer oo leh qoraal taageero ah oo hoos ku qoran oo ah hogaan dabiici ah oo u horseedaya xog dheeri ah. Nuxurkani wax yar ayaa ka dheer

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>

Si la mid ah kooxaha kaadhka, cagaha kaadhka ayaa si toos ah saf ugu gali doona.

Placeholder Image cap
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Nuxurkani wax yar ayaa ka dheer

Waxa cusboneysiiyay 3 daqiiqo kahor
Placeholder Image cap
Magaca kaadhka

Kaarkani waxa uu leeyahay qoraal taageeraya hoosta oo ah hogaan dabiici ah oo keenaya waxyaabo dheeraad ah.

Waxa cusboneysiiyay 3 daqiiqo kahor
Placeholder Image cap
Magaca kaadhka

Kani waa kaadh ballaadhan oo leh qoraal taageeraya hoosta oo ah hoggaan dabiici ah oo u horseedaya nuxur dheeraad ah. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.

Waxa cusboneysiiyay 3 daqiiqo kahor
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>

Masonry

Waxaan v4isticmaalnay farsamada CSS-kaliya si aan ugu ekaysiinno hab-dhaqanka tiirarka Masonry -sida, laakiin farsamadani waxay la timid waxyeellooyin badan oo aan fiicneyn . Haddii aad rabto in aad leedahay qaabaynta noocan oo kale ah v5, waxaad kaliya isticmaali kartaa Masonry plugin. Masonry kuma jiraan Bootstrap , laakiin waxaanu samaynay tusaale demo si uu kaaga caawiyo inaad bilowdo.

CSS

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, kaadhadhku hadda waxay adeegsadaan doorsoomayaasha CSS ee maxalliga ah .cardsi loo hagaajiyo habeynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$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};

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