Skip to main content
Bootstrap
CHAPTER 05 Beginner

Colors, Backgrounds, and Borders

Updated: May 18, 2026
5 min read

# CHAPTER 5

Colors, Backgrounds, and Borders

1. Chapter Introduction

Bootstrap's theme color system provides a consistent palette of semantically named colors — primary, secondary, success, danger, warning, info — that can be applied to backgrounds, text, borders, buttons, and badges with one class. This chapter covers all color utilities and visual styling tools.

2. Learning Objectives

  • Apply Bootstrap's 8 theme colors to any element.
  • Use background color utilities.
  • Apply border utilities (color, width, radius).
  • Add box shadows.
  • Control opacity.

3. Theme Colors

Bootstrap's 8 semantic colors map to a purpose:
text
12345678 
primary   → Blue     (main brand action)
secondary → Gray     (secondary actions)
success   → Green    (success/confirmation)
danger    → Red      (errors/deletion)
warning   → Yellow   (warnings/caution)
info      → Cyan     (informational)
light     → Light gray (light backgrounds)
dark      → Dark gray  (dark backgrounds)

4. Background Colors

html
12345678910111213141516 
<!-- Background utility classes: bg-{color} -->
<div class="bg-primary text-white p-3">Primary background</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-dark 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 border p-3">White background</div>
<div class="bg-transparent p-3">Transparent</div>

<!-- Subtle background tints (Bootstrap 5.3+) -->
<div class="bg-primary-subtle text-primary-emphasis p-3">Subtle primary</div>
<div class="bg-success-subtle text-success-emphasis p-3">Subtle success</div>
<div class="bg-danger-subtle text-danger-emphasis p-3">Subtle danger</div>

5. Gradient Backgrounds

html
123 
<!-- Add gradient effect to any background -->
<div class="bg-primary bg-gradient text-white p-3">Primary with gradient</div>
<div class="bg-success bg-gradient text-white p-3">Success with gradient</div>

6. Border Utilities

html
123456789101112131415161718192021222324 
<!-- Adding borders -->
<div class="border p-3 mb-2">All borders</div>
<div class="border-top p-3 mb-2">Top border only</div>
<div class="border-bottom p-3 mb-2">Bottom border only</div>
<div class="border-start p-3 mb-2">Left (start) border</div>
<div class="border-end p-3 mb-2">Right (end) border</div>

<!-- Removing borders -->
<div class="border border-0 p-3">No border</div>
<div class="border border-top-0 p-3">No top border</div>

<!-- Border colors -->
<div class="border border-primary p-3">Primary border</div>
<div class="border border-success p-3">Success border</div>
<div class="border border-danger p-3">Danger border</div>

<!-- Border width (1-5) -->
<div class="border border-1 p-3">1px border</div>
<div class="border border-3 p-3">3px border</div>
<div class="border border-5 p-3">5px border</div>

<!-- Border opacity -->
<div class="border border-primary border-opacity-25 p-3">25% opacity border</div>
<div class="border border-primary border-opacity-50 p-3">50% opacity border</div>

7. Border Radius (Rounded Corners)

html
12345678910111213141516 
<!-- Rounded corners -->
<div class="rounded p-3">Slightly rounded</div>
<div class="rounded-0 p-3">No rounding</div>
<div class="rounded-1 p-3">Slight rounding</div>
<div class="rounded-2 p-3">Moderate rounding</div>
<div class="rounded-3 p-3">More rounding</div>
<div class="rounded-4 p-3">Large rounding</div>
<div class="rounded-5 p-3">Very large rounding</div>
<div class="rounded-circle p-5 text-center" style="width:80px;height:80px;">Circle</div>
<div class="rounded-pill px-4 py-2">Pill shape</div>

<!-- Directional rounding -->
<div class="rounded-top p-3">Only top rounded</div>
<div class="rounded-bottom p-3">Only bottom rounded</div>
<div class="rounded-start p-3">Only left rounded</div>
<div class="rounded-end p-3">Only right rounded</div>

8. Shadows

html
1234 
<div class="shadow-none p-3 mb-2 bg-white">No shadow</div>
<div class="shadow-sm p-3 mb-2 bg-white">Small shadow</div>
<div class="shadow p-3 mb-2 bg-white">Medium shadow</div>
<div class="shadow-lg p-3 mb-2 bg-white">Large shadow</div>

9. Opacity

html
123456789101112 
<!-- Element opacity (affects entire element including children) -->
<div class="opacity-100 bg-primary text-white p-3">100% opacity</div>
<div class="opacity-75 bg-primary text-white p-3">75% opacity</div>
<div class="opacity-50 bg-primary text-white p-3">50% opacity</div>
<div class="opacity-25 bg-primary text-white p-3">25% opacity</div>

<!-- Text opacity only -->
<p class="text-primary text-opacity-75">75% text opacity</p>
<p class="text-primary text-opacity-50">50% text opacity</p>

<!-- Background opacity only -->
<div class="bg-primary bg-opacity-50 p-3 text-white">50% background opacity</div>

10. Common Mistakes

  • Using bg-warning with white text: Warning is yellow — white text is hard to read. Use text-dark with warning backgrounds.
  • Combining opacity-25 with important content: Low opacity makes text hard to read. Use opacity only for decorative elements.

11. MCQs

Question 1

What class adds a green background?

Question 2

Which color is semantic for errors?

Question 3

What class creates a pill-shaped border radius?

Question 4

What class adds a large shadow?

Question 5

What class adds a border on all sides?

Question 6

border border-primary border-opacity-50 means?

Question 7

What class creates a circular element?

Question 8

What class reduces an entire element's opacity to 50%?

Question 9

What class adds a gradient effect to a background?

Question 10

What text color should you use with bg-warning?

12. Interview Questions

  • Q: What are Bootstrap's semantic theme colors? Why are they semantic?
  • Q: How do you add a 50% opacity border in Bootstrap 5?

13. Summary

Bootstrap's color system provides semantic, consistent styling through utility classes. Backgrounds, borders, shadows, and opacity can all be controlled without custom CSS. The subtle tints (bg-danger-subtle) added in Bootstrap 5.3 provide elegant light versions of theme colors for modern card designs.

14. Next Chapter Recommendation

In Chapter 6: Spacing and Sizing Utilities, we master Bootstrap's margin, padding, width, and height utility classes — the tools that control every pixel of space in your layouts.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Typography and Text Utilities
Next Chapter Spacing and Sizing Utilities

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1