Kaararka

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

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

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

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

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.

<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

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

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

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

Liiska kooxaha

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

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

Sifaysan

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

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.

Magaca kaadhka

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum iyo eros

Xiriirinta kaadhka Xiriir kale

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Madaxa iyo cagta

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

<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

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

Qof caan ku ah Ciwaanka Isha

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

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

<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

<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

<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

<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

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

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

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

Daaweynta cinwaan gaar ah

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

Meel tag

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

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.

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

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

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.

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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Qaababka kaararka

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

Asalkii hore iyo midabka

Isticmaal qoraalka iyo agabka asalka si aad u bedesho muuqaalka kaadhka.

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.

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

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 .sr-onlyfasalka 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.

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

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

<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 kaararka waxay isticmaalaan display: flex;si ay u gaadhaan cabbirkooda labbiska.

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

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

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. Kaadhkani waxa uu leeyahay tusmooyin ka dheer kan ugu horreeya si uu u muujiyo tallaabada dhererka siman.

Waxa cusboneysiiyay 3 daqiiqo kahor

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

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

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

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

Waxa cusboneysiiyay 3 daqiiqo kahor

Magaca kaadhka

Waxa cusboneysiiyay 3 daqiiqo kahor

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

Sagxadaha kaadhka

Ma u baahan tahay kaarar ballac iyo dherer le'eg oo aan isku xidhnayn? Isticmaal sagxadaha kaadhka.

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

Waxa cusboneysiiyay 3 daqiiqo kahor

Magaca kaadhka

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

Waxa cusboneysiiyay 3 daqiiqo kahor

Magaca kaadhka

Waxa cusboneysiiyay 3 daqiiqo kahor

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

Si la mid ah kooxaha kaadhka, kaadhadhka cagtooda ee sagxadaha ayaa si toos ah saf ugu soo geli doona.

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

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

Waxa cusboneysiiyay 3 daqiiqo kahor

Magaca kaadhka

Waxa cusboneysiiyay 3 daqiiqo kahor

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

Tiirarka kaadhka

Kaararka waxaa loo habayn karaa tiirar u eg Masonry.card-columns oo leh CSS kaliya iyadoo lagu duubayo . Kaararka waxaa lagu dhisay columnguryaha CSS halkii ay ka ahaan lahaayeen flexbox si ay si sahlan ugu toosiyaan. Kaararka waxaa laga dalbadaa kor ilaa hoos iyo bidix ilaa midig.

Madaxa kor u qaad! Masaafadaada tiirarka kaadhka ahi way kala duwanaan kartaa. Si aan uga hortagno in kaadhadhku ku kala jabaan tiirarka, waa in aan u dejinnaa display: inline-blocksidii column-break-inside: avoidaanay weli ahayn xal xabbaddu difaacdo.

Magaca kaadhka oo ku soo duuduuba xariiq cusub

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

Qof caan ku ah Ciwaanka Isha

Magaca kaadhka

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

Waxa cusboneysiiyay 3 daqiiqo kahor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Qof caan ku ah Ciwaanka Isha

Magaca kaadhka

Kaarkani waxa uu leeyahay cinwaan joogto ah iyo tuduc gaaban oo qoraal ah oo ka hooseeya.

Waxa cusboneysiiyay 3 daqiiqo kahor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

Qof caan ku ah Ciwaanka Isha

Magaca kaadhka

Kani waa kaadh kale oo cinwaan iyo qoraal taageero hoosta ku leh. Kaadhkani waxa uu leeyahay wax ka kooban oo dheeraad ah si uu guud ahaan uga dhigo wax yar dheer.

Waxa cusboneysiiyay 3 daqiiqo kahor

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Tiirarka kaararka sidoo kale waa la kordhin karaa oo lagu habeyn karaa kood dheeraad ah. Hoos waxaa lagu muujiyey kordhinta .card-columnsfasalka iyadoo la adeegsanayo CSS la mid ah oo aan isticmaalno — tiirarka CSS — si loo abuuro tiro heerar ah oo ka jawaabaya beddelka tirada tiirarka.

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

Kaararka

Ku saabsan

Tusaale

Magaca kaadhka

Noocyada nuxurka

Jirka

Ciwaanka, qoraalka, iyo isku xidhka

Magaca kaadhka

Qoraal-hoosaadka kaadhka

Sawirada

Liiska kooxaha

Saxanka jikada

Magaca kaadhka

Madaxa iyo cagta

Daaweynta cinwaan gaar ah

Sifaysan

Daaweynta cinwaan gaar ah

Daaweynta cinwaan gaar ah

Cabbirka

Isticmaalka calaamadaynta grid

Daaweynta cinwaan gaar ah

Daaweynta cinwaan gaar ah

Isticmaalka utility

Magaca kaadhka

Magaca kaadhka

Isticmaalka CSS-ga caadiga ah

Daaweynta cinwaan gaar ah

toosinta qoraalka

Daaweynta cinwaan gaar ah

Daaweynta cinwaan gaar ah

Daaweynta cinwaan gaar ah

Navigation

Daaweynta cinwaan gaar ah

Daaweynta cinwaan gaar ah

Sawirada

Koofiyadaha sawirka

Magaca kaadhka

Magaca kaadhka

Dusha sare ee sawirka

Magaca kaadhka

Qaababka kaararka

Asalkii hore iyo midabka

Magaca kaadhka aasaasiga ah

Magaca kaadhka sare

Magaca kaadhka guusha

Magaca kaadhka khatarta ah

Magaca kaadhka digniinta

Magaca kaadhka macluumaadka

Cinwaanka kaadhka khafiifka ah

Magaca kaadhka madow

U gudbinta macnaha tignoolajiyada caawinta

Xuduud

Magaca kaadhka aasaasiga ah

Magaca kaadhka sare

Magaca kaadhka guusha

Magaca kaadhka khatarta ah

Magaca kaadhka digniinta

Magaca kaadhka macluumaadka

Cinwaanka kaadhka khafiifka ah

Magaca kaadhka madow

Mixins utilities

Magaca kaadhka guusha

Qaabaynta kaadhka

Kooxaha kaararka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Sagxadaha kaadhka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Magaca kaadhka

Tiirarka kaadhka

Magaca kaadhka oo ku soo duuduuba xariiq cusub

Magaca kaadhka