Tiles
Bootstrap 5 Tiles component
Responsive Tiles built with Bootstrap 5. Simple examples of the arrangement of elements into tiles and various styles of panels.
Tile columns
Use .row and .col to create a tiles. To learn more about it, read Grid Docs.
Panel title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Panel title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Panel title
This card has a regular title and short paragraphy of text below it.
Last updated 3 mins ago
Panel title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Panel title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago
Panel title
This card has a regular title and short paragraphy of text below it.
Last updated 3 mins ago
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card bg-success text-white text-center mb-4">
<div class="card-body">
<h5 class="card-title">Panel title that wraps to a new line</h5>
<p>This is a longer card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.</p>
</div>
</div>
<div class="card bg-info text-white text-end mb-4">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<div class="card bg-warning text-white mb-4">
<div class="card-body">
<h5 class="card-title">Panel title</h5>
<p>This card has supporting text below as a natural lead-in to additional content.</p>
<p><small>Last updated 3 mins ago</small></p></div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="card bg-primary text-white mb-4 text-end">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
</div>
</div>
<div class="card bg-danger text-white text-center my-4">
<div class="card-body">
<h5 class="card-title">Panel title</h5>
<p>This card has a regular title and short paragraphy of text below it.</p>
<p><small>Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-success text-white mb-4">
<div class="card-body">
<h5 class="card-title">Panel title that wraps to a new line</h5>
<p>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-lg-4 mb-4 mb-lg-0">
<div class="card bg-warning text-white text-center mb-4">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<div class="card bg-dark text-white mb-4">
<div class="card-body">
<h5 class="card-title">Panel title</h5>
<p>This is another card with title and supporting text below.
This card has some additional content to make it slightly taller overall.</p>
<p><small>Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-secondary text-white text-end mb-4">
<div class="card-body">
<h5 class="card-title">Panel title</h5>
<p>This card has a regular title and short paragraphy of text below it.</p>
<p><small>Last updated 3 mins ago</small></p></div>
</div>
</div>
</div>
Panel styles
You can use different colors or styles of panels. To learn more about it, read Card Docs.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<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 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-body bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-body-tertiary 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>
Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to
users of assistive technologies – such as screen readers. Ensure that information denoted by
the color is either obvious from the content itself (e.g. the visible text), or is included
through alternative means, such as additional text hidden with the
.visually-hidden class.