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

Comprueba tu aprendizaje