37 - Tipografía : citas de bloque

El elemento HTML "blockquote" normalmente se utiliza para agrupar un texto que pertenece a otro autor o documento. El Bootstrap 4 define un estilo para este elemento que se almacena en la clase "blockquote". Veamos una página con un "blockquote":

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <blockquote class="blockquote">
      <p>Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque.</p>
    </blockquote> 
  </div>
</body>
</html>

En el navegador tenemos como resultado:

bootstrap 4 blockquote

Referencia a la fuente.

Podemos disponer una referencia a la fuente agregando una etiqueta "footer" y agregando la clase "blockquote-footer" a la misma:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <blockquote class="blockquote">
      <p>Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque. 
      Texto de la cita de bloque. Texto de la cita de bloque.</p>
      <footer class="blockquote-footer">Referencia de la fuente:<cite>xxxxx</cite></footer>      
    </blockquote> 
  </div>
</body>
</html>

En el navegador tenemos como resultado:

bootstrap 4 blockquote

Como podemos comprobar dentro de la etiqueta "blockquote" disponemos una etiqueta "footer" donde definimos la clase "blockquote-footer".

Alineación.

Si queremos alinear el bloque de citas debemos aplicar alguna de estas tres clases a la etiqueta "blockquote":

text-right
text-center
text-left

Ejecutar Ejemplo

Retornar