Ver índice de contenidos del libro

3.7. Blockquotes

Estos elementos se emplean para incluir en tus páginas trozos de contenidos de otras fuentes.

3.7.1. Blockquote por defecto

Utiliza el elemento <blockquote> para encerrar el contenido que se va a incluir en la página. También se recomienda utilizar el elemento <p> para encerrar el texto dentro del <blockquote>. Ejemplo:

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Texto citado con blockquote en Bootstrap 3

Figura 3.13 Texto citado con blockquote en Bootstrap 3

3.7.2. Opciones para los elementos blockquote

Además del estilo por defecto del elemento <blockquote>, Bootstrap 3 define algunos estilos adicionales para los otros elementos que se pueden añadir a los elementos <blockquote>.

3.7.2.1. Mostrando la fuente

Utiliza el elemento <small> para mostrar la fuente original del contenido y encierra el nombre concreto de la fuente (una persona, una publicación, un sitio web, etc.) con el elemento <cite>. Ejemplo:

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Frase célebre de <cite title="Nombre Apellidos">Nombre Apellidos</cite></small>
</blockquote>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Texto citado que muestra la fuente en Bootstrap 3

Figura 3.14 Texto citado que muestra la fuente en Bootstrap 3

3.7.2.2. Modificando la alineación

Algunos autores prefieren modificar la alineación de las citas creadas con <blockquote> para que destaquen más sobre el resto del texto. Para ello, utiliza la calse .pull-right. Ejemplo:

<blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Frase célebre de <cite title="Nombre Apellidos">Nombre Apellidos</cite></small>
</blockquote>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Texto citado que muestra la fuente y cambia su alineación en Bootstrap 3

Figura 3.15 Texto citado que muestra la fuente y cambia su alineación en Bootstrap 3