Open In App

Bootstrap 5 Figures

Last Updated : 16 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

A Bootstrap5 Figures is a  component that provides a way to display a piece of content along with an image. If we want to show the image with an optional component, the figure class in Bootstrap 5 is used.

Bootstrap 5 Figures Classes:

  • figure: used to display content, like any image with an optional caption.
  • figure-caption: used to give styles to the caption figure.
  • img-fluid: used to make an image responsive.

Syntax:

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" 
         alt="...">
  <figcaption class="figure-caption">...</figcaption>
</figure>

Example 1: In this example, we are going to see how to display images and text with the figure component in Bootstrap with a caption at the left bottom of the image.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <link href=
          rel="stylesheet">
</head>
 
<body>
    <div class="container pt-4">
        <div >
            <h3 class="text-success">
                GeekforGeeks
            </h3>
            <h5>Bootstrap 5 Figures</h5>
        </div>
 
        <div class="middle">
            <figure class="figure">
                <img src=
                    class="figure-img img-fluid"
                    alt="Image failed to load">
                <figcaption class="figure-caption">
                    Image Caption
                </figcaption>
            </figure>
        </div>
    </div>
</body>
</html>


Output:

 

Example2:In this example, we are going to see how to display images and text with the figure component in Bootstrap with a caption at the right bottom of the image.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link href=
          rel="stylesheet">
</head>
 
<body>
    <div class="container pt-4 ">
        <div class="header">
            <h3 class="text-success">
                GeekforGeeks
            </h3>
            <h5>Bootstrap 5 Figures</h5>
        </div>
        <div class="middle">
            <figure class="figure">
                <img src=
                    class="figure-img img-fluid " alt="Image failed to load">
                <figcaption class="figure-caption text-end">
                    Image Caption
                </figcaption>
            </figure>
        </div>
    </div>
</body>
</html>


Output:

 

Reference:https://getbootstrap.com/docs/5.0/content/figures



Previous Article
Next Article

Similar Reads

React-Bootstrap Figures Component
React-Bootstrap is a front-end framework that was designed keeping react in mind. Figure Component provides a way to display a piece of content along with our image, for example, if we want to display an image with an optional caption. We can use the following approach in ReactJS to use the react-bootstrap Figure Component. Figure Props: as: It can
2 min read
ReactJS MDBootstrap Figures Styles
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Figures Styles in ReactJS MDBootstrap. Figures Styles is used to displaying images with captions using its properties. Syntax: &lt;figure className="fi
2 min read
Angular MDBootstrap Figures Content
MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good-looking webpages with its seamless and easy-to-use component. It is free for both personal &amp; commercial use. In this article, we will know how to use Figures Content in Angular MDBootstap. Figures Content is used to add figures in an element. MDBoo
2 min read
Bootstrap5 Figures SASS
Bootstrap 5 Figures SASS can be used to change the default values provided for the captions by customizing scss file of bootstrap5 Sass variables of Figures: $figure-caption-color: This variable provides the font color of the caption of the figure. By default, it is gray color$figure-caption-font-size: This variable provides the font size of the fi
3 min read
Include Bootstrap in AngularJS using ng-bootstrap
AngularJS can be integrated with Bootstrap CSS and Javascript and can be used to create creative forms, tables, navigation bars, etc. Steps: Make sure the Angular CLI present in your system if not then run the command in the terminal to do so. npm install -g @angular/cli Create a new project on visual studio code by running the code ng new project-
2 min read
Difference between bootstrap.css and bootstrap-theme.css
Bootstrap is an HTML, CSS and JS front-end-framework used for developing responsive and mobile-first projects on the web. It is the framework that comes up with predefined terms, thus giving you the ability to use these codes instead of having to create the codes from scratch. It is a collection of HTML, CSS and JS code that is designed to help bui
5 min read
Difference Between Bootstrap 3 and Bootstrap 4
Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used to design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript. It can create web applications with any server-side Technology like Java, PHP,
2 min read
Difference between Bootstrap 4 and Bootstrap 5
What is Bootstrap? It is an open-source framework from late 2011 that is used for designing responsive websites with a mobile-first approach faster and easier. Bootstrap is available for HTML, CSS, and JS. According to server-side languages like PHP, Node, etc. bootstrap helps to design the frontend. Bootstrap has made the work for developers easie
3 min read
Bootstrap Cheat Sheet - A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens. What is Bootstrap Cheat Sheet?A
27 min read
BootStrap Introduction and Installation
To begin Web development you may go through this article first. Grid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and JumbotronBootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScrip
4 min read