Bootstrap 4 Figures

Bootstrap 4 Figures

Learn Bootstrap Figures class in easy way

 Bootstrap 4 Captioned Image

To Display Images with an Caption use HTML element <figure> Use Class .figure.figure-img and .figure-caption to assign some baseline styles. No standard size for image is provided, hence use .img-fluid within element <img> to make them responsive . 

<figure class="figure">  <!-- class .figure -->
                              <!-- image class -->
  <img src="grass.jpg" class="figure-img img-fluid img-circle" alt="Grass">
  <!-- element <figcaption> and class .figure-caption -->
  <figcaption class="figure-caption">Grass : The most common form of plant life</figcaption>
</figure>

Bootstrap 4 Right Aligned Figure.

To Align the Figure Caption towards right simple use class .text-xs-right within the element <figcaption>

<figure class="figure">  <!-- class .figure -->
                              <!-- image class -->
  <img src="grass.jpg" class="figure-img img-fluid img-circle" alt="Grass">
  <!-- element <figcaption> and class .figure-caption -->
  <figcaption class="figure-caption text-xs-right">Grass : The most common form of plant life</figcaption>
                       <!-- class .text-xs-right -->
</figure>

 

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman