Texto, tipografía y colores en Bootstrap 4

1. Configuración predeterminada de Bootstrap 4

Consideraciones a tener en cuenta sobre los estilos de los textos:

• Bootstrap 4 define por defecto un font-size de 16px y un line-height de 1.5 rem.
• Dispone de una font-family predeterminada de tipo «Helvetica Neue», Helvetica, Arial, sans-serif.
• Además, las etiquetas <p> tienen margin-top: 0 y margin-bottom: 1rem (16px por defecto).

2. Estilos de los encabezados <h1> – <h6>

Los encabezados <h1> – <h6> disponen de estilos predefinidos:

• h1 Bootstrap (2.5rem = 40px)
• h2 Bootstrap (2rem = 32px)
• h3 Bootstrap (1.75rem = 28px)
• h4 Bootstrap (1.5rem = 24px)
• h5 Bootstrap (1.25rem = 20px)
• h6 Bootstrap (1rem = 16px)

3. Clase display-x

Bootstrap nos ofrece diferentes clases para crear encabezados de mayor tamaño. Hay cuatro clases:

.display-1 , .display-2 , .display-3 , .display-4

Ejemplo:

<h1 class="display-1">Encabezado Display-1</h1>

4. Clases h1, h2, h3…

Bootstrap nos ofrece diferentes clases para crear encabezados con los mismos estilos que otros encabezados h1, h2, h3…

.h1 , .h2 , .h3 , .h4…

Ejemplo:

<h1 class="h2">Encabezado h1 con estilo h2</h1>

5. Etiqueta <small>

Gracias a la etiqueta <small> podemos crear un texto secundario más claro en cualquier encabezado:

Ejemplo:

<h1>h1 Encabezado <small>texto secundario</small></h1>

6. Etiqueta <mark>

La etiqueta <mark> es representada con un color de fondo amarillo y algo de relleno:

Ejemplo:

<p>Párrafo con <mark>etiqueta de marcado</mark> en un texto.</p>

7. Etiqueta <abbr>

La etiqueta <abbr> es representada mediante un borde inferior punteado:

Ejemplo:

<p>Esto es una etiqueta <abbr title="La etiqueta abbr se representa con un borde inferior punteado">abbr</abbr> en Bootstrap.</p>

8. Etiqueta <blockquote>

Agregando la clase .blockquote a <blockquote> obtenemos un estilo personalizado.

Ejemplo:

<blockquote class="blockquote">
  <p>Un buen desarrollador de software trabaja con disciplina y constancia desde el primer día.</p> 
  <footer class="blockquote-footer">Omar Bradley</footer> 
</blockquote>

9. Más clases para tipografías

Las siguientes clases de Bootstrap 4 se pueden agregar a los elementos HTML de estilo:

• .font-weight-bold Negrita
• .font-weight-normal Normal
• .font-weight-light Fina
• .font-italic Itálica
• .lead Destaca un párrafo
• .small Más pequeño (85% del tamaño del padre)
• .text-left Alineado izquierda
• .text-center Alineado centro
• .text-right Alineado derecha
• .text-justify Justificado
• .text-nowrap Texto nowrap
• .text-lowercase Texto en minúsculas
• .text-uppercase Texto en mayúsculas.text-capitalize Texto capitalizado
• .initialism Muestra el texto en un elemento <abbr> con tamaño más pequeño
• .list-unstyled Quita el list-style y margin-left en elementos de lista (funciona en <ul> y <ol> ). 
• .list-inline Coloca todos los elementos de una lista en una única línea.

10. Etiquetas HTML y su estilo predefinido

Casi todas las etiquetas HTML5 tienen su estilo predefinido en Bootstrap. Puedes hacer la prueba incluyendo algunas de las etiquetas de contenido, formularios o tablas y viendo su resultado.

Ejemplo

default

11. Colores de texto y fondo

11.1. Colores de texto

Las clases para los colores del texto son: .text-primary, .text-secondary, .text-muted, .text-success, .text-danger, .text-warning, .text-info, .text-white, .text-dark y .text-light.

Las clases anteriores también se pueden usar en enlaces y tendrán un color más oscuro al hacer :hover con el ratón.

Ejemplo

default

11.2. Colores de fondo

Las clases de colores de fondo son: .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark y .bg-light .

Cuando utilizamos los colores de fondo es muy usual combinarlo junto con las clases de los colores de texto para configurar un buen contraste entre ellos.

Ejemplo

default