• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Colors

← Previous Next →

What is Bootstrap 4 Colors?

Bootstrap 4 Colors refers to the set of predefined color utility classes that allow developers to quickly style text, backgrounds, borders, and components without writing custom CSS. Using these color classes ensures visual consistency, accessibility, and responsiveness across all devices.

Bootstrap 4’s color system is based on semantic and contextual classes, making it easy to indicate status, emphasis, or category, while keeping the design clean and maintainable.

Text Colors

Bootstrap 4 provides a wide range of text color classes:

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

  • .text-primary, .text-success, .text-danger, etc., provide semantic meaning to the text.

  • .text-muted is useful for secondary information, captions, or small print.

  • .text-light and .text-white are suitable for dark backgrounds.

  • Using these classes ensures color accessibility across devices.

Background Colors

Bootstrap 4 also provides background color classes to style containers, sections, or components:

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

  • Always pair background colors with contrasting text colors to maintain readability.

  • .p-3 and .mb-2 help maintain consistent spacing between elements.

  • Semantic background colors can indicate status, alerts, or categories.

Borders and Color Utilities

Bootstrap 4 provides border color classes to highlight edges:

<div class="border border-primary p-3 mb-2">Primary border</div>
<div class="border border-success p-3 mb-2">Success border</div>
<div class="border border-danger p-3 mb-2">Danger border</div>
<div class="border border-warning p-3 mb-2">Warning border</div>
<div class="border border-info p-3 mb-2">Info border</div>
<div class="border border-dark p-3 mb-2">Dark border</div>

  • .border creates a default 1px border.

  • .border-primary, .border-success, etc., apply semantic colors.

  • Borders can be applied to buttons, cards, forms, and alerts for emphasis.

Gradient Colors

Bootstrap 4 supports basic gradient backgrounds through custom utilities or inline CSS, as it does not include built-in gradient classes. However, you can combine background color classes with custom gradients for enhanced design:

<div class="p-3 mb-2 text-white" style="background: linear-gradient(to right, #007bff, #6610f2);">
  Gradient background
</div>

  • Gradients create visual interest and modern layouts.

  • Ensure text contrast remains readable over gradients.

Contextual Color Classes

Bootstrap 4 color utilities are contextual, meaning they convey meaning rather than just aesthetics:

  • Primary: Important actions or highlights.

  • Success: Indicates positive results or success messages.

  • Danger: Errors, alerts, or critical warnings.

  • Warning: Cautionary messages.

  • Info: Informational messages or secondary content.

  • Light & Dark: Neutral backgrounds and text contrasts.

Example in buttons:

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

  • Buttons use contextual colors consistently to maintain UX and design language.

Text and Background Combination

Pairing text and background colors effectively improves readability and aesthetics:

<div class="bg-primary text-white p-3 mb-2">Primary background with white text</div>
<div class="bg-warning text-dark p-3 mb-2">Warning background with dark text</div>

  • Always check contrast ratios for accessibility compliance.

  • Use .text-dark on light backgrounds and .text-white on dark backgrounds.

Best Practices for Bootstrap Colors

  1. Use semantic color classes to indicate meaning, not just decoration.

  2. Always ensure sufficient contrast between text and background.

  3. Combine text and background colors for visual hierarchy.

  4. Apply border colors to emphasize content sections.

  5. Avoid excessive custom colors; rely on Bootstrap utilities for consistency.

  6. Test colors on multiple devices to maintain accessibility.

Summary of the Tutorial

This tutorial explained Bootstrap 4 Colors, including text colors, background colors, border colors, gradients, and contextual color utilities. You learned how to combine colors for readability, create semantic meaning, and enhance visual hierarchy. Mastering color utilities in Bootstrap 4 ensures your website is consistent, accessible, and visually appealing across all devices.

Practice Questions

  1. Create a paragraph with each text color class: .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-dark, .text-light, and .text-muted.

  2. Add divs with background colors: .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, and .bg-white ensuring text contrast is readable.

  3. Build a card with .bg-primary background and .text-white text inside it.

  4. Create a div with .border border-success and some content inside.

  5. Add a button group with .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, and .btn-dark.

  6. Combine .bg-warning with .text-dark and .bg-dark with .text-light to show proper contrast.

  7. Create a list of items using .list-group with .list-group-item-primary, .list-group-item-success, .list-group-item-danger, and .list-group-item-warning.

  8. Apply a gradient background using inline CSS combined with .text-white for readability.

  9. Build a row with three columns using .bg-info, .bg-success, and .bg-danger with .p-3 spacing.

  10. Create a div with .bg-light, .text-dark, .border, and .p-3 to showcase a neutral container.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top