Bakarte
Ba cartes ya Bootstrap epesaka conteneur ya contenus flexible et extensible na ba variantes na ba options ebele.
Pene
Carte ezali récipient ya contenus flexible mpe extensible. Ezali na ba options ya ba têtes na ba footers, ba contenus ndenge na ndenge, ba couleurs ya fond contextuel, mpe ba options ya écran ya makasi. Soki oyebi Bootstrap 3, ba cartes ezo remplacer ba panneaux na biso ya kala, ba puits, na ba miniatures. Fonctionnalité ya ndenge moko na ba composants wana ezali disponible lokola ba classes modificateurs pona ba cartes.
Ndakisa
Ba cartes etongami na marquage mpe ba styles moke lokola ekoki, kasi ba réussir kaka kopesa tonne ya contrôle mpe personnalisation. Etongami na flexbox, bapesaka alignment facile mpe basangisaka malamu na ba composants mosusu ya Bootstrap. Bazali na te marginpar défaut, yango wana salela ba utilitaires ya espacement soki esengeli.
Awa na nse ezali na ndakisa ya karte ya moboko oyo ezali na makambo oyo esangani mpe na bonene oyo etɛngamá te. Ba cartes ezalaka na largeur fixe te pona kobanda, donc bakotondisa naturellement largeur mobimba ya élément parent na yango. Yango ezali facilement personnalisé na ba options na biso ya dimensionnement ndenge na ndenge .
Titre ya karte
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Kende esika moko boye<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>Mitindo ya makambo oyo ezali na kati
Bakarte esalisaka makambo ndenge na ndenge, na ndakisa bililingi, makomi, bituluku ya baliste, ba liens, mpe makambo mosusu. Awa na se ezali na bandakisa ya oyo esungami.
Nzoto
Bloc de construction ya carte ezali .card-body. Salelá yango ntango nyonso oyo ozali na mposa ya eteni oyo ezali na biloko oyo ezali na kati ya karte.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Mitó ya makambo, makomi, mpe ba liens
Batitre ya bakarte esalelamaka na kobakisáká .card-titlena <h*>elembo moko. Ndenge moko mpe, babakisaka ba liens mpe batyaka yango pembenipembeni ya mosusu na kobakisáká .card-linkyango na <a>elembo moko.
Ba sous-titres esalelamaka na kobakisa a .card-subtitlena <h*>tag. Soki .card-titlempe .card-subtitlebiloko yango etyami na .card-bodyeloko moko, motó ya likambo ya karte mpe motó ya likambo ya moke ekozala na molɔngɔ malamu.
Titre ya karte
Sous-titre ya carte
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Lien ya carte Lien mosusu<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>Bililingi
.card-img-topetie elilingi moko na likoló ya karte. Na .card-text, bakoki kobakisa makomi na karte. Texte na kati .card-textekoki pe kozala styled na ba balises HTML standard.
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
<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>Liste ya ba groupes
Salá ba liste ya makambo oyo ezali na kati ya karte oyo ezali na etuluku ya liste ya flush.
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
<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>- Eloko moko
- Eloko ya mibale
- Eloko ya misato
<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>- Eloko moko
- Eloko ya mibale
- Eloko ya misato
<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>Evier ya cuisine
Sangisa mpe kosangisa mitindo ya makambo mingi mpo na kosala karte oyo osengeli na yango, to kobwaka biloko nyonso kuna. Emonisami awa na nse mitindo ya bililingi, ba blocs, mitindo ya makomi, mpe etuluku ya liste —nyonso ezingami na karte ya bonene oyo ebongwani te.
Titre ya karte
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
- Eloko moko
- Eloko ya mibale
- Eloko ya misato
<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>Motó ya likambo mpe na nse ya lokasa
Bakisa motó ya likambo mpe/to nse ya lokasa oyo okoki kopona na kati ya karte.
Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Ba têtes ya carte ekoki kozala styled na kobakisa .card-headerna <h*>ba éléments.
Ezali na esika oyo balobeli
Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.
<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>Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Kosala bonene ya biloko
Ba cartes ba assumer spécifique te widthpona kobanda, donc bakozala 100% large sauf soki elobami ndenge mosusu. Okoki kobongola yango ndenge esengeli na CSS ya momesano, ba kelasi ya grille, ba mixins ya Sass ya grille, to ba utilitaires.
Kosalela bilembo ya grille
Na kosaleláká grille, zingá bakarte na makonzí mpe na milɔngɔ soki esengeli.
Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boyeTraitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Kosalela ba utilités
Salelá mwa ndambo ya biloko na biso ya kosala bonene oyo ezali mpo na kotya nokinoki bonene ya karte.
<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>Kosalela CSS oyo esalemi na kolanda bamposa ya moto
Salelá CSS personnalisé na ba feuilles na yo ya style to lokola ba styles ya kati mpo na kotya bonene.
Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Kobongisa makomi
Okoki kobongola nokinoki ndenge ya kobongola makomi ya karte nyonso —na mobimba to biteni na yango ya sikisiki —na bakelasi na biso ya kobongola makomi .
Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boyeTraitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boyeTraitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Navigation ya motuka
Bakisa mwa navigation na tête (to bloc) ya carte na ba composants nav ya Bootstrap .
Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Traitement spécial ya titre
Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Kende esika moko boye<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>Bililingi
Bakarte ezali na mwa makambo oyo okoki kopona mpo na kosala na bililingi. Poná kati na kobakisa “ba caps ya bililingi” na nsuka nyonso mibale ya karte, kozipa bililingi na makambo oyo ezali na karte, to kaka kotya elilingi yango na karte.
Ba caps ya bilili
Ndenge moko na mitó ya makambo mpe na nse ya lokasa, bakarte ekoki kozala na likoló mpe na nse “bakɛtɛ ya bililingi” —bililingi oyo ezali likoló to na nse ya karte.
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Dernière mise à jour 3 mins eleki
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Dernière mise à jour 3 mins eleki
<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>Ba superpositions ya bilili
Bongola elilingi moko na fond ya karte mpe tyá makomi ya karte na yo. Na kotalela elilingi, okoki to te kozala na mposa ya ba styles to ba utilités ya kobakisa.
<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>Ya kolala
Na kosaleláká kosangisa bakelasi ya grille mpe ya utilité, bakarte ekoki kosalama na ngámbo oyo ezali na ngámbo oyo ezali na boyokani na telefone mpe oyo ekoyanola. Na ndakisa oyo ezali awa na nse, tolongoli ba gouttières ya grille na .no-guttersmpe tosalelaka .col-md-*ba classes mpo na kosala carte horizontale na mdpoint de rupture. Ekoki kosɛnga kobongisa makambo mosusu na kotalela makambo oyo ezali na karte na yo.
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Dernière mise à jour 3 mins eleki
<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>Mitindo ya bakarte
Bakarte ezali na makambo ndenge na ndenge oyo okoki kopona mpo na kobongisa makambo oyo ezali na nsima, bandelo na yango mpe langi na yango.
Fond mpe langi
Salelá ba utilitaires ya texte mpe ya fond mpo na kobongola ndenge karte ezali komonana.
Titre ya carte ya liboso
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte secondaire
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya succès
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya danger
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya likebisi
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya info
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya lumière
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya molili
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
<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>Kopesa ndimbola na ba technologies ya kosunga
Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .sr-onlykelasi.
Ndelo
Salelá ba utilitaires ya ndelo mpo na kobongola kaka border-colorya karte moko. Yebá ete okoki kotya .text-{color}bakelasi na moboti .cardto na mwa ndambo ya makambo oyo ezali na karte ndenge emonisami awa na nse.
Titre ya carte ya liboso
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte secondaire
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya succès
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya danger
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya likebisi
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya info
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya lumière
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Titre ya carte ya molili
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
<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 ba utilités
Okoki mpe kobongola bandelo na motó ya karte mpe na nse ya lokasa soki esengeli, mpe ata kolongola yango background-colorna .bg-transparent.
Titre ya carte ya succès
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
<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>Ndenge ya kosala bakarte
En plus ya styling ya contenus na kati ya ba cartes, Bootstrap ezali na mua ba options pona ko lancer ba série ya ba cartes. Mpo na ntango oyo, ba options oyo ya layout ezali nanu ko répondre te .
Bituluku ya bakarte
Salelá bituluku ya bakarte mpo na komonisa bakarte lokola eloko moko oyo ekangami na makonzí ya bonene mpe ya bosanda ekokani. Ba groupes ya carte ebandi na ebele mpe esalela display: flex;mpo na kokoma attaché na ba dimensions uniformes kobanda na smpoint de rupture.
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Dernière mise à jour 3 mins eleki
Titre ya karte
Carte oyo ezali na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Dernière mise à jour 3 mins eleki
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Carte oyo ezali na contenus ya molayi kutu koleka oyo ya liboso mpo na kolakisa action wana ya hauteur égale.
Dernière mise à jour 3 mins eleki
<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>Ntango ozali kosalela bituluku ya bakarte oyo ezali na nse ya lokasa, makambo na yango ekozala na molɔngɔ yango moko.
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Titre ya karte
Carte oyo ezali na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Carte oyo ezali na contenus ya molayi kutu koleka oyo ya liboso mpo na kolakisa action wana ya hauteur égale.
<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>Ba decks ya ba cartes
Ozali na mposa ya ensemble ya ba cartes ya largeur mpe hauteur ekokani oyo ekangami moko na mosusu te? Salelá ba decks ya bakarte.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Dernière mise à jour 3 mins eleki
Titre ya karte
Carte oyo ezali na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Dernière mise à jour 3 mins eleki
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Carte oyo ezali na contenus ya molayi kutu koleka oyo ya liboso mpo na kolakisa action wana ya hauteur égale.
Dernière mise à jour 3 mins eleki
<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>Kaka ndenge ezalaka na ba groupes ya ba cartes, ba pied ya ba cartes na ba decks ekozala automatiquement na molongo.
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Titre ya karte
Carte oyo ezali na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Titre ya karte
Oyo ezali carte ya monene na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Carte oyo ezali na contenus ya molayi kutu koleka oyo ya liboso mpo na kolakisa action wana ya hauteur égale.
<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>Ba cartes ya grille
Salelá système ya grille Bootstrap mpe ba .row-colsclasses na yango mpo na ko contrôler combien de colonnes ya grille (enveloppé autour ya ba cartes na yo) oyo ozali kolakisa na molongo moko. Ndakisa, awa ezali .row-cols-1kotanda bakarte na likonzi moko, mpe .row-cols-md-2kokabola bakarte minei na bonene ekokani na kati ya milɔngɔ mingi, kobanda na esika ya kokabwana ya katikati tii.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
<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>Bobongola yango na .row-cols-3mpe bokomona enveloppe ya minei ya carte.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
<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>Ntango ozali na mposa ya bolai oyo ekokani, bakisá .h-100na bakarte. Soki olingi ba hauteurs égales par défaut, okoki ko setting $card-height: 100%na Sass.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Titre ya karte
Oyo ezali karte ya mokuse.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Titre ya karte
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
<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>Makonzí ya karte
Ba cartes ekoki kobongisama na ba colonnes lokola Maçonnerie.card-columns na kaka CSS na ko envelopper yango na . Ba cartes etongami na ba columnpropriétés ya CSS na esika ya flexbox mpo na alignment ya pete. Bazali kosala komande ya bakarte banda likoló tii na nse mpe na lobɔkɔ ya mwasi tii na lobɔkɔ ya mobali.
Mitó likoló! Kilomɛtrɛ oyo ozali kosala na makonzí ya karte ekoki kokesana. Mpo na kopekisa bakarte ebukana na kati ya makonzí, tosengeli kotya yango na display: inline-blockndenge column-break-inside: avoidezali naino solution oyo ekoki kopekisa masasi te.
Titre ya carte oyo ezo envelopper na ligne ya sika
Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires. Contenu oyo eza mua molayi.
Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.
Titre ya karte
Carte oyo ezali na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.
Dernière mise à jour 3 mins eleki
Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.
Titre ya karte
Karte oyo ezali na motó ya likambo ya mbala na mbala mpe paragrafe mokuse ya makomi oyo ezali na nse na yango.
Dernière mise à jour 3 mins eleki
Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.
Titre ya karte
Oyo ezali karte mosusu oyo ezali na motó ya likambo mpe makomi oyo ezali kosunga yango awa na nse. Carte oyo ezali na mwa makambo mosusu mpo na kosala ete ezala mwa molai na mobimba na yango.
Dernière mise à jour 3 mins eleki
<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>Ba colonnes ya carte ekoki pe ko extendu pe ko personnaliser na mua code ya kobakisa. Elakisami awa na nse ezali bobakisi ya .card-columnskelasi na kosalelaka CSS moko oyo tosalelaka —makonzí ya CSS —mpo na kobimisa ensemble ya ba niveaux oyo eyanolaka mpo na kobongola motángo ya makonzí.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}