Customizing Bootstrap with Sass and Building a Page

Out of the box, Bootstrap sites tend to look alike: the same blue primary color, the same border radius, the same fonts. The framework was never meant to be used only with defaults. In this final lesson you will learn how to customize Bootstrap at the source using Sass, and then apply everything from this course to assemble a polished landing page.

Why Sass Instead of Overrides?

You could override Bootstrap with a stylesheet full of custom rules, but that approach fights the framework: you end up chasing specificity, duplicating values, and shipping CSS for components you never use. Bootstrap is written in Sass, and nearly every visual decision — colors, spacing, radii, breakpoints, shadows — is a Sass variable flagged with !default. Set your own value before importing Bootstrap and the entire framework recompiles around your design, consistently, everywhere.

Setting Up the Build

Install Bootstrap and a Sass compiler with npm:

bash

npm install bootstrap sass

Create a scss/custom.scss file. The order of operations matters: load Bootstrap functions first, then your variable overrides, then the rest of the framework.

scss

// 1. Functions come first
@import "../node_modules/bootstrap/scss/functions";

// 2. Your overrides
$primary: #6f42c1;
$success: #1a9e74;
$border-radius: 1rem;
$font-family-sans-serif: "Inter", system-ui, sans-serif;
$enable-shadows: true;

// 3. The framework
@import "../node_modules/bootstrap/scss/bootstrap";

Compile it with npx sass scss/custom.scss dist/custom.css --watch and link the generated file instead of the CDN stylesheet. Change $primary once and every button, link, badge, and form focus ring updates together.

Trimming and Extending

For production you can import only the parts you use — grid, utilities, buttons, cards — which meaningfully shrinks the CSS. You can also extend the theme map to add your own semantic color:

scss

$custom-colors: ("brand": #ff6b35);
$theme-colors: map-merge($theme-colors, $custom-colors);

After recompiling, classes like .btn-brand, .text-bg-brand and .border-brand exist automatically. Bootstrap 5.3 also exposes CSS custom properties (variables prefixed --bs-), so quick runtime tweaks — like theming a single card — are possible without recompiling at all.

Building the Landing Page

Now combine the whole course into one page. A proven structure:

Navbar — .navbar .navbar-expand-lg with your brand and a collapsing menu (Lesson 7).
Hero — a full-width section using spacing utilities (py-5), display headings (display-4), lead text and two call-to-action buttons (Lessons 4 and 6).
Features — a responsive grid: .row .row-cols-1 .row-cols-md-3 .g-4 filled with cards (Lessons 3 and 8).
Social proof — a table of plans with badges, or a carousel of testimonials (Lessons 11 and 12).
Signup form — floating labels and input groups inside a modal or offcanvas (Lessons 9, 10 and 12).
Footer — background and border utilities with muted link colors (Lesson 5).

Because every section uses theme variables, the page instantly adopts your Sass customizations. Test each breakpoint with browser dev tools: the grid should collapse gracefully from three columns to one, and the navbar should switch to its toggler below lg.

Production Checklist

Compile Sass with --style=compressed and purge unused component imports.
Verify color contrast after changing theme colors; utilities like .text-bg-* help but do not guarantee AA contrast for custom palettes.
Keep interactive components on bootstrap.bundle.min.js loaded just before </body>.
Run Lighthouse: a well-built Bootstrap page should score high on performance and accessibility with minimal effort.

Key Takeaways

Customize Bootstrap by overriding Sass variables between the functions import and the main framework import — never by fighting compiled CSS.
map-merge on $theme-colors generates a full suite of utility and component classes for your own brand colors.
Importing only needed modules cuts bundle size; CSS custom properties allow runtime tweaks.
A complete landing page is just course components composed in order: navbar, hero, feature grid, proof section, form, footer.

Congratulations — you have completed the Bootstrap course! A great next step is exploring our Docker tutorial to learn how to containerize and ship the sites you build.