Bootstrap 4 admite 10 clases de utilidad de color diferentes que se pueden usar para texto y colores de fondo. Cada uno de estos colores tiene un nombre que se puede usar para describir el uso de colores en una página.
Clases de texto de utilidad de color: estas clases se utilizan para cambiar el color del texto.
- text-primary: Da un color azul cielo al texto.
- text-secundario: Da un color grisáceo al texto.
- text-warning: Da un tono amarillo al texto.
- text-success: Da un color verde al texto.
- text-danger: Da un color rojo al texto.
- text-muted: Le da un color gris al texto.
- text-dark: Da un color negro oscuro al texto.
- text-light: Da un color grisáceo muy claro al texto.
- text-info: Da un tono de azul al texto.
- text-white: Da un color blanco al texto.
Ejemplo: Este ejemplo muestra el uso de todas las clases de utilidad de color para colorear texto en la página.
HTML
<html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="p-3"> <p class="text-primary"> Welcome to geeksforgeeks </p> <p class="text-secondary"> Welcome to geeksforgeeks </p> <p class="text-warning"> Welcome to geeksforgeeks </p> <p class="text-success"> Welcome to geeksforgeeks </p> <p class="text-danger"> Welcome to geeksforgeeks </p> <p class="text-muted"> Welcome to geeksforgeeks </p> <p class="text-dark"> Welcome to geeksforgeeks </p> <p class="text-light"> Welcome to geeksforgeeks </p> <p class="text-info"> Welcome to geeksforgeeks </p> <p class="text-white"> Welcome to geeksforgeeks </p> </div> <script src= "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> </script> </body> </html>
Producción:
Clases de fondo de utilidad de color: estas clases se utilizan para cambiar el color del fondo. Al intentar usar clases de utilidad de color para el fondo, ‘texto’ se reemplaza con ‘bg’ que significa ‘fondo’.
Las clases de utilidad de color para los colores de fondo son:
- bg-primary: Da un color azul cielo al fondo de un elemento.
- bg-secundario : Da un color grisáceo al fondo de un elemento.
- bg-warning: Da un tono amarillo al fondo de un elemento.
- bg-success: Da un color verde al fondo de un elemento.
- bg-danger: Da un color rojo al fondo de un elemento.
- bg-muted: Da un color gris al fondo de un elemento.
- bg-dark: Da un color negro oscuro al fondo de un elemento.
- bg-light: Da un color grisáceo muy claro al fondo de un elemento.
- bg-info: Da un tono de azul al fondo de un elemento.
- bg-white: Da un color blanco al fondo de un elemento.
Ejemplo: Este ejemplo muestra el uso de todas las clases de utilidad de color para colorear los fondos de la página.
HTML
<html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="p-3"> <div class="bg-primary m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-secondary m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-warning m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-success m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-danger m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-muted m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-dark m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-light m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-info m-2 p-2"> Welcome to geeksforgeeks </div> <div class="bg-white m-2 p-2"> Welcome to geeksforgeeks </div> </div> <script src= "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por everlyprecia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA