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 margin
defaltam, 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.
<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-title
adhibentur <h*>
. Eodem modo, additae et appositae nexus inter se addito .card-link
tag <a>
.
Subtituli utuntur addito .card-subtitle
pro <h*>
tag. Si res .card-title
et .card-subtitle
supellex ponuntur in .card-body
item, 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-top
ponit imaginem ad verticem chartae. Cum .card-text
, textu ad card. Textus intus .card-text
etiam 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>
- 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.
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>
Header et footer
Addere caput libitum et/vel footer intra chartam.
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-header
elementis <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>
Nota auctoritas, in clausula elemento contenta.
<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>
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 width
committitur, 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 somewhereSpecialis 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.
<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 somewhereSpecialis titulus curatio
Cum textu infra fulciendo tamquam plumbum naturale in additis contentis.
Ite somewhereSpecialis 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>
Navigatio
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.
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
<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.
<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>
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-0
et .col-md-*
classes adhibemus ad faciendas chartam horizontales in md
puncto interpunctionis. Praeterea servationes necessariae esse possunt secundum contentum in charta tua.
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.
Prima card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Secundarium card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Success card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Periculum card titulum
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Monitum card titulum
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Info card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Lux card titulum
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
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-hidden
genere.
Terminus
Utilitates terminis utere ad mutationem iustam border-color
chartae. Nota te posse .text-{color}
classes in parente .card
vel in charta contentorum collocare ut infra ostendetur.
Prima card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Secundarium card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Success card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Periculum card titulum
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Monitum card titulum
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Info card title
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Lux card titulum
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
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-color
cum suis amovere .bg-transparent
.
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 sm
breakpoint.
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 card textum infra quasi plumbum naturale in additis contentis suffragatur.
Last updated 3 ago
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.
Card titulum
Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.
Card titulum
Hoc card textum infra quasi plumbum naturale in additis contentis suffragatur.
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-cols
classibus temperare quot columnas eget (involvit circa chartas tuas) per ordinem ostendis. Exempli gratia, hic .row-cols-1
schedulas in unam columnam pono, et .row-cols-md-2
quattuor 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-3
et 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-100
est, 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
Hoc latius card est cum textu infra fulciendo sicut plumbum naturale in additis contentis. Hoc contentum paulum longior est.
Card titulum
Hoc card textum infra quasi plumbum naturale in additis contentis suffragatur.
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 v4
CSS solum ars ad imitandum mores structurarum instar columnarum usi sumus, sed haec ars multis effectibus molestis accessit . Si hoc genus extensionis habere v5
vis, 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;