Treci la conținutul principal Treceți la navigarea documentelor
in English

Carduri

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

Pe aceasta pagina

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 .

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

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>

Titluri, text și link-uri

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.

Placeholder Image cap

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

Listează grupuri

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

  • Un obiect
  • Un al doilea articol
  • Un al treilea articol
<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>
Recomandate
  • Un obiect
  • Un al doilea articol
  • Un al treilea articol
<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>
  • Un obiect
  • Un al doilea articol
  • Un al treilea articol
Subsolul cardului 
<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>

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

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

  • Un obiect
  • Un al doilea articol
  • Un al treilea articol
Link card Un alt link 
<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>

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

Un citat binecunoscut, conținut într-un element blockquote.

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

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

Mergi undeva
2 zile în urmă 
<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-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>

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" 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" 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>
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="#" 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>

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.

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

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-bottom" alt="...">
</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.

Placeholder Card image
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 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>
Rețineți că conținutul nu trebuie să fie mai mare decât înălțimea imaginii. Dacă conținutul este mai mare decât imaginea, conținutul va fi afișat în afara imaginii.

Orizontală

Folosind o combinație de clase de rețea și utilități, cardurile pot fi făcute orizontale într-un mod prietenos și receptiv pentru dispozitive mobile. În exemplul de mai jos, eliminăm jgheaburile cu grilă .g-0și folosim .col-md-*clase pentru a face cardul orizontal la punctul de mdîntrerupere. Pot fi necesare ajustări suplimentare, în funcție de conținutul cardului dvs.

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

Stiluri de carduri

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

Fundal și culoare

Utilizați culoarea textului și utilitarele de 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-dark 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-dark 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-dark 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 .visually-hiddenclasa.

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

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.

Subsol 
<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 încep stivuite și display: flex;se atașează cu dimensiuni uniforme începând de la punctul de smîntrerupere.

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

Placeholder Image cap
Titlul cardului

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

Ultima actualizare acum 3 minute

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

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

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

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

Ultima actualizare acum 3 minute
Placeholder Image cap
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 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>

Carduri grilă

Utilizați sistemul de grilă Bootstrap și .row-colsclasele sale pentru a controla câte coloane de grilă (înfășurate în jurul cărților dvs.) afișați pe rând. De exemplu, aici este .row-cols-1așezarea cărților pe o coloană și .row-cols-md-2împărțirea a patru cărți la lățime egală pe mai multe rânduri, de la punctul de întrerupere mediu în sus.

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

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

Placeholder Image cap
Titlul cardului

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

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

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

Schimbați-l în .row-cols-3și veți vedea a patra carte înfășurată.

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

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

Placeholder Image cap
Titlul cardului

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

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

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

Când aveți nevoie de înălțime egală, adăugați .h-100la cărți. Dacă doriți înălțimi egale în mod implicit, puteți seta $card-height: 100%în Sass.

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

Placeholder Image cap
Titlul cardului

Acesta este un card scurt.

Placeholder Image cap
Titlul cardului

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

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

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

La fel ca în cazul grupurilor de carduri, subsolurile cardului se vor alinia automat.

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

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

Ultima actualizare acum 3 minute
Placeholder Image cap
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="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>

Zidărie

v4Am folosit o tehnică numai CSS pentru a imita comportamentul stâlpilor asemănător zidăriei , dar această tehnică a venit cu o mulțime de efecte secundare neplăcute . Dacă doriți să aveți acest tip de aspect în v5, puteți utiliza doar pluginul Masonry. Masoneria nu este inclusă în Bootstrap , dar am făcut un exemplu demonstrativ pentru a vă ajuta să începeți.

Sass

Variabile

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;