Source

Cards

Kartên Bootstrap bi gelek guherto û vebijarkan konteynirek naverokek maqûl û berfireh peyda dikin.

Ji dor

Kart konteynirek naverokek maqûl û berfireh e . Ew vebijarkên ji bo sernav û pêlavan, cûrbecûr naverok, rengên paşnavê yên naverokê, û vebijarkên pêşandana hêzdar vedihewîne. Heke hûn bi Bootstrap 3-ê dizanin, kartên şûna panelên me yên kevn, kanî û piçûkan digirin. Karbidestên mîna wan pêkhateyan wekî dersên guhêrbar ji bo qertan hene.

Mînak

Kart bi hindik nîşankirin û şêwazên ku gengaz têne çêkirin têne çêkirin, lê dîsa jî rê didin ku tonek kontrol û xwerûkirinê radest bikin. Bi flexbox-ê ve hatî çêkirin, ew lihevhatina hêsan pêşkêşî dikin û bi pêkhateyên din ên Bootstrap re baş tevdigerin. Ew ji marginhêla xwerû ve tune ne, ji ber vê yekê wekî ku hewce be karûbarên valahiyê bikar bînin.

Li jêr mînakek qertek bingehîn bi naverokek tevlihev û firehiyek sabît heye. Kart ji bo destpêkirina firehiya sabît tune, ji ber vê yekê ew ê bi xwezayî tevahî firehiya hêmana dêûbav tijî bikin. Ev bi vebijarkên meyên cûrbecûr yên mezinbûnê re bi hêsanî tête xweş kirin .

Placeholder Image cap
Sernavê karta

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Biçe cihekî 
<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>

Cureyên naverokê

Kart cûrbecûr naverok piştgirî dikin, di nav de wêne, nivîs, komên navnîşan, girêdan, û hêj bêtir. Li jêr mînakên ku piştgirî têne kirin hene.

Beden

Bingeha avakirina kartê ye .card-body. Dema ku hûn di hundurê qertê de hewceyê beşek pêvekirî hewce bikin, wê bikar bînin.

Ev çend nivîsek di nav laşek qertaf de ye. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Sernav, nivîs û girêdan

Sernavên qertê bi lêzêdekirina tagê têne bikar .card-titleanîn <h*>. Bi heman awayî, girêdan têne zêdekirin û bi lêzêdekirina tagek .card-linkli kêleka hev têne danîn .<a>

Binnivîs bi lê zêdekirina a .card-subtitleli <h*>tagekê tê bikaranîn. Ger tişt .card-titleû .card-subtitletişt di babetekê de werin danîn .card-body, sernav û jêrnivîsa qertê bi rengek xweş têne rêz kirin.

Sernavê karta
binnivîsa kartê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Girêdana kartê Girêdana din 
<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>

Images

.card-img-topwêneyek li serê qertê bi cih dike. Bi .card-text, nivîs dikare li qertê were zêdekirin. Nivîsar di hundurê de .card-textdikare bi tagên HTML-ê standard jî were şêwaz kirin.

Placeholder Image cap

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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

Lîsteya komên

Di qertek bi komek navnîşa flush re navnîşên naverokê biafirînin.

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

Lavaboka metbexê

Gelek cûreyên naverokê tevlihev bikin û li hev bikin da ku qerta ku hûn hewce ne biafirînin, an her tiştî bavêjin wir. Li jêr şêwazên wêneyê, blokan, şêwazên nivîsê, û komek navnîşê têne xuyang kirin - hemî di qertek bi firehiya sabît de hatine pêçan.

Placeholder Image cap
Sernavê karta

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum li eros
Girêdana kartê Girêdana din 
<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>

Di nav qertê de sernav û/an pêlavek vebijarkî lê zêde bikin.

Featured
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Sernivîsên qertê dikarin bi lêzêdekirina hêmanan .card-headerwerin şêwaz kirin.<h*>

Featured
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>
Pêşnîyarîya bedelê

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

Kesek di Sernavê Çavkaniyê de navdar e 
<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>
Featured
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
2 roj berê 
<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>

Mezinbûn

Kart ji widthbo destpêkirinê ne diyar in, ji ber vê yekê ew ê 100% fireh bin heya ku wekî din neyê gotin. Hûn dikarin vê yekê wekî ku hewce bike bi CSS-ya xwerû, dersên torê, mîksên Sass-a grid, an karûbaran biguhezînin.

Bikaranîna nîşankirina torê

Bi karanîna torê, li gorî hewcedariyê qertan di stûn û rêzan de bipêçin.

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Utilities bi kar tînin

Destûra meya karûbarên mezinbûnê yên berdest bikar bînin da ku bi lez firehiya qertê destnîşan bikin.

Sernavê karta

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Pişkov
Sernavê karta

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Pişkov 
<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>

Bikaranîna CSS-ya xwerû

CSS-ya xwerû di şêwazên xwe de an wekî şêwazên hundurîn bikar bînin da ku firehiyek saz bikin.

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Lihevkirina nivîsê

Hûn dikarin bi dersên meya hevrastkirina nivîsê re bi lez hevrêziya nivîsê ya her qertê-bi tevahî an beşên taybetî- biguhezînin .

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Bi hêmanên navikê yên Bootstrap re hin navîgasyon li sernavê (an blokê) qertakê zêde bikin .

Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>
Dermankirina sernavê taybetî

Bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde.

Biçe cihekî 
<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>

Images

Kartên ji bo xebata bi wêneyan re çend vebijark vedigirin. Ji pêvekirina "capên wêneyê" li her du dawiya qertekê hilbijêrin, wêneyan bi naveroka qertê ve girêbidin, an jî bi tenê wêneyê di qertê de bihêlin.

Caps Wêne

Mîna sernivîs û pêlavan, kartên dikarin "kapên wêneyê" yên jorîn û jêrîn -wêneyên li jor an binê qertê bihewînin.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

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>

Zêdekirina wêneyan

Wêneyek veguherînin paşpirtûka qerta xwe û nivîsa qerta xwe bixin. Bi wêneyê ve girêdayî, dibe ku hûn hewceyê şêwaz an karûbarên zêde nebin an ne hewce ne.

Placeholder Card image
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

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

Têbînî ku naverok divê ji bilindahiya wêneyê mezintir nebe. Ger naverok ji wêneyê mezintir be dê naverok li derveyî wêneyê were xuyang kirin.

şêwazên kartê

Kart vebijarkên cihêreng ên ji bo xweşkirina paşeroj, sînor û rengê wan vedigirin.

Paşnav û reng

Karûbarên nivîs û paşîn bikar bînin da ku xuyangê qertê biguhezînin.

Header
Sernavê karta seretayî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta duyemîn

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta Serkeftinê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta xeterê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta hişyariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta agahdariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta ronahî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta tarî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

<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>
Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.

Hidûd

Karûbarên sînor bikar bînin da ku tenê qertek biguhezînin border-color. Bala xwe bidinê ku hûn dikarin .text-{color}dersên li ser dêûbav .cardan binekomek naveroka qertê bidin wekî ku li jêr tê xuyang kirin.

Header
Sernavê karta seretayî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta duyemîn

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta Serkeftinê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta xeterê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta hişyariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta agahdariyê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta ronahî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

Header
Sernavê karta tarî

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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

Karûbaran tevlihev dike

Her weha hûn dikarin li gorî hewcedariyê tixûbên li ser serê kartê û pêlavê biguhezînin, û tewra wan jî background-colorbi .bg-transparent.

Header
Sernavê karta Serkeftinê

Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.

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

layout karta

Ji bilî şêwaza naverokê di nav qertafan de, Bootstrap çend vebijarkan ji bo danîna rêzikên qertan vedihewîne. Heya nuha, van vebijarkên sêwiranê hîna ne bersivdar in.

Komên karta

Komên kartê bikar bînin da ku qertan wekî hêmanek yekane, pêvekirî bi stûnên pehnahî û bilindahiyê wekhev bikin. Komên qertê display: flex;ji bo bidestxistina mezinahiya xwe ya yekreng bikar tînin.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.

Herî dawî 3 deqîqe berê hate nûkirin

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

Dema ku komên qerta bi pêpelokan re bikar bînin, naveroka wan dê bixweber rêz bibe.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.

Herî dawî 3 deqîqe berê hate nûkirin 
<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>

Decks karta

Pêdivî ye ku komek kartên firehî û bilindahiya wekhev ên ku bi hev ve neyên girêdan? Kartên kartê bikar bînin.

Placeholder Image cap
Sernavê karta

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin

Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.

Herî dawî 3 deqîqe berê hate nûkirin

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

Mîna komên qertê, pêlavên qerta di deqan de dê bixweber rêz bibin.

Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin
Placeholder Image cap
Sernavê karta

Ev qertek firehtir e ku bi nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde ye. Naveroka vê kartê ji ya yekem dirêjtir e ku çalakiya bilindahiya wekhev nîşan dide.

Herî dawî 3 deqîqe berê hate nûkirin 
<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>

stûnên karta

Kartên tenê bi CSS-ê bi pêçandina wan di nav stûnên mîna Masonrî de têne organîze.card-columns kirin . Kart bi taybetmendiyên CSS-ê columnli şûna flexbox-ê ji bo lihevhatina hêsantir têne çêkirin. Kart ji serî heta binî û çep ber rast têne rêz kirin.

Serê xwe! Rêjeya weya bi stûnên kartê dibe ku cûda bibe. Ji bo ku rê li ber şikandina qertan li ser stûnan bigirin, divê em wan saz bikin display: inline-blockwekî column-break-inside: avoidku hêj ne çareseriyek gulebaranê ye.

Placeholder Image cap
Sernavê qertê ku bi rêzek nû ve girêdayî ye

Ev qertek dirêjtir e ku bi nivîsa piştgirî ya jêrîn wekî rêvekek xwezayî ya naverokek zêde ye. Ev naverok hinekî dirêj e.

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

Kesek di Sernavê Çavkaniyê de navdar e
Placeholder Image cap
Sernavê karta

Vê qertê nivîsa piştgirî ya li jêr wekî rêgezek xwezayî ya naverokek zêde heye.

Herî dawî 3 deqîqe berê hate nûkirin

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

Kesek di Sernavê Çavkaniyê de navdar e
Sernavê karta

Vê kartê sernavek birêkûpêk û paragrafek kurt a nivîsê li binê wê heye.

Herî dawî 3 deqîqe berê hate nûkirin

Placeholder Card image

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

Kesek di Sernavê Çavkaniyê de navdar e
Sernavê karta

Ev qertek din a bi sernav û nivîsa piştgirî ya li jêr e. Vê qertê hin naverokek zêde heye da ku wê bi giştî hinekî dirêjtir bike.

Herî dawî 3 deqîqe berê hate nûkirin

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

Stûnên qertê jî dikarin bi hin kodên din ve werin dirêj kirin û xweş kirin. Li jêr tê xuyang kirin dirêjkirinek .card-columnspolê ye ku bi karanîna heman CSS-a ku em bikar tînin-stûnên CSS- bikar tîne da ku komek rêzikên bersivdar ji bo guheztina hejmara stûnan biafirînin.

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