Ver índice de contenidos del libro

3.4. Clases CSS

3.4.1. Clases CSS para alinear texto

Bootstrap 3 define varias clases CSS para alinear de diferentes formas el contenido de texto de los elementos.

Ejemplo:

<p class="text-left">Texto alineado a la izquierda.</p>
<p class="text-center">Texto centrado.</p>
<p class="text-right">Texto alineado a la derecha.</p>

Así se ve este ejemplo en tu navegador:

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

Texto alineado en Bootstrap 3

Figura 3.8 Texto alineado en Bootstrap 3

3.4.2. Clases CSS para indicar el tipo de contenido

Aunque no es una práctica recomendada desde el punto de vista de la accesibilidad, Bootstrap 3 también define varias clases CSS para mostrar el tipo de contenido a través del color del texto.

Ejemplo:

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Así se ve este ejemplo en tu navegador:

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

Texto de color según su significado en Bootstrap 3

Figura 3.9 Texto de color según su significado en Bootstrap 3