Skip to content
Chapter 02 of 04 · 3 lessons · ~29 min

Bootstrap in Practice

Use Bootstrap's components and utility classes, then customize Bootstrap so your site doesn't look like every other one.

YOUR PROGRESS0%
/ Lessons in this chapter
04
Bootstrap Components: Navbar, Cards and Modals How to build a responsive navbar, card layouts and modals with Bootstrap's components. Coming soon
05
Bootstrap Spacing and Utility Classes How to use Bootstrap's spacing, flex, text and display utilities to build layouts without extra CSS. Coming soon
06
How to Customize Bootstrap How to change Bootstrap's colors, fonts and shapes with CSS variables or Sass, so your site looks custom. Coming soon

Chapter practice task

Task: Build a navbar, card section and modal, then rebrand Bootstrap with your own colors and fonts

  1. Add a responsive navbar with a collapsing mobile menu.
  2. Build a three-card section and a contact modal.
  3. Use spacing and display utilities instead of custom CSS for layout tweaks.
  4. Change the primary color, font and border radius with CSS variables or Sass.

By the end of this chapter

  • You can use Bootstrap’s most common components correctly
  • You build layouts with utilities instead of extra CSS
  • Your Bootstrap sites match your brand

Quick answers for this chapter

Where do I find every component?

In the official docs at getbootstrap.com. Copy the example markup and adapt it.

How do I add spacing in Bootstrap?

With utilities like mt-4, py-5, px-3 and gap-3.

Can I change Bootstrap’s colors without Sass?

Yes, partly, with CSS variables in Bootstrap 5.3. Sass gives full control.