To override and extend Bootstrap Figures.
Uses shared figure mixins on .figure / .figure-caption when those classes are not on <figure> / <figcaption> (tags are styled by docs/CMS).
<!-- Class-only markup (what bootstrap.figure.css styles) -->
<div class="figure">
<img class="figure-img img-fluid" src="https://picsum.photos/seed/figure/320/180" alt="(sample image)">
<p class="figure-caption">A caption for the above image.</p>
</div>
<!-- Class-only markup with linked image -->
<div class="figure">
<a href="#">
<img class="figure-img img-fluid" src="https://picsum.photos/seed/figure-link/320/180" alt="(sample image)">
</a>
<p class="figure-caption">A caption for a linked image.</p>
</div>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* All Bootstrap pattern library CSS loads for every component */
/* FAQ: To support legacy client imports, Bootstrap file organization is odd */
@import url("./bootstrap--form.demo.css");
@import url("./bootstrap--modal.demo.css");
@import url("./bootstrap--col.demo.css");
@import url("./bootstrap--pagination.demo.css");
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadBootstrap": true
}