Vue Bootstrap Figures
Vue Figures - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Bootstrap figures are commonly used elements for displaying images with the caption. A caption can be left-aligned or right-align.
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
<template>
<figure class="figure">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg" class="figure-img img-fluid z-depth-1"
alt="..." style="width: 400px">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</template>
Aligning the figure’s caption is easy with our text utilities.
<template>
<figure class="figure">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg" class="figure-img img-fluid z-depth-1"
alt="..." style="width: 400px">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
</template>