Kaadị

Kaadị Bootstrap na-enye akpa ọdịnaya na-agbanwe agbanwe yana ọtụtụ ụdị na nhọrọ.

Ihe gbasara

Kaadị bụ akpa ọdịnaya na-agbanwe agbanwe na nke enwere ike ịgbanyụ . Ọ na-agụnye nhọrọ maka nkụnye eji isi mee na footers, ụdị ọdịnaya dị iche iche, agba ndabere gburugburu, yana nhọrọ ngosi dị ike. Ọ bụrụ na ị maara nke ọma na Bootstrap 3, kaadị na-edochi ogwe ochie, olulu mmiri, na thumbnails anyị. Ọrụ yiri nke akụrụngwa ndị ahụ dị ka klaasị modifier maka kaadị.

Ọmụmaatụ

Ejiri obere akara na ụdị dị ka o kwere mee, mana ka jikwaa wepụta ọtụtụ njikwa na nhazi. Ejiri flexbox rụọ ya, ha na-enye nhazi dị mfe ma jikọta ya na ihe ndị ọzọ Bootstrap. Ha enweghị marginna ndabara, yabụ jiri akụrụngwa oghere dị ka achọrọ.

N'okpuru ebe a bụ ọmụmaatụ nke kaadị isi nwere ọdịnaya agwakọtara yana obosara edoziri. Kaadị enweghị obosara a kapịrị ọnụ ka ọ ga-amalite, yabụ na ha ga-eju oke obosara nke mmewere nne na nna ya. Nke a na-adị mfe ahaziri na anyị dị iche iche size nhọrọ .

Aha kaadị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

Gaa ebe

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

Ụdị ọdịnaya

Kaadị na-akwado ọdịnaya dị iche iche, gụnyere onyonyo, ederede, otu ndepụta, njikọ na ndị ọzọ. N'okpuru bụ ọmụmaatụ nke ihe akwadoro.

Ahụ

Ihe mgbochi ụlọ nke kaadị bụ .card-body. Jiri ya mgbe ọ bụla ịchọrọ mpaghara padded n'ime kaadị.

Nke a bụ ụfọdụ ederede n'ime ahụ kaadị.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Aha, ederede na njikọ

A na-eji aha kaadị site na ịgbakwunye .card-titlena <h*>mkpado. N'otu aka ahụ, a na-agbakwunye njikọ ma tinye ya n'akụkụ ibe ya site n'ịgbakwunye .card-linkna <a>mkpado.

.card-subtitleA na-eji ndepụta okwu site na ịgbakwunye <h*>mkpado. Ọ bụrụ na etinye ihe .card-titlena .card-subtitleihe ndị ahụ n'ime .card-bodyihe, aha kaadị na ndepụta okwu ahaziri nke ọma.

Aha kaadị

Ndepụta kaadị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

Njikọ kaadị Njikọ ọzọ

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

Onyonyo

.card-img-toptinye ihe onyonyo n'elu kaadị ahụ. Na .card-text, enwere ike itinye ederede na kaadị. Ederede dị n'ime .card-textnwekwara ike iji mkpado HTML mara mma.

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

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

Ndepụta otu

Mepụta ndepụta nke ọdịnaya dị na kaadị nwere otu ndepụta mkpofu.

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

Egosiputara

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

Sink kichin

Gwakọta ma dakọtara ọtụtụ ụdị ọdịnaya iji mepụta kaadị ịchọrọ, ma ọ bụ tụba ihe niile n'ebe ahụ. Egosiri n'okpuru bụ ụdị onyonyo, ngọngọ, ụdị ederede, na otu ndepụta-ha niile ejiri kaadị obosara kapịrị ọnụ.

Aha kaadị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

Cras justo odio
Dapibus ac facilisis na
Vestibulum na eros

Njikọ kaadị Njikọ ọzọ

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

nkụnye eji isi mee na n'okpuru

Tinye nkụnye eji isi mee nhọrọ na/ma ọ bụ n'okpuru n'ime kaadị.

Egosiputara

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

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

Enwere ike ịhazi isi kaadị site na ịgbakwunye .card-headerihe <h*>.

Egosiputara

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

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

Kwuo okwu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

Onye ama ama na Isi mmalite

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

Egosiputara

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

2 ụbọchị gara aga

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

Nha nha

Kaadị na-eche na ọ nweghị kpọmkwem widthịmalite, yabụ na ha ga-adị 100% obosara ma ọ bụrụ na ekwughị ya. Ị nwere ike ịgbanwe nke a dịka ọ dị mkpa site na iji CSS omenala, klas grid, grid Sass mixins, ma ọ bụ akụrụngwa.

Iji akara akara grid

Iji grid, kechie kaadị na kọlụm na ahịrị dị ka achọrọ.

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

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

Iji akụrụngwa

Jiri obere ngwa nha nha dịnụ iji tọọ obosara kaadị ngwa ngwa.

Aha kaadị

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Bọtịnụ

Aha kaadị

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Bọtịnụ

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

Iji CSS omenala

Jiri CSS omenala n'ụdị ụdị gị ma ọ bụ dị ka ụdị inline iji tọọ obosara.

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

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

Ndozi ederede

Ị nwere ike gbanwee nhazi ederede nke kaadị ọ bụla ngwa ngwa-n'ozuzu ya ma ọ bụ akụkụ ya kpọmkwem-na klaasị ederede anyị kwadoro .

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

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

Tinye ụfọdụ igodo na nkụnye eji isi mee (ma ọ bụ ngọngọ) nke nwere ihe ndị ọzọ Bootstrap's nav .

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

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

Ọgwụgwọ aha pụrụ iche

Site na ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Gaa ebe

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

Onyonyo

Kaadị gụnyere nhọrọ ole na ole maka iji onyonyo rụọ ọrụ. Họrọ site na itinye “okpu onyonyo” na nsọtụ kaadị, machie onyonyo na ọdịnaya kaadị, ma ọ bụ naanị tinye onyonyo a na kaadị.

Ihe onyonyo

Dị ka nkụnye eji isi mee na n'okpuru ụkwụ, kaadị nwere ike ịgụnye "okpu ihe oyiyi" elu na ala - oyiyi dị n'elu ma ọ bụ ala nke kaadị.

Aha kaadị

Nke a bụ kaadị sara mbara nke nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga na ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Nke a bụ kaadị sara mbara nke nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga na ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Emelitere ikpeazụ nkeji 3 gara aga

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

Mkpuchi onyonyo

Tụgharịa onyonyo ka ọ bụrụ ndabere kaadị wee machie ederede kaadị gị. Dabere na onyonyo a, ị nwere ike ma ọ bụ ọ gaghị achọ ụdị ma ọ bụ akụrụngwa ndị ọzọ.

Aha kaadị

Nke a bụ kaadị sara mbara nke nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga na ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Emelitere ikpeazụ nkeji 3 gara aga

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

Ụdị kaadị

Kaadị gụnyere nhọrọ dị iche iche maka ịhazi nzụlite ha, oke na agba ha.

Okirikiri na agba

Jiri ngwa ederede na ndabere iji gbanwee ọdịdị kaadị.

nkụnye eji isi mee

Aha kaadị izizi

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị nke abụọ

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ịga nke ọma

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị egwu

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ịdọ aka ná ntị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ozi

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ọkụ

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị gbara ọchịchịrị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

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

Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .sr-onlyklaasị.

Oke

Jiri akụrụngwa oke ala iji gbanwee naanị border-colorkaadị. Rịba ama na ị nwere ike itinye .text-{color}klaasị na nne na nna .cardma ọ bụ akụkụ nke ọdịnaya kaadị dị ka egosiri n'okpuru.

nkụnye eji isi mee

Aha kaadị izizi

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị nke abụọ

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ịga nke ọma

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị egwu

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ịdọ aka ná ntị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ozi

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị ọkụ

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

nkụnye eji isi mee

Aha kaadị gbara ọchịchịrị

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

<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

Ị nwekwara ike ịgbanwe oke na nkụnye eji isi mee na n'okpuru kaadị dịka achọrọ, na ọbụna wepụ ha background-colorna .bg-transparent.

nkụnye eji isi mee

Aha kaadị ịga nke ọma

Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.

Onye n'okpuru

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

Nhazi kaadị

Na mgbakwunye na ịhazi ọdịnaya n'ime kaadị, Bootstrap gụnyere nhọrọ ole na ole maka ịtọpụta usoro kaadị. Maka oge a, nhọrọ nhazi ndị a anabatabeghị .

Otu kaadị

Jiri otu kaadị mee kaadị ka ọ bụrụ otu ihe agbakwunyere nwere obosara na kọlụm ịdị elu nhata. Otu kaadị na-eji display: flex;nweta nha nke otu ha.

Aha kaadị

Nke a bụ kaadị sara mbara nke nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga na ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Kaadị a nwere ederede nkwado dị n'okpuru ebe a dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Nke a bụ kaadị sara mbara nke nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga na ọdịnaya agbakwunyere. Kaadị a nwere ọdịnaya dị ogologo karịa nke mbụ iji gosi na arụ ọrụ ịdị elu hà nhata.

Emelitere ikpeazụ nkeji 3 gara aga

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

Mgbe ị na-eji otu kaadị nwere ụkwụ ụkwụ, ọdịnaya ha ga-agbakọ ozugbo.

Aha kaadị

Nke a bụ kaadị sara mbara nke nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga na ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Kaadị a nwere ederede nkwado dị n'okpuru ebe a dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Emelitere ikpeazụ nkeji 3 gara aga

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

Ụgbọ ala kaadị

Achọrọ kaadị obosara nhata nhata na ịdị elu nke anaghị ejikọta ibe ya? Jiri oche kaadị.

Aha kaadị

Nke a bụ kaadị dị ogologo nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Kaadị a nwere ederede nkwado dị n'okpuru ebe a dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Emelitere ikpeazụ nkeji 3 gara aga

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

Dị ka ọ dị na otu kaadị, ndị na-agba kaadị na oche ga-ada n'ahịrị ozugbo.

Aha kaadị

Nke a bụ kaadị sara mbara nke nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga na ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Kaadị a nwere ederede nkwado dị n'okpuru ebe a dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Emelitere ikpeazụ nkeji 3 gara aga

Aha kaadị

Emelitere ikpeazụ nkeji 3 gara aga

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

Ogidi kaadị

Enwere ike ịhazi kaadị ka ọ bụrụ kọlụm Masonry -dị ka ogidi nwere naanị CSS site na ijichi ha na .card-columns. Ejiri akụrụngwa CSS rụọ kaadị columnkama iji flexbox maka itinye n'ụzọ dị mfe. A na-enye iwu kaadị site n'elu ruo na ala na aka ekpe gaa n'aka nri.

Welie isi elu! Ogologo gị nwere ogidi kaadị nwere ike ịdị iche. Iji gbochie kaadị ịgbaji n'ofe ogidi, anyị ga-edobe ha display: inline-blockka column-break-inside: avoidọ bụghị ihe ngwọta na-egbochi mgbọ.

Aha kaadị nke jikọtara na ahịrị ọhụrụ

Nke a bụ kaadị dị ogologo nwere ederede nkwado dị n'okpuru dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere. Ọdịnaya a dị ntakịrị ogologo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

Onye ama ama na Isi mmalite

Aha kaadị

Kaadị a nwere ederede nkwado dị n'okpuru ebe a dị ka ụzọ ebumpụta ụwa na-eduga n'ime ọdịnaya agbakwunyere.

Emelitere ikpeazụ nkeji 3 gara aga

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ọnụ ego ọnụọgụ ọnụọgụgụ.

Onye ama ama na Isi mmalite

Aha kaadị

Kaadị a nwere aha oge niile yana nkeji ederede n'okpuru ya.

Emelitere ikpeazụ nkeji 3 gara aga

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

Onye ama ama na Isi mmalite

Aha kaadị

Nke a bụ kaadị ọzọ nwere aha na ederede nkwado n'okpuru. Kaadị a nwere ụfọdụ ọdịnaya agbakwunyere iji mee ka ọ dị ntakịrị ogologo n'ozuzu ya.

Emelitere ikpeazụ nkeji 3 gara aga

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

Enwere ike ịgbatị na kọlụm kaadị yana koodu agbakwunyere. Egosiri n'okpuru bụ ndọtị nke .card-columnsklaasị na-eji otu CSS anyị na-eji — kọlụm CSS—iji mepụta otu ọkwa na-anabata maka ịgbanwe ọnụọgụ kọlụm.

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

Kaadị

Ihe gbasara

Ọmụmaatụ

Aha kaadị

Ụdị ọdịnaya

Ahụ

Aha, ederede na njikọ

Aha kaadị

Ndepụta kaadị

Onyonyo

Ndepụta otu

Sink kichin

Aha kaadị

nkụnye eji isi mee na n'okpuru

Ọgwụgwọ aha pụrụ iche

Egosiputara

Ọgwụgwọ aha pụrụ iche

Ọgwụgwọ aha pụrụ iche

Nha nha

Iji akara akara grid

Ọgwụgwọ aha pụrụ iche

Ọgwụgwọ aha pụrụ iche

Iji akụrụngwa

Aha kaadị

Aha kaadị

Iji CSS omenala

Ọgwụgwọ aha pụrụ iche

Ndozi ederede

Ọgwụgwọ aha pụrụ iche

Ọgwụgwọ aha pụrụ iche

Ọgwụgwọ aha pụrụ iche

Nsoro ụzọ

Ọgwụgwọ aha pụrụ iche

Ọgwụgwọ aha pụrụ iche

Onyonyo

Ihe onyonyo

Aha kaadị

Aha kaadị

Mkpuchi onyonyo

Aha kaadị

Ụdị kaadị

Okirikiri na agba

Aha kaadị izizi

Aha kaadị nke abụọ

Aha kaadị ịga nke ọma

Aha kaadị egwu

Aha kaadị ịdọ aka ná ntị

Aha kaadị ozi

Aha kaadị ọkụ

Aha kaadị gbara ọchịchịrị

Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Oke

Aha kaadị izizi

Aha kaadị nke abụọ

Aha kaadị ịga nke ọma

Aha kaadị egwu

Aha kaadị ịdọ aka ná ntị

Aha kaadị ozi

Aha kaadị ọkụ

Aha kaadị gbara ọchịchịrị

Mixins utilities

Aha kaadị ịga nke ọma

Nhazi kaadị

Otu kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Ụgbọ ala kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Aha kaadị

Ogidi kaadị

Aha kaadị nke jikọtara na ahịrị ọhụrụ

Aha kaadị