ReactJS MDBootstrap Estilos de figuras

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar.

En este artículo, sabremos cómo usar Estilos de figuras en ReactJS MDBootstrap. Estilos de figuras se usa para mostrar imágenes con subtítulos usando sus propiedades.

Sintaxis:

<figure className="figure">GeeksforGeeks</figure>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar Estilos de figuras.

import React from "react";
  
export default function App() {
    return (
        <div id='gfg'>
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Figures Styles</h4>
  
            <figure className='figure' style={{ maxWidth: '50rem' }}>
                <img
                    src=
'https://media.geeksforgeeks.org/wp-content/uploads/20220106105832/gfg200X2001.png'
                    className='figure-img img-fluid rounded'
                />
                <figcaption className='figure-caption'>
                    MDBootstrap is a Material Design and
                    bootstrap-based react UI library <br /> 
                    that is used to make good looking webpages
                    with its seamless and easy-to-use component. </figcaption>
            </figure>
  
        </div>
  
    );
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo cambiar la alineación de los Estilos de Figuras.

import React from "react";
  
export default function App() {
    return (
        <div id='gfg'>
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Figures Styles</h4>
  
            <figure className='figure' style={{ maxWidth: '50rem' }}>
                <img
                    src=
'https://media.geeksforgeeks.org/wp-content/uploads/20220106105832/gfg200X2001.png'
                    className='figure-img img-fluid rounded'
                />
                <figcaption className='figure-caption text-end'>
                    MDBootstrap is a Material Design and
                    bootstrap-based react UI library <br /> 
                    that is used to make good looking webpages
                    with its seamless and easy-to-use component. </figcaption>
            </figure>
  
        </div>
  
    );
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/content-styles/figures/