Theory
Every Bootstrap site looks the same
FestConnect works and reflows nicely, but it looks like every other Bootstrap site: the same blue btn-primary, the same font, the same rounded corners. The organisers want the fest's warm orange brand, and a dark mode for the evening schedule screens on the projector.
You do not rebuild anything. Theming changes how the existing components look while your HTML and classes stay exactly as they are.
Theory
Repainting a house, not rebuilding it
The walls, doors, and rooms of a house are its structure; paint and fixtures are its look. To change the vibe you repaint, you do not knock down walls. A Bootstrap theme is the repaint: same grid, same buttons, same cards (the structure), but new colours, fonts, and corners (the look). The btn-primary on your button does not change; what 'primary' means does.
Theory
Ways to theme
From lightest to deepest:
- Override CSS: write your own rules loaded after Bootstrap to change colours/fonts (the Unit 1 cascade: last wins).
- Override variables: Bootstrap exposes CSS variables like
--bs-primary; set them to rebrand in bulk. - Colour modes: add
data-bs-theme="dark"to switch built-in dark mode. - Prebuilt theme: link a ready-made theme stylesheet that replaces the default look.
- Recompile Sass: change source variables and rebuild, for full control.
Practical
Rebranding FestConnect
<head>
<!-- Bootstrap first ... -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- ... THEN your overrides, so they win the cascade -->
<style>
:root { --bs-primary: #e8590c; } /* fest orange */
body { font-family: 'Poppins', sans-serif; }
</style>
</head>
<!-- dark mode for the projector schedule -->
<body data-bs-theme="dark">
<button class="btn btn-primary">Register</button> <!-- now orange -->
</body>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Why 'after Bootstrap'?
Your custom --bs-primary: #e8590c; only takes effect when your <style> is placed after the Bootstrap <link>. Which Unit 1 rule explains this, and what happens if you put your style before Bootstrap?
Show the answer
The cascade: when two rules have equal specificity, the last one loaded wins. Your override must come after Bootstrap so it beats Bootstrap's own value. Put it before, and Bootstrap's later default overwrites yours, so the button stays blue. This is the same load-order rule from the 'adding CSS' lesson, now doing real work.
Quiz
The organisers want a quick dark version of the schedule page with no custom CSS. What is the simplest built-in way in Bootstrap 5?
- Add data-bs-theme="dark" to <html> or a container
- Rename every btn-primary to btn-dark by hand
- Delete the Bootstrap link so the page goes plain
- There is no dark mode; you must recompile Sass
Show the answer
Add data-bs-theme="dark" to <html> or a container
Bootstrap 5 ships a colour-mode switch: data-bs-theme="dark" on <html> (whole page) or any element (that section) flips components to dark styling instantly, no custom CSS (A). Renaming classes by hand (B) is tedious and misses backgrounds/text. Deleting the link (C) removes all styling. Dark mode is built in (D is false), Sass is only for deeper customisation.
Watch out
Theming traps
1. Overrides loaded before Bootstrap: they lose the cascade and seem to 'do nothing'. Load your CSS after.
2. Editing bootstrap.min.css directly: never do this; the next update wipes your changes. Override in a separate file instead.
3. Confusing theme with layout: a theme changes colours/fonts, not the grid. If cards are in the wrong place, that is a grid problem, not a theme one.
Theory
Unit 2 done: a real front end
FestConnect is now responsive, branded, and componentised, all without hand-writing a media query. But it is still a static poster: buttons do nothing, the seat counter never moves, nothing validates. Unit 3 brings JavaScript, the language that makes the page react, starting with where JS runs and how it differs from the server-side code you met in BCA303 and BCA105.
Summary
Key takeaways
- A theme changes how components look (colours, fonts, corners), not your HTML or classes.
- Override by loading your own CSS after Bootstrap (cascade: last wins); never edit bootstrap.min.css directly.
- Rebrand in bulk by setting variables like --bs-primary.
- Switch built-in dark mode with data-bs-theme="dark" on <html> or a container.
- Prebuilt theme stylesheets and Sass recompiling give deeper control.
- Memory hook: repaint the house, do not rebuild it.