Bootstrap 5, tipografía

Bootstrap usa por defecto un font-size (tamaño de fuente) de 16 px, un line-height de 1.5. La familia De la Fuente (font-family) por defecto es ‘Helvetica Neue’, Helvetica, Arial, sans-serif.

Todos los elementos <p> tienen un margin-top: 0 y un margin-bottom: 1rem (16 px por defecto).

Los estilos Bootstrap 4 para los encabezados tienen (<h1> a <h6>) un tamaño de fuente como el que se muestra en el siguiente esquema:

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

Mostrando encabezados

Los encabezados de pantalla se utilizan para destacar más que los encabezados normales (tamaño de fuente más grande y autoridad de fuente más ligero), y hay cuatro clases para elegir: .display-1, .display-2, .display-3, .display-4.

Ejm

Encabezados Bootstrap

<small>

En Bootstrap, la etiqueta <small> es usado para crear un ligero y secundario texto en los encabezados

Ejm

Etiqueta small en Boostrap

<mark>

Bootstrap 4 aplicará un estilo al elemento HTML <mark> con un color de fondo amarillo y algo de relleno:

Ejm

Use the mark element to highlight text.

<abbr>

Bootstrap 4 aplicará un estilo al elemento HTML <abbr> con un borde inferior punteado:

<blockquote>

Agrega la clase .blockquote a una <blockquote> al citar bloques de contenido de otra fuente:

<dl>

Bootstrap dará estilo a <dl> de la siguiente manera:

Ejm

Coffee
- black hot drink
Milk
- white cold drink

<code>

Bootstrap 4 aplicará un estilo al elemento HTML <code> de la siguiente manera:

Ejm

The following HTML elements: spansection, and div defines a section in a document.

<kbd>

Bootstrap mostrará la etiqueta <kbd> de la siguiente manera en pantalla:

Ejm

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrap mostrará la etiqueta <pre> de la siguiente forma:

Ejm

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Más clases de tipografía

Os dejamos una tabla con más clases de tipografía

Class Descripción
.font-weight-bold Texto en negrita
.font-weight-bolder Texto Bolder
.font-italic Texto en cursiva
.font-weight-light Texto Light weight
.font-weight-lighter Texto Lighter weight
.font-weight-normal Texto normal
.lead Hace que un párrafo destaque
.small Indica texto más pequeño (el 80% del tamaño del padre)
.text-left Indica texto alineado a la izda
.text-*-left indica texto alineado a la izquierda en pantallas pequeñas, medianas o grandes
.text-break Evita que el texto largo rompa el diseño
.text-center Texto alineado al centro
.text-*-center Indica el texto alineado al centro en pantallas pequeñas, medianas o grandes
.text-decoration-none Remueve el subrayado bajo en un enlace
.text-right Texto alineado a la derecha
.text-*-right Indica el texto alineado a la derecha en pantallas pequeñas, medianas o grandes
.text-justify Texto justificado
.text-monospace Texto monespaciado
.text-nowrap No hay texto de ajuste
.text-lowercase Texto en minúsculas
.text-reset Restablece el color de un texto o un enlace (hereda el color de su padre)
.text-uppercase Texto en mayúsculas
.text-capitalize Texto capitalizado
.initialism Muestra el texto dentro de un elemento <abbr> en un tamaño de fuente ligeramente más pequeño
.list-unstyled Elimina el estilo de lista predeterminado y el margen izquierdo en los elementos de la lista (funciona tanto en <ul> como en <ol>). Esta clase solo se aplica a los elementos de la lista secundaria inmediata (para eliminar el estilo de lista predeterminado de cualquier lista anidada, aplica esta clase también a cualquier lista anidada)
.list-inline Coloca todos los elementos de la lista en una sola línea (utilizada junto con .list-inline-item en cada elemento <li>)
.pre-scrollable Hace que un elemento <pre> se pueda desplazar