Arranque | clase de figura con ejemplos

Una figura se usa cuando se necesita mostrar una parte del contenido, generalmente imágenes con una leyenda opcional. La clase de figura en Bootstrap se usa para agregar estilo a los elementos de figura predeterminados.

  • La clase base .figure se usa para indicar un elemento de figura.
  • El .figure-img se usa para indicar la imagen utilizada en el elemento de figura.
  • El .figure-caption se puede usar para mostrar un título debajo de la figura.

Ejemplo : usar la clase .figure con una imagen de muestra.

<!DOCTYPE html>
<html>
<head>
    <!-- Including Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>Figures in Bootstrap</title>
</head>
  
<body>
    <div class="container">
        <h1>Figures in Bootstrap</h1>
        <figure class="figure">
            <img class="figure-img" src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" >
        </figure>
</body>
</html>                    

Producción:
figure without caption

Ejemplo : usar la clase .figure-caption para mostrar un título debajo de la imagen. Esta clase se usa con la etiqueta <figcaption> .

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      
    <title>Figures in Bootstrap</title>
</head>
  
<body>
    <div class="container">
        <h1>Figures in Bootstrap</h1>
          
        <figure class="figure">
            <img class="figure-img" src= "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" >
              
            <figcaption class="figure-caption">
                Caption for the above image.
            </figcaption>
        </figure>
</body>
</html>                    

Producción:
figure with caption

Referencia : https://getbootstrap.com/docs/4.0/content/figures/

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *