Tabla de contenidos
Consideraciones a tener en cuenta sobre los estilos de los textos:
Los encabezados <h1> – <h6> disponen de estilos predefinidos:
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>
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>
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>
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>
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>
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>
Las siguientes clases de Bootstrap 4 se pueden agregar a los elementos HTML de estilo:
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.
default
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.
default
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.
default