Customising Components

Component Variables

Bootstrap 5 exposes CSS custom properties for many components. Override them to theme individual components without touching Sass.

Example

/* Override Bootstrap CSS variables (no Sass needed) */
:root {
  --bs-primary: #e91e63;
  --bs-primary-rgb: 233, 30, 99;
  --bs-border-radius: 0.75rem;
  --bs-btn-border-radius: 2rem;  /* pill buttons */
  --bs-card-border-radius: 1rem;
  --bs-input-border-color: #ced4da;
  --bs-input-focus-border-color: #e91e63;
  --bs-navbar-padding-y: 1rem;
}

CSS

Full Editor

Pro Tip

CSS variable overrides work without a Sass build — perfect for CDN-based Bootstrap setups.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned