Module 13 : Bootstrap Colors &
Backgrounds.
1) Understand Bootstrap’s color
system (semantic color names, CSS
variables and Sass variables).
Use Bootstrap background and
text color utility classes correctly.
● Build accessible UIs with correct
color contrast and semantic usage.
● Create custom themes using Sass
variables or CSS custom
properties.
Implement runtime theme
switching (light/dark or brand
palettes) with JS.
● Test color choices for
accessibility and color-blindness.
● Apply background patterns and
gradients with Bootstrap utilities
and minimal custom CSS.
2) Bootstrap color & background
utilities
(These are the utilities you’ll use most
often.)
● Background classes:
bg-primary, bg-secondary,
bg-success, bg-danger,
bg-warning, bg-info, bg-light,
bg-dark, bg-white, bg-transparent
● Text color classes:
text-primary, text-secondary,
text-success, text-danger,
text-warning, text-info, text-light,
text-dark, text-white, text-muted,
text-body
Combined text+background
helpers for accessibility
(Bootstraps 5+):
text-bg-primary,
text-bg-secondary,
text-bg-success, etc. — sets both
background and a suitable text
color.
● Gradient utility:
bg-gradient (applies a subtle
gradient on top of the background
color)
● Utility for opacity or overlay
(custom): use custom CSS
variables / utilities (Bootstrap
includes limited built-in opacity
utilities; often you'll add small
CSS).
CSS variables (runtime):
--bs-primary, --bs-secondary,
--bs-body-bg, --bs-body-color, etc.
● Sass variables (compile-time
theming):
$primary, $secondary, $body-bg,
$body-color, $enable-gradients,
etc.
3) Conceptual background
Semantic vs decorative color —
Use semantic color classes
(.bg-success for success status)
rather than hardcoded hex values
where semantics help. Decorative
backgrounds (hero images,
patterns) may use custom utilities
or classes.
● Contrast & accessibility —
Choose color combinations
meeting WCAG contrast: minimum
4.5:1 for normal text, 3:1 for large
text (≥18pt or 14pt bold). Use
text-bg-* helpers when you need a
background and readable text.
● Theming — Two common
approaches: (A) compile-time
theming with Sass variables
(rebuild CSS); (B) runtime theming
using CSS custom properties
(--bs-*) and toggling classes or
changing properties with
JavaScript.
● Performance — Avoid extremely
large background images; use CSS
gradients and SVG patterns where
possible. Keep color definitions
compact via variables so color
changes don't require wide DOM
repaint cost.
4) Setup (two ways)
a) Quick (CDN) — add Bootstrap
CSS/JS links (works for demos and
labs).
<link
href="https://cdn.jsdelivr.net/npm/bo
otstrap@5.3.0/dist/css/bootstrap.mi
n.css" rel="stylesheet"> <script
src="https://cdn.jsdelivr.net/npm/boo
tstrap@5.3.0/dist/js/bootstrap.bundl
e.min.js"></script>
b) Production / custom — install via
npm and use Sass to override
variables before compiling.
npm install bootstrap
// In your scss:
@import
"node_modules/bootstrap/scss/boots
trap";
Override variables before importing
bootstrap:
$primary: #1e90ff; $enable-gradients:
true; @import
"node_modules/bootstrap/scss/boots
trap";
5) examples Example 1 — Colored
cards with readable text
<div class="container py-4"> <div
class="row g-3"> <div
class="col-md-4"> <div class="card
text-bg-primary bg-gradient"> <div
class="card-body"> <h5
class="card-title">Primary Card</h5>
<p class="card-text">Use
<code>text-bg-primary</code> when
you need background + readable
text.
</p> </div> </div> </div> <div
class="col-md-4"> <div class="card
text-bg-success"> <div
class="card-body"> <h5
class="card-title">Success</h5> <p
class="card-text">Semantic colors
communicate state.
</p> </div> </div>
</div> <div class="col-md-4"> <div
class="card bg-light text-dark"> <div
class="card-body"> <h5
class="card-title">Light</h5> <p
class="card-text">For neutral surfaces
use <code>bg-light</code>
.
</p> </div>
</div> </div> </div> </div>
Why use text-bg-*? Because it sets
both a background and an
appropriate text color so contrast is
maintained consistently.
Example 2 — Navbar with background
utilities and brand color
<nav class="navbar navbar-expand-lg
bg-dark"> <div class="container"> <a
class="navbar-brand text-white"
href="#">MyBrand</a> <button
class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#nav"> <span
class="navbar-toggler-icon"></span>
</button> <div class="collapse
navbar-collapse" id="nav"> <ul
class="navbar-nav ms-auto"> <li
class="nav-item"><a class="nav-link
text-white" href="#">Home</a></li> <li
class="nav-item"><a class="nav-link
text-muted" href="#">About</a></li>
</ul> </div> </div> </nav>
Tip: Use text-muted for secondary
links and ensure hover states
increase contrast.
Example 3 Custom theme using CSS
variables for runtime switching
HTML:
<button id="themeToggle" class="btn
btn-outline-primary">Toggle
Theme</button> <div class="p-4 mt-3"
id="panel"> <h3>Panel</h3> <p>This
panel uses CSS variables to change
color at runtime.
</p> </div>
CSS (minimal):
:root { --brand-bg: #ffffff;
--brand-text: #212529;
--brand-accent: #0d6efd; /* fallback
to bs primary */ } .theme-dark {
--brand-bg: #121212; --brand-text:
#e9ecef; --brand-accent: #66b2ff; }
#panel { background: var(--brand-bg);
color: var(--brand-text); border-left:
4px solid var(--brand-accent); }
JS:
const btn =
document.getElementById('themeTog
gle'); btn.addEventListener('click'
, ()
=> {
document.documentElement.classList
.toggle('theme-dark'); // Save
preference if
(document.documentElement.classLis
t.contains('theme-dark')) {
localStorage.setItem('theme'
,
'dark'); }
else {
localStorage.removeItem('theme'); }
});
Explanation: Changing :root variables
modifies any CSS that reads them; no
recompilation needed. This approach
works well for theming colors and
backgrounds.
6) Inspecting Bootstrap color
variables & utility classes
See how Bootstrap defines colors and
how utilities map to CSS variables.
Steps:
1. Open Developer Tools →
Elements.
2. Add a small block:
3.
<div class="p-3 bg-primary
text-white">Inspect me</div>
4. In the Styles panel, inspect
computed styles and look for
background-color and color.
5. In the console, run
getComputedStyle(document.quer
ySelector('
.bg-primary')).backgrou
ndColor.
6. Inspect :root custom properties
in the Styles panel (search for
--bs-primary).
Expected result: You’ll see the actual
RGB color for .bg-primary and the
CSS custom property --bs-primary
defined in the bootstrap CSS file.
Learning point: Bootstrap utilities are
thin wrappers around CSS variables,
enabling runtime changes.
Build an accessible color card set and
measure contrast
Create card examples and test
contrast ratios.
Steps:
1. Create three cards using
text-bg-* classes and one custom
card using a custom hex color.
2. Use a color contrast tool
(browser extension or online) or
Chrome DevTools Accessibility
pane to measure contrast.
3. Adjust your custom hex
background or text color until it
reaches 4.5:1 (normal text) or 3:1
for large text.
Expected result: should find
combinations that pass and ones that
fail; they must document required
changes.
Deliverable: A short report: initial
colors, measured contrast ratio,
changes made and rationale.
Implement time theme switcher
Implement JS theme switcher that
toggles CSS variables and persists
choice.
Steps:
1. Implement :root variables and a
.theme-dark override.
2. Add a toggle button and JS (like
the example above).
3. Make sure Bootstrap utilities that
rely on custom properties are
respected.
4. Test with a component that uses
var(--brand-accent) for border or
background.
Success criteria:
● Theme persists across page
reloads.
● All text remains readable; run
contrast check.
Background patterns and gradients
Compare performance and aesthetics
of (a) large background images, (b)
SVG pattern, (c) CSS gradient.
Steps:
1. Create three full-width hero
sections:
○ hero-image uses
background-image:
url(large-photo.jpg).
○ hero-svg uses inline SVG as
background or <svg> element.
○ hero-gradient uses
background: linear-gradient(...).
2. Measure time to first paint and
investigate the network (image
size).
3. Compare developer feedback:
which loads fastest, which looks
sharper on retina, which is easiest
to customize.
Expected result: Gradients and SVG
patterns are lightweight and easiest
to theme; large photos may look best
but cost network/time.
7) Exercises
Exercise A (Beginner): Create a
3-card responsive layout each with a
different semantic background
(text-bg-primary, text-bg-warning,
bg-light text-dark). Include
accessible headings and paragraph
text. Submit HTML.
Evaluation: layout correctness (40%),
usage of classes (30%), accessibility
(30%) — must pass contrast.
Exercise B (Intermediate): Build a site
header and hero using bg-gradient
and a custom CSS variable
--hero-accent. Build theme toggler
that inverts hero colors with
JS/localStorage.
Evaluation: Functionality (40%), code
clarity (30%), performance (10%),
accessibility (20%).
Exercise C (Advanced) — Theming
project: Using Sass, create a new
compiled bootstrap CSS where
$primary and $secondary are
replaced, add two extra semantic
colors ($brand-1, $brand-2) and
generate utility classes for them.
Provide the compiled CSS + SCSS
source + README.
Evaluation: Correct Sass overrides
(35%), utilities generation (30%),
documentation (15%), code quality
(20%).
8) Research
WCAG contrast requirements: For
normal text aim for ≥4.5:1 contrast
ratio; for large text (18pt or 14pt
bold) ≥3:1. Aim for 7:1 if you want AAA
high contrast where feasible.
Color semantics: Colors carry
meaning across cultures — red
often indicates error/danger, green
is success/positive in many
contexts (but careful: green vs red
color-blindness). Use icons and
text labels in addition to color to
convey meaning.
● Color blindness: About 8% of
males and 0.5% of females of
Northern European descent have
some form of red-green color
blindness. Design using shape +
text + icon, not color alone.
Use CSS variables for runtime
theming — it reduces rebuilds and
allows smooth transitions; Sass is
better for compile-time branding
(when you control the build
pipeline).
● Performance: Avoid huge
background images on hero
elements. Use responsive srcset or
CSS media queries. Use
background-size: cover; and
optimize images for the web.
9) advanced techniques
Generating utilities for custom colors
If you want .bg-brand-1, .text-brand-1
generated automatically, do this in
SCSS before importing bootstrap:
$my-colors: ( "brand-1": #ff7a59,
"brand-2": #6a5cff ); // Mixin to
generate utilities @each $name,
$color in $my-colors { .bg-#{$name} {
background-color: $color !important;
} .text-#{$name} { color: $color
!important; } .border-#{$name} {
border-color: $color !important; } }
Better: use Bootstrap's utilities API
(when available) to register custom
utilities in a structured way.
Smooth transitions when theme
toggles Add transitions for background and
color to avoid abrupt jumps:
:root, .theme-dark { transition: color
200ms ease, background-color
200ms ease; }
Be careful: large transitions can
cause repaints; keep them short.
Server-side rendering & theming
If you need the initial page render to
match a user preference saved
server-side, render the appropriate
class (theme-dark) on the <html>
element before sending HTML; avoid
FOUC (flash of unthemed content).
Accessibility testing automation
Integrate automated checks
(axe-core, pa11y) into CI to catch
contrast issues and missing aria
attributes.
● Test with keyboard-only
navigation and screen readers.
10) Common pitfalls
Pitfall: Using bg-primary with
text-white without checking the
actual contrast for the text size.
Avoid: Use text-bg-primary which
chooses a readable text color or run a
contrast test.
● Pitfall: Relying on color alone to
indicate status (e.g., green/red
only).
Avoid: Add icons, labels, or text.
● Pitfall: Changing only one
element’s color and forgetting
components (buttons, links)
leading to inconsistent themes.
Avoid: Use variables for global
colors and change once.
● Pitfall: Large background images
without responsive sources.
Avoid: Use srcset or smaller
images for mobile.
11) (capstone)
Title: Brandable Landing Page with
Theme Switcher
Requirements:
● Responsive hero with gradient
background and centrally placed
CTA.
● Three feature cards using
semantic text-bg-* classes.
● Navbar with brand color
controlled by CSS variable.
● Theme toggle (light/dark)
persisted to localStorage.
● Accessibility checks passed
(contrast and keyboard nav).
● Provide README with steps to
build and run (include npm scripts
or note CDN usage).
Deliverables:
● index.html, styles.scss, script.js,
README.md
● A short video/screenshots
showing theme toggle and
accessibility checks.
Grading rubric: Visual fidelity (30%),
code quality (25%), accessibility &
contrast (25%), documentation
(20%).
12) Example:
index.html
<!doctype html> <html lang="en">
<head> <meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-sc
ale=1"> <title>Bootstrap Colors
Lab</title> <link
href="https://cdn.jsdelivr.net/npm/bo
otstrap@5.3.0/dist/css/bootstrap.mi
n.css" rel="stylesheet"> <link
href="styles.css" rel="stylesheet">
</head> <body> <nav class="navbar
bg-body-tertiary px-3"> <a
class="navbar-brand"
href="#">LabBrand</a> <button
id="themeToggle" class="btn btn-sm
btn-outline-secondary">Toggle
Theme</button> </nav> <header
class="py-5 text-center text-white"
id="hero"> <div class="container"> <h1
class="display-5">Bootstrap Colors &
Backgrounds Lab</h1> <p
class="lead">Accessible themes,
gradients and utilities</p> <a
class="btn btn-lg btn-primary"
href="#">Get Started</a> </div>
</header> <main class="container
py-5"> <div class="row g-4"> <div
class="col-md-4"><div class="card
text-bg-primary"><div
class="card-body"><h5>Primary</h5><
/div></div></div> <div
class="col-md-4"><div class="card
text-bg-success"><div
class="card-body"><h5>Success</h5><
/div></div></div> <div
class="col-md-4"><div class="card
bg-light text-dark"><div
class="card-body"><h5>Light</h5></di
v></div></div> </div> </main> <script
src="script.js"></script> <script
src="https://cdn.jsdelivr.net/npm/boo
tstrap@5.3.0/dist/js/bootstrap.bundl
e.min.js"></script> </body> </html>
styles.css
:root{ --hero-bg:
linear-gradient(120deg, #0d6efd,
#6a11cb); --hero-text: #fff; }
.theme-dark { --hero-bg:
linear-gradient(120deg, #0b3954,
#072227); --hero-text: #e9eef5; }
#hero { background: var(--hero-bg);
color: var(--hero-text); transition:
background 200ms, color 200ms; }
.navbar { background: color-mix(in
srgb, var(--bs-body-bg) 80%, #000
20%); }
script.js
const btn =
document.getElementById('themeTog
gle'); if (localStorage.getItem('theme')
=== 'dark')
document.documentElement.classList
.add('theme-dark');
btn.addEventListener('click'
, () => {
document.documentElement.classList
.toggle('theme-dark'); if
(document.documentElement.classLis
t.contains('theme-dark')) {
localStorage.setItem('theme'
,
'dark'); }
else {
localStorage.removeItem('theme'); }
});
13) Contrast analyzers (browser
extensions) and automated linters
(axe-core).
● Image optimizers (e.g., imagemin,
or online tools) for background
photos.
● Sass for large projects; CSS
variables for runtime theme
switching.
● Use prefers-color-scheme media
query to honor system dark mode
by default:
@media (prefers-color-scheme: dark)
{ :root { /* set dark defaults or add
.theme-dark automatically */ } }
14) Final tips
Keep color definitions centralized
(Sass or CSS variables). Changing one
value should cascade.
● When designing components,
prefer semantic classes
(.bg-success) to inline styles.
Semantic classes aid
maintainability and machine
checking.
● Test with keyboard-only
navigation and screen readers;
color alone should never be the
only cue.
● Document color usage in a style
guide (primary, accent, success,
warning, error, info) so product
teams use consistent palettes.
● Use bg-gradient sparingly and
avoid combining many gradients
on one page which can distract.
No comments:
Post a Comment