Colores y degradados en bootstrap con ejemplos

Posted on by Rudeus Greyrat

Bootstrap proporciona varias clases para aplicar propiedades de color a varios elementos. 
Cree un archivo HTML con los enlaces CDN a Jquery y Bootstrap.

HTML

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
         initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Hello, world!</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>
</html>

Después de crear el archivo HTML básico, debemos agregar estos elementos dentro del cuerpo del código y luego podemos ver todos los cambios necesarios. 
Color para texto en elementos:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
       content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3>GeeksForGeeks Bootstrap Colors</h3>
    <p class="text-primary">.text-primary</p>
 
    <p class="text-secondary">.text-secondary</p>
 
    <p class="text-success">.text-success</p>
 
    <p class="text-danger">.text-danger</p>
 
    <p class="text-warning">.text-warning</p>
 
    <p class="text-info">.text-info</p>
 
    <p class="text-light bg-dark">.text-light</p>
 
    <p class="text-dark">.text-dark</p>
 
    <p class="text-body">.text-body</p>
 
    <p class="text-muted">.text-muted</p>
 
    <p class="text-white bg-dark">.text-white</p>
 
    <p class="text-black-50">.text-black-50</p>
 
    <p class="text-white-50 bg-dark">.text-white-50</p>
 
</body>
</html>

Producción:

Color para el fondo de los elementos:
También tiene clases para el color de fondo.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3>GeeksForGeeks Bootstrap Colors</h3>
    <div class="p-3 mb-2 bg-primary text-white">
        .bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">
        .bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">
        .bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">
        .bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">
        .bg-warning</div>
    <div class="p-3 mb-2 bg-info text-white">
        .bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">
        .bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">
        .bg-dark</div>
    <div class="p-3 mb-2 bg-white text-dark">
        .bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-dark">
        .bg-transparent</div>
</body>
</html>

Producción:

Colores de fondo degradados:
para usar colores de fondo degradados, debe establecer la propiedad $enable-gradients en verdadero. De forma predeterminada, se establece en falso.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3>GeeksForGeeks Bootstrap Colors</h3>
    <div class="p-3 mb-2 bg-gradient-primary text-white">
        .bg-primary</div>
    <div class="p-3 mb-2 bg-gradient-secondary text-white">
        .bg-secondary</div>
    <div class="p-3 mb-2 bg-gradient-success text-white">
        .bg-success</div>
    <div class="p-3 mb-2 bg-gradient-danger text-white">
        .bg-danger</div>
    <div class="p-3 mb-2 bg-gradient-warning text-white">
        .bg-warning</div>
    <div class="p-3 mb-2 bg-gradient-info text-white">
        .bg-info</div>
    <div class="p-3 mb-2 bg-gradient-light text-dark">
        .bg-light</div>
    <div class="p-3 mb-2 bg-gradient-dark text-light">
        .bg-dark</div>
</body>
</html>

Producción:

Navegador compatible:

  • Google Chrome
  • Borde de Microsoft
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por rossoskull y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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