Vue Bootstrap Figures
Vue Figures - Bootstrap 4 & Material Design
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
<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>
Aligning the figure’s caption is easy with our text utilities.
<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>
Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143