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 .

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.

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.

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

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

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

Antet și subsol

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

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

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

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

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.

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ă .no-guttersș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.

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

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.

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 folosesc display: flex;pentru a-și obține o dimensiune uniformă.

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

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

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

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

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

Ultima actualizare acum 3 minute

Titlul cardului

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>

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.

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

Titlul cardului

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

Ultima actualizare acum 3 minute

Titlul cardului

Ultima actualizare acum 3 minute

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

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

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

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

Ultima actualizare acum 3 minute

Titlul cardului

Ultima actualizare acum 3 minute

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

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.

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.

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.

Titlul cardului

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

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

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

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.

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.

Titlul cardului

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

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

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.

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.

Titlul cardului

Acesta este un card scurt.

Titlul cardului

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

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

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

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ă

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

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

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

Carduri

Despre

Exemplu

Titlul cardului

Tipuri de conținut

Corp

Titluri, text și link-uri

Titlul cardului

Subtitrare card

Imagini

Listează grupuri

Chiuveta de bucatarie

Titlul cardului

Antet și subsol

Tratament special al titlului

Recomandate

Tratament special al titlului

Tratament special al titlului

Dimensiunea

Folosind marcarea grilei

Tratament special al titlului

Tratament special al titlului

Folosind utilitare

Titlul cardului

Titlul cardului

Folosind CSS personalizat

Tratament special al titlului

Alinierea textului

Tratament special al titlului

Tratament special al titlului

Tratament special al titlului

Navigare

Tratament special al titlului

Tratament special al titlului

Imagini

Capsele imaginii

Titlul cardului

Titlul cardului

Suprapuneri de imagini

Titlul cardului

Orizontală

Titlul cardului

Stiluri de carduri

Fundal și culoare

Titlul cardului principal

Titlul cardului secundar

Titlul cardului de succes

Titlul cardului de pericol

Titlul cardului de avertizare

Titlul cardului de informații

Titlul cardului luminos

Titlul cardului întunecat

Transmiterea sensului tehnologiilor de asistență

Frontieră

Titlul cardului principal

Titlul cardului secundar

Titlul cardului de succes

Titlul cardului de pericol

Titlul cardului de avertizare

Titlul cardului de informații

Titlul cardului luminos

Titlul cardului întunecat

Utilități Mixins

Titlul cardului de succes

Dispunerea cardului

Grupuri de carduri

Titlul cardului

Titlul cardului

Titlul cardului

Titlul cardului

Titlul cardului

Titlul cardului

Pachete de cărți

Titlul cardului

Titlul cardului

Titlul cardului

Titlul cardului

Titlul cardului

Titlul cardului

Carduri grilă