Demo

Bootstrap Customization

A guided demo for making Bootstrap feel more deliberate and closer to a Figma direction.

This demo helps you practice customizing Bootstrap so it better matches a design direction instead of feeling like an untouched framework.

Files

What Is in the Repo

  • index.html: a simple Bootstrap starter page
  • bootstrap-customization-demo.html: a guided practice page
  • css/style.css: shared styles and font setup
  • css/bootstrap-customization-demo.css: the main lesson file with comments and examples

What You Should Learn

  • How to change Bootstrap variables to update multiple elements at once
  • How to adjust colors, backgrounds, and border radius
  • How to customize a navbar without rewriting the whole page
  • How to edit the Bootstrap hamburger icon using CSS
  • How to connect design choices from Figma to front-end code

Start by downloading the ZIP, opening bootstrap-customization-demo.html in your browser, and reading the comments in the CSS file.