42 - 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 5 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 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 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:
Referencia a la fuente.
Podemos disponer una referencia a la fuente agregando una etiqueta "figcaption" y agregando la clase "blockquote-footer" a la misma:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 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>
<figcaption class="blockquote-footer">Referencia de la fuente:<cite>xxxxx</cite></figcaption>
</blockquote>
</div>
</body>
</html>
En el navegador tenemos como resultado:
Como podemos comprobar dentro de la etiqueta "blockquote" disponemos una etiqueta "figcaption" 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-start text-center text-end