Figures
Figures can be used to display related images and text.
Example #
Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>. Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.
HTML
<figure class="figure mb-0">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">
A caption for the above image.
</figcaption>
</figure>
Information
Please note, figures are block-level and will take up the full width of their parent containers. In the example above (and all others on this page), the figures have been placed inside a container with the class.specific-w-300.
Caption alignment #
Aligning the figure's caption is easy with text utilities.
HTML
<figure class="figure mb-0">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-center">
A caption for the above image.
</figcaption>
</figure>
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.