Source

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 kolakisa 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 comme 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 .

100%x180 ezali
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 class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

Oyo ezali mwa makomi na kati ya nzoto 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.

Kape ya elilingi [100%x180].

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 class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Liste ya ba groupes

Salá ba liste ya makambo oyo ezali na kati ya karte oyo ezali na etuluku ya liste ya flush.

  • Cras kaka odio
  • Dapibus ac facilisis na kati ya
  • Vestibulum na eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Ezali na esika oyo balobeli
  • Cras kaka odio
  • Dapibus ac facilisis na kati ya
  • Vestibulum na eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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.

Kape ya elilingi [100%x180].
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.

  • Cras kaka odio
  • Dapibus ac facilisis na kati ya
  • Vestibulum na eros
Lien ya carte Lien mosusu 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Bakisa motó ya likambo mpe/to nse ya lokasa oyo okoki kopona na kati ya karte.

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

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

Moto moko ya lokumu na Source Title 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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
2 mikolo eleki 
<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 assumer pas spécifique widthya kobanda, donc ekozala 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 boye
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="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 kopesa bonene oyo ezali mpo na kotya nokinoki bonene ya karte.

Titre ya karte

Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.

Bouton
Titre ya karte

Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.

Bouton 
<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 boye
Traitement spécial ya titre

Na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.

Kende esika moko boye
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>

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

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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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ɛsi ya bililingi” —bililingi oyo ezali likoló to na nse ya karte.

100%x180 ezali
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

100%x180 ezali 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</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.

100%x270 ezali
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 bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Motó ya likambo
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.

Na nse ya lokasa 
<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 basalelaka display: flex;pona kozua taille ya uniforme na bango.

100%x180 ezali
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

100%x180 ezali
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

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

Ntango ozali kosalela bituluku ya bakarte oyo ezali na nse ya lokasa, makambo na yango ekozala na molɔngɔ yango moko.

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

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.

100%x200 ezali
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

100%x200 ezali
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

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

Kaka ndenge ezalaka na ba groupes ya ba cartes, ba pied ya ba cartes na ba decks ekozala automatiquement na molongo.

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

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.

100%x160 ezali
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.

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

Moto moko ya lokumu na Source Title
100%x160 ezali
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

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat.

Moto moko ya lokumu na Source Title
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

100%x260 ezali

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

Moto moko ya lokumu na Source Title
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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>

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