Source

Kartoj

La kartoj de Bootstrap provizas flekseblan kaj etendeblan enhavujon kun multoblaj variantoj kaj opcioj.

Pri

Karto estas fleksebla kaj etendebla enhavujo . Ĝi inkluzivas eblojn por kaplinioj kaj piedlinioj, ampleksan varion de enhavo, kuntekstajn fonkolorojn kaj potencajn ekranajn opciojn. Se vi konas Bootstrap 3, kartoj anstataŭigas niajn malnovajn panelojn, putojn kaj bildetojn. Simila funkcieco al tiuj komponentoj estas haveblaj kiel modifklasoj por kartoj.

Ekzemplo

Kartoj estas konstruitaj kun kiel eble plej malmulte da markado kaj stiloj, sed tamen sukcesas liveri multe da kontrolo kaj personigo. Konstruitaj kun flexbox, ili ofertas facilan vicigon kaj miksas bone kun aliaj Bootstrap-komponentoj. Ili ne havas margindefaŭlte, do uzu interspacigajn utilecojn laŭbezone.

Malsupre estas ekzemplo de baza karto kun miksita enhavo kaj fiksa larĝo. Kartoj ne havas fiksan larĝon por komenci, do ili nature plenigos la tutan larĝon de ĝia gepatra elemento. Ĉi tio estas facile personecigita per niaj diversaj grandeco-opcioj .

Placeholder Image cap
Kartotitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

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

Enhavaj tipoj

Kartoj subtenas ampleksan varion de enhavo, inkluzive de bildoj, tekstoj, listgrupoj, ligiloj kaj pli. Malsupre estas ekzemploj de tio, kio estas subtenata.

Korpo

La konstrubriketo de karto estas la .card-body. Uzu ĝin kiam ajn vi bezonas remburitan sekcion ene de karto.

Ĉi tio estas iu teksto en kartkorpo. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titoloj, teksto kaj ligiloj

Karttitoloj estas uzataj per aldonado .card-titleal <h*>etikedo. En la sama maniero, ligiloj estas aldonitaj kaj metitaj unu apud la alia per aldonado .card-linkal <a>etikedo.

Subtekstoj estas uzataj aldonante a .card-subtitleal <h*>etikedo. Se la .card-titlekaj la .card-subtitleeroj estas metitaj en .card-bodyeron, la karttitolo kaj subtitolo estas bele vicigitaj.

Kartotitolo
Kartsubtitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kartligo Alia ligo 
<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>

Bildoj

.card-img-topmetas bildon al la supro de la karto. Per .card-text, teksto povas esti aldonita al la karto. Teksto ene .card-textankaŭ povas esti stilita per la normaj HTML-etikedoj.

Placeholder Image cap

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

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

Listo grupoj

Kreu listojn de enhavo en karto kun flua listogrupo.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulo ĉe 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>
Prezentita
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulo ĉe 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>

Kuireja lavujo

Miksu kaj kongruu plurajn enhavspecojn por krei la karton, kiun vi bezonas, aŭ ĵeti ĉion tien. Malsupre montriĝas bildaj stiloj, blokoj, tekstaj stiloj kaj listo-grupo—ĉiuj envolvitaj en fikslarĝa karto.

Placeholder Image cap
Kartotitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulo ĉe eros
Kartligo Alia ligo 
<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">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>

Aldonu laŭvolan kaplinion kaj/aŭ piedlinion ene de karto.

Prezentita
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

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

Kartkapoj povas esti stilitaj per aldonado .card-headeral <h*>elementoj.

Prezentita
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien 
<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>
Citaĵo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iu fama en Fonta Titolo 
<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>
Prezentita
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien
antaŭ 2 tagoj 
<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>

Dimensio

Kartoj supozas neniun specifan widthpor komenci, do ili estos 100% larĝaj krom se alie dirite. Vi povas ŝanĝi ĉi tion laŭbezone per kutimaj CSS, kradaj klasoj, kradaj Sass-miksaĵoj aŭ iloj.

Uzante kradmarkadon

Uzante la kradon, envolvu kartojn en kolumnoj kaj vicoj laŭbezone.

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

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

Uzante utilecojn

Uzu nian manplenon da disponeblaj grandecoj por rapide agordi la larĝecon de karto.

Kartotitolo

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Butono
Kartotitolo

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

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

Uzante kutiman CSS

Uzu kutiman CSS en viaj stilfolioj aŭ kiel enliniajn stilojn por agordi larĝecon.

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

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

Teksta vicigo

Vi povas rapide ŝanĝi la tekstan vicigon de iu ajn karto—en ĝia tutaĵo aŭ specifajn partojn—per niaj tekstalign klasoj .

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

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

Aldonu iom da navigado al la kaplinio (aŭ bloko) de karto kun la navkomponentoj de Bootstrap .

Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien 
<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="#" tabindex="-1" aria-disabled="true">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>
Speciala titoltraktado

Kun apoga teksto sube kiel natura enkonduko al plia enhavo.

Iru ien 
<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="#" tabindex="-1" aria-disabled="true">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>

Bildoj

Kartoj inkluzivas kelkajn eblojn por labori kun bildoj. Elektu el aldonado de "bildaj ĉapoj" ĉe ambaŭ finoj de karto, supermetado de bildoj kun karto enhavo aŭ simple enkonstrui la bildon en karton.

Bildaj ĉapoj

Simile al kaplinioj kaj piedlinioj, kartoj povas inkluzivi suprajn kaj malsuprajn "bildĉapojn"—bildojn ĉe la supro aŭ malsupro de karto.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-top" alt="...">
</div>

Bildaj supermetaĵoj

Turnu bildon en kartan fonon kaj superigu la tekston de via karto. Depende de la bildo, vi eble aŭ eble ne bezonas pliajn stilojn aŭ ilojn.

Placeholder Card image
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

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

Notu, ke enhavo ne devus esti pli granda ol la alteco de la bildo. Se enhavo estas pli granda ol la bildo, la enhavo aperos ekster la bildo.

Horizontala

Uzante kombinaĵon de krado kaj servaĵoklasoj, kartoj povas esti horizontalaj en poŝtelefon-amika kaj respondema maniero. En la malsupra ekzemplo, ni forigas la kradkanalojn kun .no-gutterskaj uzas .col-md-*klasojn por fari la karton horizontala ĉe la mdrompopunkto. Pliaj ĝustigoj eble estos bezonataj depende de via karto enhavo.

Placeholder Image
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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>

Kartstiloj

Kartoj inkluzivas diversajn eblojn por agordi siajn fonojn, limojn kaj kolorojn.

Fono kaj koloro

Uzu tekston kaj fonajn ilojn por ŝanĝi la aspekton de karto.

Kapo
Primara karttitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Sekundara karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Sukceskarta titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Danĝera karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Titolo de avertkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Titolo de informkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Luma karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Malhela karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

<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>
Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Limo

Uzu randajn ilojn por ŝanĝi nur la border-colorkarton. Notu, ke vi povas meti .text-{color}klasojn sur la gepatro .cardaŭ subaron de la enhavo de la karto kiel montrite sube.

Kapo
Primara karttitolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Sekundara karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Sukceskarta titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Danĝera karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Titolo de avertkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Titolo de informkarto

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Luma karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

Kapo
Malhela karto titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

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

Vi ankaŭ povas ŝanĝi la randojn sur la kartkapo kaj piedo laŭbezone, kaj eĉ forigi iliajn background-colorper .bg-transparent.

Kapo
Sukceskarta titolo

Iu rapida ekzempla teksto por konstrui sur la karto titolo kaj konsistigi la plejparton de la karto enhavo.

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

Karta aranĝo

Krom stiligi la enhavon ene de kartoj, Bootstrap inkluzivas kelkajn eblojn por aranĝi seriojn de kartoj. Por la momento, ĉi tiuj aranĝaj opcioj ankoraŭ ne respondas .

Kartgrupoj

Uzu kartgrupojn por bildi kartojn kiel ununuran, alkroĉitan elementon kun egalaj larĝaj kaj altecaj kolumnoj. Kartgrupoj uzas display: flex;por atingi sian unuforman grandecon.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Placeholder Image cap
Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj

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

Kiam vi uzas kartgrupojn kun piedlinioj, ilia enhavo aŭtomate viciĝas.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj
Placeholder Image cap
Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj
Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj 
<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>

Kartferdekoj

Ĉu vi bezonas aron da egalaj larĝaj kaj altecaj kartoj, kiuj ne estas kunligitaj unu al la alia? Uzu kartojn.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj

Placeholder Image cap
Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj

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

Same kiel ĉe kartgrupoj, kartpiedoj en ferdekoj aŭtomate viciĝos.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Laste ĝisdatigita antaŭ 3 minutoj
Placeholder Image cap
Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj
Placeholder Image cap
Kartotitolo

Ĉi tio estas pli larĝa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu karto havas eĉ pli longan enhavon ol la unua por montri tiun egalan altecan agon.

Laste ĝisdatigita antaŭ 3 minutoj 
<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>

Kradaj kartoj

Uzu la Bootstrap kradsistemon kaj ĝiajn .row-colsklasojn por kontroli kiom da kradkolumnoj (envolvitaj ĉirkaŭ viaj kartoj) vi montras per vico. Ekzemple, jen .row-cols-1aranĝado de la kartoj sur unu kolumno, kaj .row-cols-md-2dividado de kvar kartoj al egala larĝo tra pluraj vicoj, de la meza rompopunkto supren.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

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

Ŝanĝu ĝin al .row-cols-3kaj vi vidos la kvaran karton envolvaĵon.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

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

Kiam vi bezonas egalan altecon, aldonu .h-100al la kartoj. Se vi volas egalajn altecojn defaŭlte, vi povas agordi $card-height: 100%en Sass.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Placeholder Image cap
Kartotitolo

Ĉi tio estas mallonga karto.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo.

Placeholder Image cap
Kartotitolo

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

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

Kartkolumnoj

Kartoj povas esti organizitaj en Masonry -similajn kolumnojn kun nur CSS envolvante ilin en .card-columns. Kartoj estas konstruitaj kun CSS- columnecoj anstataŭ flexbox por pli facila vicigo. Kartoj estas ordigitaj de supre malsupre kaj de maldekstre dekstren.

Atentu! Via kilometraĵo kun kartkolumnoj povas varii. Por eviti ke kartoj rompas trans kolumnojn, ni devas agordi ilin display: inline-blockkiel column-break-inside: avoidankoraŭ ne estas kuglorezista solvo.

Placeholder Image cap
Karttitolo kiu envolvas al nova linio

Ĉi tio estas pli longa karto kun subtena teksto kiel natura enkonduko al plia enhavo. Ĉi tiu enhavo estas iom pli longa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iu fama en Fonta Titolo
Placeholder Image cap
Kartotitolo

Ĉi tiu karto havas subtenan tekston kiel naturan enkondukon al plia enhavo.

Laste ĝisdatigita antaŭ 3 minutoj

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entjero posuere erat.

Iu fama en Fonta Titolo
Kartotitolo

Ĉi tiu karto havas regulan titolon kaj mallongan alineon de teksto sub ĝi.

Laste ĝisdatigita antaŭ 3 minutoj

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iu fama en Fonta Titolo
Kartotitolo

Ĉi tio estas alia karto kun titolo kaj subtena teksto. Ĉi tiu karto havas iom da plia enhavo por fari ĝin iomete pli alta entute.

Laste ĝisdatigita antaŭ 3 minutoj

<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>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 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </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 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>

Kartkolumnoj ankaŭ povas esti etenditaj kaj personecigitaj per iu aldona kodo. Montrita malsupre estas etendaĵo de la .card-columnsklaso uzante la saman CSS kiun ni uzas—CSS-kolumnoj—por generi aron da respondemaj niveloj por ŝanĝi la nombron da kolumnoj.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}