Colors and gradients in bootstrap with examples

Last Updated : 03 May, 2024

Bootstrap offers a wide range of predefined colors and gradients through utility classes, enabling easy customization of text, backgrounds, buttons, and other elements, enhancing visual appeal and consistency across web projects.

Color in Bootstrap:

Color in Bootstrap refers to the predefined color palette and utility classes provided for text, backgrounds, and borders. It allows for easy customization and consistent design across web projects.

Example: In this example we demonstrate Bootstrap’s color classes applied to text elements for different color variations, enhancing visual presentation and readability.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Bootstrap Color Example</title>
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>

    <div class="container">
        <h1 class="text-primary">Primary Color</h1>
        <h2 class="text-success">Success Color</h2>
        <h3 class="text-danger">Danger Color</h3>
        <h4 class="text-warning">Warning Color</h4>
        <h5 class="text-info">Info Color</h5>
        <p class="text-muted">Muted Color</p>
        <p class="text-dark">Dark Color</p>
        <p class="text-light bg-dark">Light Color</p>
    </div>

    <!-- Bootstrap JS (Optional) -->
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">

    </script>
</body>

</html>

Output:

Color in Bootstrap Example Output

Gradient background colors:

Bootstrap provides gradient background colors with classes like .bg-gradient-primary, .bg-gradient-secondary, etc., adding visual appeal and depth to web elements, enhancing user experience and interface design.

Example: In this example Bootstrap’s color and gradient classes enhance design. Utilize bg-classes combined with bg-gradient for colorful and gradient backgrounds, enhancing visual appeal effortlessly.

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>Color and gradient in Bootstrap</h3>
    <div class="p-3 mb-2 bg-primary bg-gradient text-white">
        .bg-primary.bg-gradient</div>
    <div class="p-3 mb-2 bg-secondary bg-gradient text-white">
        .bg-secondary.bg-gradient</div>
    <div class="p-3 mb-2 bg-success bg-gradient text-white">
        .bg-success.bg-gradient</div>
    <div class="p-3 mb-2 bg-danger bg-gradient text-white">
        .bg-danger.bg-gradient</div>
    <div class="p-3 mb-2 bg-warning bg-gradient text-dark">
        .bg-warning.bg-gradient</div>
    <div class="p-3 mb-2 bg-info bg-gradient text-white">
        .bg-info.bg-gradient</div>
    <div class="p-3 mb-2 bg-light bg-gradient text-dark">
        .bg-light.bg-gradient</div>
    <div class="p-3 mb-2 bg-dark bg-gradient text-white">
        .bg-dark.bg-gradient</div>
</body>

</html>