Training Trains Internship
Student login
← Tailwind CSS & Bootstrap learning path
Tailwind CSS & Bootstrap · Module 4 of 10

Customising Bootstrap

Change colours, fonts and spacing to match your brand.

📖 Key ideas

  1. Use Sass variables: $primary: #047857; before importing Bootstrap.
  2. CSS variables (--bs-primary) allow runtime theming.
  3. Import only the parts you need to reduce size.
  4. Dark mode: data-bs-theme="dark".
  5. Add your own classes for unique sections.
💡 Real-life example: Customising Bootstrap is repainting a rented flat: same rooms, your colours.
Sass variableBuild-time setting like $primary
--bs-* variableRuntime CSS variable
data-bs-themeAttribute for colour modes
Partial importIncluding only needed parts