Bootstrap usa por defecto un font-size (tamaño de fuente) de 16px, un line-height de 1.5rem. 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.
<small>
En Bootstrap, la etiqueta <small> es usado para crear un ligero y secundario texto en los encabezados
<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: span, section, 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 |