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ị margin
na 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. A na-ahazi nke a n'ụzọ dị mfe site na nhọrọ nha anyị dị iche iche .
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ị.
<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-title
na <h*>
mkpado. N'otu aka ahụ, a na-agbakwunye njikọ ma tinye ya n'akụkụ ibe ya site n'ịgbakwunye .card-link
na <a>
mkpado.
.card-subtitle
A na-eji ndepụta okwu site na ịgbakwunye <h*>
mkpado. Ọ bụrụ na etinye ihe .card-title
na .card-subtitle
ihe ndị ahụ n'ime .card-body
ihe, 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-top
tinye ihe onyonyo n'elu kaadị ahụ. Na .card-text
, enwere ike itinye ederede na kaadị. Ederede dị n'ime .card-text
nwekwara 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 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 dị na kaadị nwere otu ndepụta mkpofu.
- 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>
- 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ọ
<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ụ.
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ọ
<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>
nkụnye eji isi mee na n'okpuru
Tinye nkụnye eji isi mee nhọrọ na/ma ọ bụ n'okpuru n'ime kaadị.
Ọ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-header
ihe <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>
Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.
<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>
Ọ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">
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ọ.
<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>
Nsoro ụzọ
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">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 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 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ọ.
<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>
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 .no-gutters
na-eji .col-md-*
klaasị mee ka kaadị ahụ kwụ n'ahịrị na ebe md
nkwụsịtụ. Enwere ike ime mgbanwe ndị ọzọ dabere na ọdịnaya kaadị gị.
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 no-gutters">
<div class="col-md-4">
<img src="..." 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 ngwa ederede na ndabere iji gbanwee ọdịdị kaadị.
Aha kaadị izizi
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
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ụ.
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ụ.
Aha kaadị egwu
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
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ụ.
Aha kaadị ozi
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
Aha kaadị ọkụ
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
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-only
klaasị.
Oke
Jiri akụrụngwa oke ala iji gbanwee naanị border-color
kaadị. Rịba ama na ị nwere ike itinye .text-{color}
klaasị na nne na nna .card
ma ọ bụ akụkụ nke ọdịnaya kaadị dị ka egosiri n'okpuru.
Aha kaadị izizi
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
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ụ.
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ụ.
Aha kaadị egwu
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
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ụ.
Aha kaadị ozi
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
Aha kaadị ọkụ
Ụfọdụ ederede ihe atụ ngwa ngwa iji wuo n'aha kaadị ma mejupụta nnukwu ọdịnaya nke kaadị ahụ.
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-color
na .bg-transparent
.
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ụ.
<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 display: flex;
na-ejikọta ya na nha otu na-amalite na ebe sm
nkwụsịtụ.
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 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.
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.
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.
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.
<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>
Ụ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ị
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-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>
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.
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.
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.
<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>
Kaadị grid
Jiri sistemu grid Bootstrap na .row-cols
klaasị 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-2
kewaa kaadị anọ ka ha nhata n'obosara gafee ọtụtụ ahịrị, site na nkwụsị nke ọkara.
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.
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.
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.
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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-3
na ị ga-ahụ mkpuchi kaadị nke anọ.
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.
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.
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.
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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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-100
na kaadị ndị ahụ. Ọ bụrụ na ịchọrọ nha nha nha site na ndabara, ị nwere ike ịtọ $card-height: 100%
na Sass.
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.
Aha kaadị
Nke a bụ obere 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.
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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>
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ị column
kama 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-block
ka 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.
Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.
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
Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.
Aha kaadị
Kaadị a nwere aha oge niile yana nkeji ederede n'okpuru ya.
Emelitere ikpeazụ nkeji 3 gara aga
Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.
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 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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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-columns
klaasị 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;
}
}