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
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
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