Source

Carduri

Cardurile Bootstrap oferă un container de conținut flexibil și extensibil, cu mai multe variante și opțiuni.

Despre

Un card este un container de conținut flexibil și extensibil. Include opțiuni pentru anteturi și subsoluri, o mare varietate de conținut, culori de fundal contextuale și opțiuni de afișare puternice. Dacă sunteți familiarizat cu Bootstrap 3, cardurile înlocuiesc vechile noastre panouri, puțuri și miniaturi. Funcționalități similare acelor componente sunt disponibile ca clase de modificatori pentru cărți.

Exemplu

Cardurile sunt construite cu cât mai puține marcaje și stiluri posibil, dar reușesc totuși să ofere o mulțime de control și personalizare. Construite cu flexbox, oferă o aliniere ușoară și se amestecă bine cu alte componente Bootstrap. Nu au marginîn mod implicit, așa că utilizați utilitare de spațiere după cum este necesar.

Mai jos este un exemplu de card de bază cu conținut mixt și o lățime fixă. Cardurile nu au o lățime fixă ​​pentru a începe, așa că vor umple în mod natural toată lățimea elementului părinte. Acesta este ușor de personalizat cu diferitele noastre opțiuni de dimensionare .

100%x180
Titlul cardului

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Mergi undeva
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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>

Tipuri de conținut

Cardurile acceptă o mare varietate de conținut, inclusiv imagini, text, grupuri de liste, linkuri și multe altele. Mai jos sunt exemple de ceea ce este acceptat.

Corp

Elementul de bază al unei cărți este .card-body. Utilizați-l oricând aveți nevoie de o secțiune căptușită într-un card.

Acesta este un text din corpul unui card.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titlurile cardurilor sunt folosite prin adăugarea .card-titlela o <h*>etichetă. În același mod, linkurile sunt adăugate și plasate unul lângă celălalt prin adăugarea .card-linkla o <a>etichetă.

Subtitrările sunt folosite prin adăugarea unui .card-subtitlela o <h*>etichetă. Dacă elementele .card-titleși .card-subtitlesunt plasate într-un .card-bodyarticol, titlul cardului și subtitlul sunt aliniate frumos.

Titlul cardului
Subtitrare card

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Link card Un alt link
<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>

Imagini

.card-img-topplasează o imagine în partea de sus a cardului. Cu .card-text, textul poate fi adăugat pe card. Textul din interior .card-textpoate fi, de asemenea, stilat cu etichetele HTML standard.

Limită imagine [100%x180]

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Listează grupuri

Creați liste de conținut într-un card cu un grup de liste de culoare.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Vestibulum la 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>
Recomandate
  • Cras justo odio
  • Dapibus ac facilitis in
  • Vestibulum la 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>

Chiuveta de bucatarie

Combinați și potriviți mai multe tipuri de conținut pentru a crea cardul de care aveți nevoie sau aruncați totul acolo. Mai jos sunt afișate stiluri de imagine, blocuri, stiluri de text și un grup de liste, toate împachetate într-un card cu lățime fixă.

Limită imagine [100%x180]
Titlul cardului

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Vestibulum la eros
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Adăugați un antet și/sau un subsol opțional într-un card.

Recomandate
Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

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

Antetele cardurilor pot fi stilate prin adăugarea .card-headerelementelor <h*>.

Recomandate
Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

Mergi undeva
<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>
Citat

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

Cineva celebru în Titlul sursă
<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>
Recomandate
Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

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

Dimensiunea

Cărțile presupun că nu este specific widthpentru a începe, așa că vor fi 100% lățime, dacă nu este specificat altfel. Puteți modifica acest lucru după cum este necesar cu CSS personalizat, clase de grilă, mixuri de grilă Sass sau utilitare.

Folosind marcarea grilei

Folosind grila, înfășurați cardurile în coloane și rânduri, după cum este necesar.

Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

Mergi undeva
Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

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

Folosind utilitare

Utilizați câteva utilitare de dimensionare disponibile pentru a seta rapid lățimea unui card.

Titlul cardului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

Buton
Titlul cardului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

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

Folosind CSS personalizat

Utilizați CSS personalizat în foile de stil sau ca stiluri inline pentru a seta o lățime.

Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

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

Alinierea textului

Puteți modifica rapid alinierea textului oricărui card - în întregime sau în anumite părți - cu clasele noastre de aliniere a textului .

Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

Mergi undeva
Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

Mergi undeva
Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

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

Adăugați un pic de navigare la antetul (sau blocul) unui card cu componentele de navigare din Bootstrap .

Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

Mergi undeva
<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>
Tratament special al titlului

Cu textul de mai jos, ca o introducere naturală la conținut suplimentar.

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

Imagini

Cardurile includ câteva opțiuni pentru lucrul cu imagini. Alegeți dintre adăugarea „capselor de imagine” la fiecare capăt al unui card, suprapunerea imaginilor cu conținutul cardului sau pur și simplu încorporarea imaginii într-un card.

Capsele imaginii

Similar cu anteturile și subsolurile, cardurile pot include „capsule de imagine” de sus și de jos - imagini în partea de sus sau de jos a unui card.

100%x180
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

Ultima actualizare acum 3 minute

Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

Ultima actualizare acum 3 minute

100%x180
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" 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=".../100px180/" alt="Card image cap">
</div>

Suprapuneri de imagini

Transformați o imagine într-un fundal de card și suprapuneți textul cardului. În funcție de imagine, este posibil să aveți sau nu nevoie de stiluri sau utilități suplimentare.

100%x270
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

Ultima actualizare acum 3 minute

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>

Stiluri de carduri

Cardurile includ diverse opțiuni pentru personalizarea fundalurilor, marginilor și culorii.

Fundal și culoare

Utilizați utilități de text și fundal pentru a schimba aspectul unui card.

Antet
Titlul cardului principal

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului secundar

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de succes

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de pericol

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de avertizare

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de informații

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului luminos

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului întunecat

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

<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>
Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-onlyclasa.

Frontieră

Utilizați utilitățile de bord pentru a schimba doar border-colorcardul. Rețineți că puteți pune .text-{color}cursuri pe părinte .cardsau pe un subset al conținutului cardului, așa cum se arată mai jos.

Antet
Titlul cardului principal

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului secundar

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de succes

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de pericol

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de avertizare

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului de informații

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului luminos

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet
Titlul cardului întunecat

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

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

Utilități Mixins

De asemenea, puteți modifica marginile de pe antetul și subsolul cardului după cum este necesar și chiar să le eliminați background-colorcu .bg-transparent.

Antet
Titlul cardului de succes

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

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

Dispunerea cardului

Pe lângă stilarea conținutului din carduri, Bootstrap include câteva opțiuni pentru aranjarea serii de carduri. Deocamdată, aceste opțiuni de aspect nu sunt încă receptive .

Grupuri de carduri

Utilizați grupuri de carduri pentru a reda cardurile ca un singur element atașat, cu coloane de lățime și înălțime egale. Grupurile de carduri folosesc display: flex;pentru a-și obține o dimensiune uniformă.

100%x180
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

Ultima actualizare acum 3 minute

100%x180
Titlul cardului

Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.

Ultima actualizare acum 3 minute

100%x180
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.

Ultima actualizare acum 3 minute

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Când utilizați grupuri de carduri cu subsol, conținutul acestora se va alinia automat.

100%x180
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

100%x180
Titlul cardului

Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.

100%x180
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Pachete de cărți

Aveți nevoie de un set de carduri de lățime și înălțime egale, care nu sunt atașate una de alta? Folosește pachete de cărți.

100%x200
Titlul cardului

Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

Ultima actualizare acum 3 minute

100%x200
Titlul cardului

Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.

Ultima actualizare acum 3 minute

100%x200
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.

Ultima actualizare acum 3 minute

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

La fel ca în cazul grupurilor de cărți, subsolurile cărților din pachete se vor alinia automat.

100%x180
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

100%x180
Titlul cardului

Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.

100%x180
Titlul cardului

Acesta este un card mai larg, cu text de sprijin de mai jos, ca o introducere naturală la conținut suplimentar. Acest card are un conținut chiar mai lung decât primul care arată acea acțiune de înălțime egală.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Coloane de carduri

Cardurile pot fi organizate în coloane asemănătoare masoneriei cu doar CSS, împachetându-le în .card-columns. Cardurile sunt construite cu columnproprietăți CSS în loc de flexbox pentru o aliniere mai ușoară. Cărțile sunt ordonate de sus în jos și de la stânga la dreapta.

Atenție! Kilometrajul dvs. cu coloanele cardurilor poate varia. Pentru a preveni spargerea cardurilor peste coloane, trebuie să le setăm, display: inline-blockdeoarece column-break-inside: avoidnu este încă o soluție antiglonț.

100%x160
Titlul cardului care se înfășoară într-o nouă linie

Acesta este un card mai lung, cu text justificativ de mai jos, ca o introducere naturală la conținut suplimentar. Acest conținut este puțin mai lung.

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

Cineva celebru în Titlul sursă
100%x160
Titlul cardului

Acest card are textul de sprijin de mai jos ca o introducere naturală la conținut suplimentar.

Ultima actualizare acum 3 minute

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

Cineva celebru în Titlul sursă
Titlul cardului

Acest card are un titlu obișnuit și un scurt paragraf de text sub el.

Ultima actualizare acum 3 minute

100%x260

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

Cineva celebru în Titlul sursă
Titlul cardului

Acesta este un alt card cu titlu și text de sprijin mai jos. Acest card are un conținut suplimentar pentru a-l face puțin mai înalt în general.

Ultima actualizare acum 3 minute

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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>

Coloanele cardurilor pot fi, de asemenea, extinse și personalizate cu un cod suplimentar. Mai jos este prezentată o extensie a .card-columnsclasei care utilizează același CSS pe care îl folosim – coloane CSS – pentru a genera un set de niveluri receptive pentru modificarea numărului de coloane.

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