Bootstrap 4 Colors

Welcome to The Coding College! In this article, we’ll cover Bootstrap 4 Colors, one of the most essential aspects of modern web design. Colors play a crucial role in user experience, and Bootstrap 4 makes it incredibly easy to style your project with its predefined color classes and utilities.

By the end of this guide, you’ll know how to apply Bootstrap 4 colors to text, backgrounds, buttons, and more, while keeping your design consistent and professional.

Why Use Bootstrap 4 Colors?

Bootstrap 4 provides a palette of predefined color classes that save you the time of writing custom CSS. These classes are built for flexibility, accessibility, and responsiveness, allowing you to focus on creating beautiful designs.

Bootstrap 4 Color Palette

The core colors in Bootstrap 4 are named using contextual keywords, making them easy to remember:

Color NameClass PrefixDescription
Primarytext-primaryIndicates primary content or actions.
Secondarytext-secondaryNeutral or secondary content.
Successtext-successIndicates success or positive actions.
Dangertext-dangerUsed for warnings or errors.
Warningtext-warningHighlights caution or alerts.
Infotext-infoRepresents informational messages.
Lighttext-lightLight, muted content (for dark backgrounds).
Darktext-darkDark text or backgrounds.
Mutedtext-mutedSubdued, less prominent text.
Whitetext-whitePure white text, typically used on dark backgrounds.

Applying Text Colors

Bootstrap text color classes allow you to quickly apply colors to text.

Example:

<p class="text-primary">This is primary text.</p>  
<p class="text-secondary">This is secondary text.</p>  
<p class="text-success">This is success text.</p>  
<p class="text-danger">This is danger text.</p>  
<p class="text-warning">This is warning text.</p>  
<p class="text-info">This is info text.</p>  
<p class="text-light bg-dark">This is light text on a dark background.</p>  
<p class="text-dark">This is dark text.</p>  
<p class="text-muted">This is muted text.</p>  
<p class="text-white bg-primary">This is white text on a primary background.</p>

Background Colors

Background colors are applied using the bg- prefix. These classes can be used on any HTML element.

Example:

<div class="bg-primary text-white p-3">Primary background with white text</div>  
<div class="bg-secondary text-white p-3">Secondary background</div>  
<div class="bg-success text-white p-3">Success background</div>  
<div class="bg-danger text-white p-3">Danger background</div>  
<div class="bg-warning text-dark p-3">Warning background</div>  
<div class="bg-info text-white p-3">Info background</div>  
<div class="bg-light text-dark p-3">Light background</div>  
<div class="bg-dark text-white p-3">Dark background</div>  
<div class="bg-white text-dark p-3">White background</div>

Tip: Use padding utilities (p-3, p-5, etc.) to create better spacing between content and backgrounds.

Customizing Button Colors

Buttons are one of the most common UI elements, and Bootstrap 4 provides color classes for buttons.

Example:

<button class="btn btn-primary">Primary Button</button>  
<button class="btn btn-secondary">Secondary Button</button>  
<button class="btn btn-success">Success Button</button>  
<button class="btn btn-danger">Danger Button</button>  
<button class="btn btn-warning">Warning Button</button>  
<button class="btn btn-info">Info Button</button>  
<button class="btn btn-light">Light Button</button>  
<button class="btn btn-dark">Dark Button</button>

Combining Text and Background Colors

You can combine text and background color classes for contrast and emphasis.

Example:

<div class="bg-danger text-white p-3">  
    <p class="text-uppercase">Danger Zone</p>  
    <small class="text-muted">This is an example of combining colors for emphasis.</small>  
</div>

Adding Borders with Colors

Bootstrap 4 allows you to add colored borders using border utilities.

Example:

<div class="border border-primary p-3">Primary Border</div>  
<div class="border border-secondary p-3">Secondary Border</div>  
<div class="border border-success p-3">Success Border</div>  
<div class="border border-danger p-3">Danger Border</div>  
<div class="border border-warning p-3">Warning Border</div>  
<div class="border border-info p-3">Info Border</div>  
<div class="border border-light p-3">Light Border</div>  
<div class="border border-dark p-3">Dark Border</div>

Customizing Colors

While Bootstrap 4 comes with a predefined palette, you can customize colors using Sass variables.

Steps to Customize Colors:

  1. Download the Bootstrap source files.
  2. Open the _variables.scss file.
  3. Modify the $theme-colors map to define your own colors.
$theme-colors: (  
  "custom-primary": #4CAF50,  
  "custom-secondary": #FF5722  
);
  1. Recompile your Bootstrap CSS to apply the changes.

Practical Example: Bootstrap 4 Colors in Action

Here’s how you can use colors to create an attractive design:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Bootstrap 4 Colors Example</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
    <div class="container my-5">  
        <h1 class="text-center text-primary">Welcome to Bootstrap 4 Colors</h1>  
        <p class="lead text-secondary">Learn how to use text, background, and border color utilities in Bootstrap 4.</p>  

        <div class="bg-warning text-dark p-3 mb-3">  
            <h2 class="text-uppercase">Warning Section</h2>  
            <p class="text-muted">This is an example of a warning background with muted text.</p>  
        </div>  

        <button class="btn btn-success">Click Me!</button>  
        <button class="btn btn-danger">Danger Button</button>  

        <div class="border border-info mt-4 p-3">  
            <h3 class="text-info">Info Section</h3>  
            <p class="text-muted">Using borders and text color for emphasis.</p>  
        </div>  
    </div>  
</body>  
</html>

Best Practices for Using Bootstrap 4 Colors

  1. Ensure Readability: Always test the contrast between text and background colors for readability.
  2. Stay Consistent: Use Bootstrap’s predefined palette to maintain design consistency.
  3. Avoid Overuse: Don’t overload your design with too many colors—stick to a cohesive color scheme.
  4. Use Customization Sparingly: Bootstrap colors are well-designed, but you can tweak them if needed using Sass.

Learn More with The Coding College

Bootstrap 4 Colors simplify the process of designing visually appealing and responsive websites. At The Coding College, we’re dedicated to helping you master Bootstrap and other web technologies.

Explore more tutorials, tips, and tricks to enhance your web development journey. Share your thoughts or questions in the comments section below—we’d love to hear from you!

Leave a Comment