Source

Katuna

Katunan Bootstrap suna ba da kwandon abun ciki mai sassauƙa kuma mai yuwuwa tare da bambance-bambancen karatu da zaɓuɓɓuka.

Game da

Kati wani kwandon abun ciki mai sassauƙa ne kuma mai yuwuwa. Ya haɗa da zaɓuɓɓuka don masu kai da ƙafafu, nau'in abun ciki iri-iri, launuka na mahallin mahallin, da zaɓuɓɓukan nuni masu ƙarfi. Idan kun saba da Bootstrap 3, katunan suna maye gurbin tsoffin fafuna, rijiyoyi, da thumbnails. Akwai ayyuka iri ɗaya ga waɗannan abubuwan haɗin gwiwa azaman azuzuwan masu gyara don katunan.

Misali

An gina katunan tare da ƙaramin alama da salo sosai gwargwadon yiwuwa, amma har yanzu suna sarrafa don isar da ton na sarrafawa da keɓancewa. Gina tare da flexbox, suna ba da jeri mai sauƙi kuma suna haɗuwa da kyau tare da sauran abubuwan Bootstrap. Ba su da marginta tsohuwa, don haka yi amfani da kayan aikin tazarar yadda ake buƙata.

Da ke ƙasa akwai misalin katin asali tare da abun ciki mai gauraya da tsayayyen faɗi. Katuna ba su da tsayayyen faɗin da za su fara, don haka a zahiri za su cika cikakken faɗin ɓangaren mahaifa. Wannan yana da sauƙin keɓancewa tare da zaɓin girman mu daban-daban .

Placeholder Image cap
Taken katin

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Tafi wani wuri 
<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>

Nau'in abun ciki

Katuna suna tallafawa nau'ikan abun ciki iri-iri, gami da hotuna, rubutu, ƙungiyoyin jeri, hanyoyin haɗin gwiwa, da ƙari. A ƙasa akwai misalan abin da ake tallafawa.

Jiki

Tushen ginin kati shine .card-body. Yi amfani da shi a duk lokacin da kuke buƙatar sashe mai santsi a cikin kati.

Wannan wasu rubutu ne a jikin katin. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Laƙabi, rubutu, da hanyoyin haɗin gwiwa

Ana amfani da taken katin ta ƙara .card-titlezuwa <h*>alama. Hakazalika, ana ƙara hanyoyin haɗin gwiwa a sanya su kusa da juna ta hanyar ƙara .card-linkzuwa <a>tag.

Ana amfani da rubutun kalmomi ta ƙara alama .card-subtitlezuwa <h*>alama. Idan an sanya abubuwan .card-titleda .card-subtitleabubuwan a cikin wani .card-bodyabu, taken katin da ƙaramin taken suna daidaitawa da kyau.

Taken katin
Rubutun kati

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Haɗin katin Wani hanyar haɗi 
<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>

Hotuna

.card-img-topsanya hoto zuwa saman katin. Tare da .card-text, ana iya ƙara rubutu zuwa katin. Hakanan za'a iya tsara rubutu a .card-textciki tare da daidaitattun alamun HTML.

Placeholder Image cap

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

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

Jerin ƙungiyoyi

Ƙirƙirar lissafin abun ciki a cikin kati tare da ƙungiyar jeri.

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

Kitchen nutse

Haɗa ku daidaita nau'ikan abun ciki da yawa don ƙirƙirar katin da kuke buƙata, ko jefa komai a ciki. Ana nunawa a ƙasa salon hoto, tubalan, salon rubutu, da rukunin jeri-duk an nannade su cikin ƙayyadaddun kati mai faɗi.

Placeholder Image cap
Taken katin

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum da eros
Haɗin katin Wani hanyar haɗi 
<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>

Ƙara abin kai da/ko ƙafa na zaɓi a cikin kati.

Fitattu
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Za'a iya siffanta kawunan kati ta ƙara .card-headerzuwa <h*>abubuwa.

Fitattu
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>
Magana

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen 
<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>
Fitattu
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Kwanaki 2 da suka gabata 
<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>

Girman girma

Katuna suna ɗauka babu takamaiman widthdon farawa, don haka za su yi faɗin 100% sai dai in an faɗi. Kuna iya canza wannan kamar yadda ake buƙata tare da CSS na al'ada, azuzuwan grid, grid Sass mixins, ko abubuwan amfani.

Yin amfani da alamar grid

Amfani da grid, kunsa katunan cikin ginshiƙai da layuka kamar yadda ake buƙata.

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Amfani da kayan aiki

Yi amfani da ɗimbin kayan aikin girman girman da ake da su don saita faɗin katin da sauri.

Taken katin

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Maɓalli
Taken katin

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Maɓalli 
<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>

Amfani da CSS na al'ada

Yi amfani da CSS na al'ada a cikin takaddun salon ku ko azaman salon layi don saita faɗin.

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Daidaita rubutu

Kuna iya canza daidaita rubutun kowane kati da sauri-a gaba ɗaya ko takamaiman sassansa-tare da azuzuwan daidaita rubutun mu .

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Ƙara wasu kewayawa zuwa kan kati (ko toshe) tare da abubuwan haɗin nav na Bootstrap .

Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>
Magani na musamman

Tare da rubutu mai goyan baya a matsayin jagorar halitta zuwa ƙarin abun ciki.

Tafi wani wuri 
<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>

Hotuna

Katuna sun haɗa da ƴan zaɓuɓɓuka don aiki tare da hotuna. Zaɓi daga sanya “mafi girman hoto” a kowane ƙarshen katin, lulluɓe hotuna tare da abun cikin katin, ko kawai saka hoton a cikin katin.

Maƙallan hoto

Hakazalika da masu kai da ƙafa, katunan na iya haɗawa da sama da ƙasa “manyan hoto”—hotuna a saman ko kasan katin.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap 
<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-top" alt="...">
</div>

Hoto mai rufi

Juya hoto zuwa bangon katin kuma rufe rubutun katin ku. Dangane da hoton, ƙila ko ƙila kuna buƙatar ƙarin salo ko kayan aiki.

Placeholder Card image
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

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

Lura cewa abun ciki bai kamata ya fi tsayin hoton girma ba. Idan abun ciki ya fi hoton girma za a nuna abun cikin a wajen hoton.

Salon katin

Katuna sun haɗa da zaɓuɓɓuka daban-daban don keɓance asalinsu, iyakoki, da launi.

Baya da launi

Yi amfani da rubutu da bayanan baya don canza kamannin katin.

Kai
Taken katin farko

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin sakandare

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin nasara

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin haɗari

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin gargadi

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin bayanai

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Take katin haske

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin duhu

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

<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>
Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .sr-onlyajin.

Iyaka

Yi amfani da abubuwan amfani kan iyaka don canza kawai border-colorkatin. Lura cewa zaku iya sanya .text-{color}azuzuwan akan iyaye .cardko juzu'in abubuwan da ke cikin katin kamar yadda aka nuna a ƙasa.

Kai
Taken katin farko

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin sakandare

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin nasara

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin haɗari

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin gargadi

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin bayanai

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Take katin haske

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai
Taken katin duhu

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

<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

Hakanan zaka iya canza iyakoki akan taken katin da ƙafa kamar yadda ake buƙata, har ma da cire su background-colortare da .bg-transparent.

Kai
Taken katin nasara

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

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

Tsarin katin

Baya ga salo abun ciki a cikin katunan, Bootstrap ya haɗa da ƴan zaɓuɓɓuka don shimfida jerin katunan. A halin yanzu, waɗannan zaɓuɓɓukan shimfidar wuri ba su da amsa .

Kungiyoyin katin

Yi amfani da ƙungiyoyin kati don yin katunan azaman guda ɗaya, abin da aka haɗe tare da faɗin faɗi da ginshiƙan tsayi daidai. Ƙungiyoyin katin suna amfani display: flex;da su don cimma girman yunifom.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.

An sabunta ta ƙarshe mintuna 3 da suka gabata

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

Lokacin amfani da ƙungiyoyin kati tare da ƙafafu, abun cikin su zai yi layi ta atomatik.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.

An sabunta ta ƙarshe mintuna 3 da suka gabata 
<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>

Katin bene

Kuna buƙatar saitin daidai girman nisa da katunan tsayi waɗanda ba a haɗa su da juna ba? Yi amfani da benen kati.

Placeholder Image cap
Taken katin

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.

An sabunta ta ƙarshe mintuna 3 da suka gabata

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

Kamar dai tare da ƙungiyoyin katin, ƙafafun katin a cikin bene za su yi layi ta atomatik.

Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata
Placeholder Image cap
Taken katin

Wannan babban kati ne tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan katin yana da ma fiye da abun ciki mafi tsayi fiye da na farko don nuna daidai girman aikin.

An sabunta ta ƙarshe mintuna 3 da suka gabata 
<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>

ginshiƙan katin

Ana iya tsara katunan zuwa ginshiƙan Masonry.card-columns -kamar tare da CSS kawai ta hanyar naɗe su cikin . An gina katunan tare da columnkaddarorin CSS maimakon flexbox don sauƙin daidaitawa. Ana yin odar katunan daga sama zuwa ƙasa da hagu zuwa dama.

A kula! Nisan mil ɗin ku tare da ginshiƙan katin na iya bambanta. Don hana karyewar katunan a cikin ginshiƙai, dole ne mu saita su display: inline-blockkamar yadda column-break-inside: avoidba shine mafita ba tukuna.

Placeholder Image cap
Taken katin da ke lulluɓe zuwa sabon layi

Wannan kati ne mai tsayi tare da rubutu mai goyan baya a ƙasa azaman jagorar dabi'a zuwa ƙarin abun ciki. Wannan abun ciki ya ɗan fi tsayi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen
Placeholder Image cap
Taken katin

Wannan katin yana da rubutu mai goyan baya a ƙasa azaman jagorar halitta zuwa ƙarin abun ciki.

An sabunta ta ƙarshe mintuna 3 da suka gabata

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

Wani sananne a Tushen Tushen
Taken katin

Wannan katin yana da take na yau da kullun da gajeriyar sakin layi na rubutu a ƙasansa.

An sabunta ta ƙarshe mintuna 3 da suka gabata

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ƙididdigar ƙididdiga ta ƙididdigewa.

Wani sananne a Tushen Tushen
Taken katin

Wannan wani katin ne mai take da rubutu mai goyan baya a ƙasa. Wannan katin yana da wasu ƙarin abun ciki don sanya shi ɗan tsayi gabaɗaya.

An sabunta ta ƙarshe mintuna 3 da suka gabata

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

Hakanan ana iya tsawaita ginshiƙan katin da keɓancewa tare da wasu ƙarin lamba. Wanda aka nuna a ƙasa shine faɗaɗa .card-columnsajin ta amfani da CSS iri ɗaya da muke amfani da su — ginshiƙan CSS - don samar da saiti na matakan amsawa don canza adadin ginshiƙan.

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