Chartae

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

In hac pagina

De

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

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>

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 subtilitatis 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, textus ad card. Textus intus .card-textetiam cum HTML tags vexillum dici potest.

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

Card footer

<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 demonstratae sunt styli imaginum, caudices, styli texti et globi inscripti, omnes in card fixum-latitudine involuti.

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

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

Header et footer

Addere caput libitum et/vel footer intra chartam.

Featured

Specialis titulus curatio

Cum textu infra fulciendo ut 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 ut 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 ut plumbum naturale in additis contentis.

Ite somewhere

2 days ago

<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 ut plumbum naturale in additis contentis.

Ite somewhere

Specialis titulus curatio

Cum textu infra fulciendo ut 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 constituas.

Card titulum

Cum textu infra fulciendo ut plumbum naturale in additis contentis.

Button

Card titulum

Cum textu infra fulciendo ut 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 ut 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 ut plumbum naturale in additis contentis.

Ite somewhere

Specialis titulus curatio

Cum textu infra fulciendo ut plumbum naturale in additis contentis.

Ite somewhere

Specialis titulus curatio

Cum textu infra fulciendo ut 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 ut 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">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 ut 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">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 ex appendice "pilae imaginis" in vel in fine chartae, imagines obductis cum charta contentis, vel simpliciter imaginem in charta inducens.

imago caps

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

Card titulum

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

Last updated 3 ago

Card titulum

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

Verte imaginem in schedula background et chartae textum obduces. Secundum imaginem tuam, licet vel non indigere adiectis stylis vel utilitatibus.

Card titulum

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

Card titulum

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

Footer

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

Card titulum

Haec 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 card textum infra quasi plumbum naturale in additis contentis suffragatur.

Last updated 3 ago

Card titulum

Haec latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Haec charta vel longiores partes habet quam prima ut ostendat aequalem altitudinem actionis.

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.

Card titulum

Haec 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 card textum infra quasi plumbum naturale in additis contentis suffragatur.

Last updated 3 ago

Card titulum

Haec latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Haec charta vel longiores partes habet quam prima ut ostendat aequalem altitudinem actionis.

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

Card titulum

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

Card titulum

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

Card titulum

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

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.

Card titulum

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

Card titulum

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

Card titulum

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

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.

Card titulum

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

Card titulum

Haec charta brevis est.

Card titulum

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

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.

Card titulum

Haec 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 card textum infra quasi plumbum naturale in additis contentis suffragatur.

Last updated 3 ago

Card titulum

Haec latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Haec charta vel longiores partes habet quam prima ut ostendat aequalem altitudinem actionis.

Last updated 3 ago

<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-color:                 rgba($black, .125);
$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;