Skip to main content Skip ad navigationem soUicitudo
Check
in English

Chartae

Chartae Bootstrap praebent contentum flexibile et extensibile continens cum multiplicibus variantibus et optionibus.

In hac pagina

De

Carda est contentum flexibile et extensum continens. Optiones capitis et pedis includit, varietatem contentorum, colorum contextualium colorum, et optiones ostentationis potens. Si nota cum Bootstrap III, chartae veteres tabulas, puteos et ailnthubmas restituunt. Similes functiones illis componentibus praesto est ut modifier classes pro chartis.

Exemplum

Chartae quam minimum notae et stili quam maxime aedificatae sunt, sed tamen ad ton regiminis et customizationis liberandum administrant. Constructa cum flexbox, alignment facilem praebent et bene miscent cum aliis componentibus Bootstrap. Nullam habent margindefaltam, ita ut necessariae utilitatibus iustae utantur.

Infra exemplum est chartae fundamentalis cum contento mixto et latitudine certa. Chartae latitudinem certam non habent ut incipiant, ita plenam latitudinem elementi parentis sui naturaliter implebunt. Hoc facile nativus cum optionibus variis inspectionibus nostris .

Placeholder Image cap
Card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Ite somewhere
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Types contentus

Chartae varietatem contentorum sustinent, inter imagines, textum, album circulos, nexus, et plura. Infra exempla quae scriptor confirmaverunt.

Corpus

Aedificium schedulae est .card-body. Utere ea quotiens opus est sectioni padded intra chartam.

Hic textus quidam intra corpus chartae est.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tituli, textus et nexus

Titulos chartae tag addendo .card-titleadhibentur <h*>. Eodem modo, additae et appositae nexus inter se addito .card-linktag <a>.

Subtituli utuntur addito .card-subtitlepro <h*>tag. Si res .card-titleet .card-subtitlesupellex ponuntur in .card-bodyitem, titulus chartae et subtilis subtiliter perpenduntur.

Card titulum
Card subtilissima

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Card link Alius nexus
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Imagines

.card-img-topponit imaginem ad verticem chartae. Cum .card-text, textu ad card. Textus intus .card-textetiam cum HTML tags vexillum dici potest.

Placeholder Image cap

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Circuli album

Facere indices contentorum in charta cum rubore indice coetus.

  • An item
  • Alter item
  • Tertia item
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Featured
  • An item
  • Alter item
  • Tertia item
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • An item
  • Alter item
  • Tertia item
Card footer
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Kitchen sink

Misce et compone multiplices rationes contentorum ut chartam quam debes creare, vel omnia ibi inicere. Infra ostensae sunt species imaginum, caudices, styli texti, et index coetus — omnes in fixum-latitudine involuti.

Placeholder Image cap
Card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

  • An item
  • Alter item
  • Tertia item
Card link Alius nexus
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Addere caput libitum et/vel footer intra chartam.

Featured
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
html 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Capitales card dici possunt ab .card-headerelementis <h*>addendo.

Featured
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
html 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Quote

Nota auctoritas, in clausula elemento contenta.

In Source Title aliquis celebre
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Featured
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
2 days ago
html 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

inspectionem

Chartae nullas specificas widthcommittitur, quare 100 latae erunt nisi aliter dictum est. Hoc mutare potes cum consuetudine CSS, euismod classes, eget Sass mixins, vel utilitas.

Markup usura malesuada euismod

Usura malesuada euismod, involvere pecto in columnis et ordinibus ut opus est.

Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
html 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Usus utilitates

Utere paucis nostris opportunas utilitates inspectionis ut celeriter latitudinem chartae proponas.

Card titulum

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Button
Card titulum

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Button
html 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

CSS utens consuetudine

Utere consuetudine CSS in stylis stylis tuis, vel sicut inlineis stylis ad latitudinem pone.

Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

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

Gratia diei et noctis text

Cito textum noctis cuiuslibet chartae - in integritate vel speciei partium - mutare potes cum textibus nostris classibus alignis .

Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

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

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

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

Navigationem aliquam ad caput card (vel scandalum) addere cum componentibus nav 's Bootstrap .

Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

Ite somewhere
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Imagines

Chartae paucas optiones ad operandum cum imaginibus comprehendunt. Sume a appendendo "pilas imaginis" in vel in fine chartae, imagines obductis cum card contentis, vel simpliciter imaginem in charta inducens.

imago caps

Similes capitis ac peditibus, schedulae supra et ima includere possunt "pilas imaginum" -imagines in summo vel fundo chartae.

Placeholder Image cap
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Last updated 3 ago

Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Last updated 3 ago

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

imago obducat

Imaginem in schedulam converte et textum chartae tuae operies. Secundum imaginem tuam fortasse vel non indigere additis generibus vel utilitatibus.

Placeholder Card image
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Last updated 3 ago

html 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Nota quod contentus non debet esse maior altitudine imaginis. Si contentum maius est quam contentum extra imaginem ostendetur.

Horizontal

Utens compositione eget et utilitate classium, chartae faciendae sunt horizontales in modo mobili et amicabili et responsivo. In exemplo infra, fistulas craticulas removemus .g-0et .col-md-*classes adhibemus ad faciendas chartam horizontales in mdpuncto interpunctionis. Praeterea servationes necessariae esse possunt secundum contentum in charta tua.

Placeholder Image
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Last updated 3 ago

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

Card genera

Cards varias optiones includunt pro customising locos, fines, et colores.

Background et color

Additur in v5.2.0

Pone background-colorcum diversa antica colorcum adiutoribus nostris.text-bg-{color} . Antea oportebat manually iungere electionem .text-{color}et .bg-{color}utilitas ad stylos, quibus adhuc uti potes si mavis.

Header
Prima card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Secundarium card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Success card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Periculum card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Monitum card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Info card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Lux card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Tenebris card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

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

Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .visually-hiddengenere.

Terminus

Utilitates terminis utere ad mutationem iustam border-colorchartae. Nota te posse .text-{color}classes in parente .cardvel in charta contentorum collocare ut infra ostendetur.

Header
Prima card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Secundarium card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Success card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Periculum card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Monitum card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Info card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Lux card titulum

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Header
Tenebris card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

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

Mixins utilitates

Fines etiam mutare potes in card header et footer prout opus est, ac etiam background-colorcum suis amovere .bg-transparent.

Header
Success card title

Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.

Footer
html 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Card layout

Praeter stylum contentum intra schedulam, Bootstrap paucas optiones includit ad seriem chartarum propositam. Aliquantum temporis, hae optiones extensiones nondum responsivae sunt .

Card coetus

Circuli card utere ut schedulam unam efficiant, elementum adnexum pari latitudine et altitudine columnarum. Circuli card reclinant incipiant et utere display: flex;ut cum dimensionibus uniformibus cohaereant incipiendo a smbreakpoint.

Placeholder Image cap
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Last updated 3 ago

Placeholder Image cap
Card titulum

Hoc card textum infra quasi plumbum naturale in additis contentis suffragatur.

Last updated 3 ago

Placeholder Image cap
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Haec charta etiam longiora contenta habet quam prima ut ostendat aequalem altitudinis actionem.

Last updated 3 ago

html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Cum cardo circulos utens cum peditibus, eorum contentus sponte aciem instruet.

Placeholder Image cap
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Last updated 3 ago
Placeholder Image cap
Card titulum

Hoc card textum infra quasi plumbum naturale in additis contentis suffragatur.

Last updated 3 ago
Placeholder Image cap
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Haec charta etiam longiora contenta habet quam prima ut ostendat aequalem altitudinis actionem.

Last updated 3 ago
html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Eget pecto

Utere electronicis Bootstrap systematis eiusque .row-colsclassibus temperare quot columnas eget (involvit circa chartas tuas) per ordinem ostendis. Exempli gratia, hic .row-cols-1schedulas in unam columnam pono, et .row-cols-md-2quattuor schedulas in latitudinem aequales transversas plures ordines scindit, a medio usque ad punctum.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

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

Muta huc .row-cols-3et quartam chartam involvere videbis.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

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

Cum aequalis altitudinis opus .h-100est, chartas adde. Si defaltam aequalia vis, $card-height: 100%in Sass constituere potes.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Placeholder Image cap
Card titulum

Haec charta brevis est.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis.

Placeholder Image cap
Card titulum

Haec charta longior est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

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

Sicut in circulis card, card pes statim aciem instruet.

Placeholder Image cap
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.

Last updated 3 ago
Placeholder Image cap
Card titulum

Hoc card textum infra quasi plumbum naturale in additis contentis suffragatur.

Last updated 3 ago
Placeholder Image cap
Card titulum

Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Haec charta etiam longiora contenta habet quam prima ut ostendat aequalem altitudinis actionem.

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

Masonry

In v4CSS solum ars ad imitandum mores structurarum instar columnarum usi sumus, sed haec ars multis effectibus molestis accessit . Si hoc genus extensionis habere v5vis, iustus plugin structura uti potes. Masonry in Bootstrap non comprehenditur , sed demo exemplum fecimus adiuvare ut incipias.

CSS

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutionis CSS variabilium accedunt, chartae nunc locales CSS variabiles utuntur .cardpro aucta real-time customizatione. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

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

Sass variables

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