Bootstrap Best Practices
4 min read Quiz at the end
Best practices: semantic HTML, Sass variables, no !important, visually-hidden for ARIA.
Bootstrap Best Practices
- Always start with a
<meta name="viewport"> tag - Use
container, row, and col together — never skip the row - Use
col-{breakpoint}-{size} for responsive layouts - Prefer semantic HTML —
<button> not <div class="btn"> - Use utility classes sparingly — too many make HTML unreadable
- Customize via Sass variables, not by overriding CSS directly
- Initialize JS components with vanilla JS, not jQuery
- Use
visually-hidden for screen-reader-only text - Test on real mobile devices, not just desktop resize
- Use Bootstrap Icons or another icon library to match Bootstrap's style
Topic Quiz · 3 questions
Test your understanding before moving on
1. Which Bootstrap class centers block elements horizontally?
💡 mx-auto (margin-left:auto margin-right:auto) horizontally centers block elements.
2. What is the correct way to customize Bootstrap colors?
💡 Override $primary etc. Sass variables before @import "bootstrap" for proper theming.
3. What does visually-hidden class do?
💡 visually-hidden hides from visual display but keeps in accessibility tree.