With Bootstrap, your default tool is named components—cards, alerts, list groups—and utilities are the second layer when you need alignment, spacing, or visibility tweaks without writing new CSS.
When to use components vs utilities
- Standard UI chrome (button, badge, alert) → Bootstrap component classes
- One-off vertical rhythm or flex alignment →
mt-3,d-flex,gap-2 - Product-specific branding → override variables or a thin custom stylesheet
This mirrors the hybrid approach in Utility CSS: hybrid components—but Bootstrap ships the component layer for you instead of building it from atoms.
Important interview questions and answers
- Q: Does using Bootstrap mean no custom CSS?
A: No. Bootstrap handles the baseline; custom CSS covers brand colors, unique layouts, and integrations Bootstrap does not model. - Q: How do you keep markup maintainable?
A: Learn the component vocabulary, avoid duplicating Bootstrap rules in custom selectors, and extract repeated clusters into partials or framework components (Blade, React, Vue).
Self-check
- Give an example where a Bootstrap component beats stacking utilities.
- When would you reach for
mt-4instead of editing component CSS?
Interview prep
- Bootstrap vs utility-first (Tailwind)?
Bootstrap ships opinionated components; utility-first stacks compose low-level classes. Many teams use both philosophies on different projects.