Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

Kaadị

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

Na ibe a

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

Placeholder Image cap
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 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>

Ụdị ọdịnaya

Kaadị na-akwado ụdị ọ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 ịgbakwunye ederede na kaadị. Ederede dị n'ime .card-textnwekwara ike iji mkpado HTML mara mma.

Placeholder Image cap

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

Ndepụta otu

Mepụta ndepụta nke ọdịnaya na kaadị nwere otu ndetu na-ekpochapụ.

  • Otu ihe
  • Ihe nke abụọ
  • Ihe nke atọ
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Egosiputara
  • Otu ihe
  • Ihe nke abụọ
  • Ihe nke atọ
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Otu ihe
  • Ihe nke abụọ
  • Ihe nke atọ
Ụkwụ kaadị 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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

Placeholder Image cap
Aha kaadị

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

  • Otu ihe
  • Ihe nke abụọ
  • Ihe nke atọ
Njikọ kaadị Njikọ ọzọ 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.

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>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tinye ụfọdụ igodo na nkụnye eji isi mee (ma ọ bụ ngọngọ) nke nwere ihe nkesa 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" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Ọ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">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 arụ ọrụ. Họrọ site na itinye “okpu onyonyo” n'akụkụ abụọ nke kaadị, machie onyonyo na ọdịnaya kaadị, ma ọ bụ naanị tinye onyonyo na kaadị.

Ihe onyonyo

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

Placeholder Image cap
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

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-bottom" alt="...">
</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ọ.

Placeholder Card image
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 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>
Mara na ọdịnaya ekwesịghị ibu karịa ịdị elu nke onyonyo a. Ọ bụrụ na ọdịnaya buru ibu karịa onyonyo a ga-egosipụta ọdịnaya ahụ na mpụga onyonyo a.

Kehoraizin

Iji ngwakọta nke grid na klaasị ịba uru, kaadị nwere ike mee ka ọ kwụ n'ahịrị n'ụzọ enyi na enyi na-anabata. N'ihe atụ dị n'okpuru ebe a, anyị na-ewepụ grid gutters .g-0ma jiri .col-md-*klaasị mee ka kaadị ahụ kwụ ọtọ na ebe mdnkwụsịtụ. Enwere ike ime mgbanwe ndị ọzọ dabere na ọdịnaya kaadị gị.

Placeholder Image
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" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Ụdị kaadị

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

Okirikiri na agba

Jiri ụcha ederede na akụrụngwa ndabere iji gbanwee ọdịdị nke 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-dark 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-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark 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 .visually-hiddenklaasị.

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">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins utilities

Ị 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 ejikọrọ nwere obosara na kọlụm ịdị elu nhata. Otu kaadị na-amalite na ekpokọtara ọnụ ma jiri display: flex;ya na-ejikọta ya na nha otu na-amalite na ebe smnkwụsịtụ.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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 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>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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 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>

Kaadị grid

Jiri sistemu grid Bootstrap na .row-colsklaasị ya iji jikwaa ọtụtụ kọlụm grid (gbachiri gburugburu kaadị gị) ị na-egosi kwa ahịrị. Dịka ọmụmaatụ, ebe a bụ .row-cols-1ịtọpụ kaadị ndị ahụ n'otu kọlụm, na .row-cols-md-2kewaa kaadị anọ ka ha nhata n'obosara gafee ọtụtụ ahịrị, site na nkwụsị nke ọkara.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Gbanwee ya .row-cols-3na ị ga-ahụ mkpuchi kaadị nke anọ.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
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.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Mgbe ịchọrọ nha nha nha, gbakwunye .h-100na kaadị ndị ahụ. Ọ bụrụ na ịchọrọ nha nha nha site na ndabara, ị nwere ike ịtọ $card-height: 100%na Sass.

Placeholder Image cap
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.

Placeholder Image cap
Aha kaadị

Nke a bụ obere kaadị.

Placeholder Image cap
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.

Placeholder Image cap
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.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

N'ime v4anyị na-eji usoro CSS naanị iji ṅomie omume nke kọlụm Masonry -dị ka kọlụm, mana usoro a nwere ọtụtụ mmetụta na-adịghị mma . Ọ bụrụ na ịchọrọ inwe ụdị nhazi a na v5, ị nwere ike iji ngwa mgbakwunye Masonry. Masonry adịghị etinye na Bootstrap , mana anyị emeela ihe ngosi ngosi iji nyere gị aka ibido.

Sass

Mgbanwe

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;