Descubre la paleta de colores de Bootstrap 5 y cómo aplicar las clases relacionadas con los colores en un sitio web para lograr una apariencia atractiva y coherente.
7. Colores en Bootstrap 5
Bootstrap nos ofrece un listado de colores básicos (llamados colores de tema, «theme colors») que se pueden utilizar para dar color a los elementos (textos, fondos, bordes, tablas, botones o enlaces) mediante clases predefinidas. Los nombres y las propiedades de los colores predefinidos son los siguientes:
| Colores básicos en Bootstrap 5 | |||
|---|---|---|---|
| Color | Nombre del color | HEX | |
| Primary | #0d6efd | ||
| Secondary | #6c757d | ||
| Success | #198754 | ||
| Danger | #dc3545 | ||
| Warning | #ffc107 | ||
| Info | #0dcaf0 | ||
| Light | #f8f9fa | ||
| White | #FFF | ||
| Dark | #000 | ||
Aunque en las siguientes secciones veremos cómo colorear cada elemento con estas clases, a continuación se muestra un ejemplo para ir entendiendo ya la forma de trabajar mediante los colores predefinidos. Por ejemplo podemos dar estilo con el color «primary» asignando clases a los elementos de la siguiente manera:
| Elemento | Clase (.elemento-color) | Ejemplo |
|---|---|---|
| Textos | .text-primary | <p class="text-primary">Texto</p> |
| Fondo del texto | .text-bg-primary | <p class="text-bg-primary">Texto</p> |
| Fondos | .bg-primary | <div class="bg-primary">Contenido</div> |
| Bordes | .border-primary | <div class="border border-primary">Contenido</div> |
| Tablas | .table-primary | <table class="table table-primary">...</table> |
| Botones | .btn-primary | <button class="btn btn-primary">Botón</button> |
| Botones con bordes | .btn-outline-primary | <button class="btn btn-outline-primary">Botón</button> |
| Enlaces | .link-primary | <a href="#" class="link-primary">Enlace</a> |
Example
Por otra parte, Bootstrap nos ofrece una paleta de colores ampliada que se puede encontrar en el siguiente enlace: getbootstrap.com/docs/5.0/customize/color/#theme-colors.
Como hemos visto, Bootstrap te proporciona una selección de colores predefinidos. Sin embargo, si deseas personalizar la apariencia de tu sitio web, puedes utilizar tus propios estilos CSS para cada elemento. Esto te da la libertad de crear una estética única y adaptada a tus necesidades, mientras aprovechas la estructura y funcionalidades proporcionadas por Bootstrap para agilizar tu desarrollo.
En la siguiente sección del tutorial aprenderemos las clases para dar estilo a los textos.