Bootstrap Colors
Overview
Bootstrap provides a complete color system including theme colors, semantic colors, and utility classes. These colors ensure design consistency and accessibility.
Theme Colors
Bootstrap defines a set of theme colors for creating a consistent design language:
Basic Colors
html
<!-- Primary colors -->
<div class="p-3 mb-2 bg-primary text-white">Primary</div>
<div class="p-3 mb-2 bg-secondary text-white">Secondary</div>
<div class="p-3 mb-2 bg-success text-white">Success</div>
<div class="p-3 mb-2 bg-danger text-white">Danger</div>
<div class="p-3 mb-2 bg-warning text-dark">Warning</div>
<div class="p-3 mb-2 bg-info text-dark">Info</div>
<div class="p-3 mb-2 bg-light text-dark">Light</div>
<div class="p-3 mb-2 bg-dark text-white">Dark</div>Text Colors
Use .text-* classes to set text color:
html
<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-body">Body text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>Text Color Opacity
Bootstrap 5 supports text color opacity:
html
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>Background Colors
Use .bg-* classes to set background color:
html
<div class="bg-primary text-white p-2">Primary background</div>
<div class="bg-secondary text-white p-2">Secondary background</div>
<div class="bg-success text-white p-2">Success background</div>
<div class="bg-danger text-white p-2">Danger background</div>
<div class="bg-warning text-dark p-2">Warning background</div>
<div class="bg-info text-dark p-2">Info background</div>
<div class="bg-light text-dark p-2">Light background</div>
<div class="bg-dark text-white p-2">Dark background</div>Background Color Opacity
html
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>Gradient Backgrounds
Use the .bg-gradient class to add gradient effects:
html
<div class="bg-primary bg-gradient text-white p-3">Primary gradient</div>
<div class="bg-secondary bg-gradient text-white p-3">Secondary gradient</div>
<div class="bg-success bg-gradient text-white p-3">Success gradient</div>
<div class="bg-danger bg-gradient text-white p-3">Danger gradient</div>Border Colors
Use .border-* classes to set border color:
html
<div class="border border-primary p-2 mb-2">Primary border</div>
<div class="border border-secondary p-2 mb-2">Secondary border</div>
<div class="border border-success p-2 mb-2">Success border</div>
<div class="border border-danger p-2 mb-2">Danger border</div>
<div class="border border-warning p-2 mb-2">Warning border</div>
<div class="border border-info p-2 mb-2">Info border</div>
<div class="border border-light p-2 mb-2">Light border</div>
<div class="border border-dark p-2 mb-2">Dark border</div>
<div class="border border-white p-2 mb-2 bg-dark">White border</div>Link Colors
Set colors for links:
html
<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>Practical Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Color Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h1 class="text-primary">Bootstrap Color System</h1>
<p class="lead text-muted">Showcasing various color applications in Bootstrap</p>
<hr>
<!-- Theme colors display -->
<h2>Theme Colors</h2>
<div class="row">
<div class="col-md-3 mb-3">
<div class="bg-primary text-white p-3 rounded">
<h5>Primary</h5>
<p class="mb-0">Primary color</p>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="bg-success text-white p-3 rounded">
<h5>Success</h5>
<p class="mb-0">Success color</p>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="bg-warning text-dark p-3 rounded">
<h5>Warning</h5>
<p class="mb-0">Warning color</p>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="bg-danger text-white p-3 rounded">
<h5>Danger</h5>
<p class="mb-0">Danger color</p>
</div>
</div>
</div>
<!-- Text colors -->
<h2>Text Colors</h2>
<div class="row">
<div class="col-md-6">
<p class="text-primary">This is Primary text color</p>
<p class="text-success">This is Success text color</p>
<p class="text-warning">This is Warning text color</p>
<p class="text-danger">This is Danger text color</p>
</div>
<div class="col-md-6">
<p class="text-info">This is Info text color</p>
<p class="text-secondary">This is Secondary text color</p>
<p class="text-dark">This is Dark text color</p>
<p class="text-muted">This is Muted text color</p>
</div>
</div>
<!-- Opacity examples -->
<h2>Opacity Effects</h2>
<div class="bg-info p-3 rounded">
<div class="text-white">100% opaque</div>
<div class="text-white text-opacity-75">75% opacity</div>
<div class="text-white text-opacity-50">50% opacity</div>
<div class="text-white text-opacity-25">25% opacity</div>
</div>
<!-- Gradient effects -->
<h2 class="mt-4">Gradient Effects</h2>
<div class="row">
<div class="col-md-6 mb-3">
<div class="bg-primary bg-gradient text-white p-3 rounded">
Primary gradient background
</div>
</div>
<div class="col-md-6 mb-3">
<div class="bg-success bg-gradient text-white p-3 rounded">
Success gradient background
</div>
</div>
</div>
<!-- Border colors -->
<h2>Border Colors</h2>
<div class="row">
<div class="col-md-4 mb-3">
<div class="border border-primary border-3 p-3 rounded">
Primary border
</div>
</div>
<div class="col-md-4 mb-3">
<div class="border border-success border-3 p-3 rounded">
Success border
</div>
</div>
<div class="col-md-4 mb-3">
<div class="border border-danger border-3 p-3 rounded">
Danger border
</div>
</div>
</div>
<!-- Link colors -->
<h2>Link Colors</h2>
<p>
<a href="#" class="link-primary me-3">Primary link</a>
<a href="#" class="link-success me-3">Success link</a>
<a href="#" class="link-warning me-3">Warning link</a>
<a href="#" class="link-danger">Danger link</a>
</p>
</div>
</body>
</html>Color Contrast and Accessibility
Ensure Sufficient Contrast
html
<!-- Good contrast -->
<div class="bg-dark text-white p-3">Dark background with white text</div>
<div class="bg-light text-dark p-3">Light background with dark text</div>
<!-- Avoid low contrast -->
<div class="bg-warning text-warning p-3">Avoid: similar background and text colors</div>Semantic Use of Colors
html
<!-- Correct semantic use -->
<div class="alert alert-success">
<strong>Success!</strong> Operation completed.
</div>
<div class="alert alert-danger">
<strong>Error!</strong> Please check your input.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Please note the following.
</div>Custom Colors
CSS Variables
Bootstrap 5 uses CSS custom properties (variables), you can override these variables:
css
:root {
--bs-primary: #007bff;
--bs-success: #28a745;
--bs-danger: #dc3545;
}Sass Variables
If using Sass, you can customize color variables:
scss
$primary: #007bff;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;Best Practices
- Maintain consistency: Use the same color system throughout your project
- Consider accessibility: Ensure color contrast meets WCAG standards
- Semantic use: Choose appropriate colors based on content meaning
- Test in different environments: Test color effects on different devices and lighting conditions
- Avoid overuse: Don't use too many different colors on one page
Next Steps
Now that you've mastered Bootstrap's color system, we'll next learn about table styling.