Bootstrap Do's and Don'ts

Bootstrap Do's and Don'ts Overview

Many Bootstrap mistakes come from small, specific decisions rather than a lack of overall knowledge—things like forgetting a wrapping row, hardcoding a color instead of using a utility, or overriding compiled CSS directly. Seeing the correct and incorrect version side by side makes these patterns easier to remember.

Reviewing do's and don'ts is especially useful right before a code review or when onboarding a new developer to a Bootstrap codebase, since it highlights conventions that aren't always obvious from the official documentation alone.

Bootstrap Do's and Don'ts Example

<!-- Don't: columns without a row, hardcoded color -->
<div class="container">
  <div class="col-6" style="background-color: #0d6efd;">Broken layout</div>
</div>

<!-- Do: proper row wrapper, utility color class -->
<div class="container">
  <div class="row">
    <div class="col-6 bg-primary text-white">Correct layout</div>
  </div>
</div>

The 'don't' example places a column directly inside a container without a row, breaking the flex context, and hardcodes a color instead of using Bootstrap's utility classes. The 'do' example fixes both issues: a proper row wraps the column, and bg-primary with text-white replaces the inline style.

Top 10 Bootstrap Do's and Don'ts Examples

These are ten common do's and don'ts worth memorizing early in any Bootstrap project.

Popular Real-World Bootstrap Do's and Don'ts Examples

These do's and don'ts address the mistakes that come up most often in real Bootstrap code reviews.

Best Practices

• Do treat the grid system as the primary layout tool before reaching for flex or custom CSS.
• Do use theme color and spacing utilities instead of inline styles wherever possible.
• Do customize through Sass variables or CSS custom properties for anything beyond a one-off tweak.
• Do use semantic, real interactive elements (button, a) for their intended purposes.
• Do version-pin Bootstrap everywhere it's referenced, including CDN links and package.json.
• Do test interactive components with both mouse and keyboard before considering them finished.
• Do keep a short list of project-specific conventions so the whole team follows the same do's and don'ts.

Common Mistakes

• Don't nest columns directly inside a container without a wrapping row.
• Don't hardcode colors or spacing values that already have a matching Bootstrap utility class.
• Don't edit Bootstrap's compiled CSS or JS files directly; changes will be lost on the next update.
• Don't use non-interactive elements with click handlers instead of real buttons or links.
• Don't link an unpinned or 'latest' CDN URL in a production site.
• Don't assume a component works without checking its required data-bs-* attributes and matching ids.

Key Takeaways

• Most Bootstrap do's and don'ts come down to using the framework's own system instead of working around it.
• Grid structure, color utilities, and component wiring are the areas where small mistakes happen most.
• Customization should always flow through Sass or CSS variables, never direct edits to compiled files.
• Semantic HTML and accessible attributes should be treated as non-negotiable, not optional polish.
• Version pinning prevents an entire class of 'it worked yesterday' bugs.