Figures

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 huge 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.
upgrade with discount

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

Show code Edit in sandbox

        
            

          <figure class="figure">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).webp" 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.

Show code Edit in sandbox

        
            

          <figure class="figure">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).webp" 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>