Skip to main content Skip ad navigationem soUicitudo
in English

Chartae

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

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
<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.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

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

<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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>
Specialis titulus curatio

Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.

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

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

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

<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

Utere textu colore et curriculo utilitates ad speciem chartae mutandam.

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.

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

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

<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

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

Placeholder Image cap
Card titulum

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

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.

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

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

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

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

Placeholder Image cap
Card titulum

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

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.

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

Sass

Variabilium

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