Bootstrap 5: Colores, fuentes y tipografías

Home » Blog » Bootstrap 5: Colores, fuentes y tipografías

En esta entrada voy a  repasar cómo se pueden usar las características de Bootstrap 5: Colores, fuentes y tipografías.

Bootstrap usa la siguiente configuración predeterminada:

  • Tamaño de letra (font-size) de 16px.
  • Espacio entre líneas (line-height) de 1.5.
  • Fuente (font-family) es «Helvetica Neue», Helvetica, Arial, sans-serif.
  • Los elementos parrafo (<p>) tienen margin-top: 0 y margin-bottom: 1rem.

¿Necesitas ayuda con tu diseño web?

ENCABEZADOS

Los encabezados disponibles en HTML son h1, h2, h3, h4, h5 y h6, y como ya sabemos se usan para titulares. En Bootstrap 5 tienen un diseño un poco diferente siendo la fuente un poco más grande que para el html 5 normal.

A esos encabezados podemos aplicarles 4 clases, de este modo podemos establecer un encabezado con diferente tamaño de letra:

<h1 class="display-1">Ejemplo h1 display-1</h1>
<p>Texto del ejemplo</p>
<h1 class="display-2">Ejemplo h1 display-2</h1>
<p>Texto del ejemplo</p>
<h1 class="display-3">Ejemplo h1 display-3</h1>
<p>Texto del ejemplo</p>
<h1 class="display-4">Ejemplo h1 display-4</h1>
<p>Texto del ejemplo</p>

OTRAS TIPOGRAFÍAS BOOTSTRAP

En HTML existen otros elementos para dar estilo a un texto, y Bootstrap les añade su diseño propio.

Small

En Boostrap se usa para crear un titular más pequeño debajo del encabezado.

<h1>SMALL <small>Prueba small</small></h1>

Mark

A este elemento de marcación, Bootstrap le añade un diseño tipo resaltado con rotulador.

<p>Esto es una prueba de <mark>mark</mark>.</p>

abbr

Este elemento sirve para añadir significado a las abreviaciones. Se le añade un subrayado especial para que se vea que esconde ese texto explicativo.

<p><abbr title="Iñigo Mezo Alvarez Crestelo">IMACRESTE</abbr> es mi nick.</p>

blockquote

Esta etiqueta se usa para cuando introducimos un texto copiado de otra fuente. Bootstrap añade a la etiqueta footer un diseño tipo para señalar que la fuente es otro.

<blockquote>
<p>Este es un texto de prueba.</p>		
<footer class="blockquote-footer">Fuente imacreste.com</footer>
</blockquote>

dl, dt, dd

Estas etiquetas son para definir definiciones de términos. Bootstrap resalta la palabra que luego se define.

<dl>
<dt>Bootstrap</dt>
<dd>- Es un FrameWork.</dd>		
</dl>

pre

Con esta etiqueta se consigue que se mantengan los espacios en blanco y saltos de línea. Por defecto el HTML no permite más de 1 espacio en blanco y más de un salto de línea. Se sueñe usar para código fuente.

<pre>
		Esto es un
		texto que conserva 
		los espacios por que usa
		la etiqueta
		HTML
		PRE
</pre>

Este ejemplo se vería tal cual, incluso con el espacio lateral, superior e inferior.

code

Esta etiqueta se usa para hacer referencia a códigos reservados. Bootstrap lo presenta con otro estilo.

<p>Esto es un <code>code</code</p>

kbd

En HTML se usa para identificar comandos de teclado o formulas, se presentan con un color de fondo negro sobre letra en blanco.

<p>esto es <kbd>kbd + Y</kbd></p>

MODIFICAR FUENTES Y TIPOGRAFÍAS

Disponemos algunas clases para modificar la tipografía o fuente del texto.

  • .font-weight-bold,  .font-weight-normal, .font-weight-light. Permite añadir grosor a la fuente.
  • .font-italic Italica. Añade cursiva.
  • .lead. Destaca el elemento con una fuente un poco más grande.
  • .small. Añade una fuente más pequeña.
  • .text-left, .text-center, .text-right, .text-justify. Etiquetas para alinear el texto dentro de un bloque.
  • .text-lowercase, .text-uppercase, .text-capitalize. Estos atributos permiten hacer que el texto sea todo minúsculas, mayúsculas, o que todas las palabras empiecen por mayúsculas.
  • .list-unstyled. Quita el list-style y margin-left en elementos de lista ul u ol.
  • .list-inline. Coloca los elementos li de una lista en una línea horizontal.

Algunos ejemplos de uso:

<p class="font-weight-bold">font-weight-bold</p>
<p class="font-weight-normal">font-weight-normal</p>
<p class="font-weight-light">font-weight-light</p>	
<p class="font-italic">font-italic</p>
<p class="lead">lead</p>
<p class="small">small</p>
<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>
<p class="text-justify">text-justify</p>	
<p class="text-lowercase">text-lowercase</p>
<p class="text-uppercase">text-uppercase</p>
<p class="text-capitalize">text-capitalize</p>
<p class="text-justify">text-justify</p>

COLORES EN BOOTSTRAP 5

Bootstrap viene con una serie de etiquetas que permiten añadir colores basados en el «significado de los colores», como por ejemplo el rojo indica peligro.

Estos colores se pueden aplicar tanto a textos como a fondos, simplemente se necesita cambiar la etiqueta TEXT- (color texto Bootstrap) por BG- (color del findo):

  • text-muted (texto con apariencia de apagado)
  • text-primary (texto con azul tipo enlace)
  • text-success (Verde)
  • text-info (Azul claro)
  • text-warning (Amarillo)
  • text-danger (Rojo)
  • text-secondary (Gris)
  • text-white (Blanco)
  • text-dark (Negro)
  • text-light (Muy claro, prácticamente blanco)
<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>
<p class="text-secondary">text-secondary</p>
<p class="text-white">text-white</p>
<p class="text-dark">text-dark</p>
<p class="text-light">text-light</p>

Si sustituimos el text por bg (background), lo que hacemos es añadir colores bootstrap de fondo.

<p class="bg-muted">bg-muted</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>
<p class="bg-secondary">bg-secondary</p>
<p class="bg-white">bg-white</p>
<p class="bg-dark">bg-dark</p>
<p class="bg-light">bg-light</p>


Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023