Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Bakarte

Ba cartes ya Bootstrap epesaka conteneur ya contenus flexible et extensible na ba variantes na ba options ebele.

Na lokasa oyo

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 .

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

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

Placeholder Image cap

Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.

html 
<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
html 
<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>
Ezali na esika oyo balobeli
  • Eloko moko
  • Eloko ya mibale
  • Eloko ya misato
html 
<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
Ezali na nse ya lokasa ya karte
html 
<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.

Placeholder Image cap
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
Lien ya carte Lien mosusu
html 
<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>

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

Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.

Moto moko ya lokumu na Source Title
html 
<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>
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
html 
<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 boye
Traitement spécial ya titre

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

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

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
html 
<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
html 
<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
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Traitement spécial ya titre

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

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

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

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

Placeholder Card image
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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Yebá ete makambo oyo ezali na kati esengeli te kozala monene koleka bosanda ya elilingi. Soki makambo ezali monene koleka elilingi makambo yango ekolakisama na libándá ya elilingi.

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 .g-0mpe 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.

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

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

Mitindo ya bakarte

Bakarte ezali na makambo ndenge na ndenge mpo na kobongisa makambo oyo ezali na nsima, bandelo mpe langi na yango.

Fond mpe langi

Ebakisami na v5.2.0

Set a background-colorna contrasting foreground colorna basungi na biso.text-bg-{color} . Liboso esengelaki kosala pair manuellement oyo oponi .text-{color}mpe .bg-{color}ba utilitaires mpo na styling, oyo okoki kaka kosalela soki olingi.

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.

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

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.

html 
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins 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
html 
<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.

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

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

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

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

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

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

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

Placeholder Image cap
Titre ya karte

Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.

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

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

Bobongola yango na .row-cols-3mpe bokomona enveloppe ya minei ya carte.

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

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

Placeholder Image cap
Titre ya karte

Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.

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

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

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.

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

Placeholder Image cap
Titre ya karte

Oyo ezali karte ya mokuse.

Placeholder Image cap
Titre ya karte

Oyo ezali carte ya molayi na texte ya soutien na se lokola lead-in naturel na contenus supplémentaires.

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

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

Kaka ndenge ezalaka na ba groupes ya ba cartes, ba footers ya carte ekozala automatiquement na molongo.

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

Maçonnerie

Na v4tosalelaki technique moko ya CSS kaka mpo na ko imiter comportement ya ba colonnes lokola Maçonnerie , kasi technique oyo eyaki na ebele ya ba effets secondaires ya mabe . Soki olingi kozala na lolenge oyo ya layout na v5, okoki kaka kosalela plugin ya Maçonnerie. Maçonnerie ezali te na Bootstrap , kasi tosali ndakisa ya démonstration mpo na kosalisa yo obandi.

CSS

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba cartes esalela sikoyo ba variables CSS locales on .cardpona personnalisation en temps réel améliorée. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Ba variables ya Sass

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