Common Mistakes & Best Practices

Introduction

You now know most of Bootstrap's grid, components, utilities, and JavaScript. This lesson steps back from any single feature to cover the mistakes that consistently show up in real Bootstrap projects — and the habits that prevent them — so the sites you ship stay fast, responsive, and accessible.

Over-Customizing with Custom CSS

The single most common Bootstrap mistake is reaching for custom CSS — often with !important — to override spacing, colors, or alignment that a built-in utility class already handles. This produces a growing custom.css file that fights the framework, is fragile across Bootstrap upgrades, and duplicates logic that already exists.

/* Avoid: */
.my-card {
  margin-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
}

<!-- Prefer: -->
<div class="card d-flex justify-content-between mt-4">
  <!-- ... -->
</div>

Custom CSS is still the right tool for things Bootstrap genuinely does not offer — a unique illustration, a bespoke animation, a very specific brand pattern. The mistake is using it as the default instead of the last resort. When you do need repeated custom styling, prefer overriding Bootstrap's Sass variables (covered in the previous lesson) so the change stays consistent everywhere that variable is used.

Not Testing Responsive Breakpoints

It is easy to build and check a layout only at the browser window's current width and assume the grid classes will "just work" everywhere else. In practice, columns wrap unexpectedly, nav bars overflow, and cards touch each other because a breakpoint prefix was missed or misapplied.

<!-- Looks fine on desktop, but col-4 never adapts on mobile -->
<div class="row">
  <div class="col-4">A</div>
  <div class="col-4">B</div>
  <div class="col-4">C</div>
</div>

<!-- Better: stacks on mobile, three columns from md up -->
<div class="row">
  <div class="col-12 col-md-4">A</div>
  <div class="col-12 col-md-4">B</div>
  <div class="col-12 col-md-4">C</div>
</div>

Accessibility: Icon-Only Buttons

A button that only shows an icon (like a trash can or a hamburger menu) is invisible to screen readers unless it has an accessible name. This is one of the most frequent accessibility failures in Bootstrap UIs built quickly from icon components.

<!-- Inaccessible: screen reader announces "button" with no context -->
<button class="btn btn-outline-danger">
  <i class="bi bi-trash"></i>
</button>

<!-- Accessible: -->
<button class="btn btn-outline-danger" aria-label="Delete item">
  <i class="bi bi-trash" aria-hidden="true"></i>
</button>

Accessibility: Color Contrast & Focus

Custom colors applied on top of Bootstrap (especially light text on light buttons, or muted text on a colored background) frequently fail WCAG contrast ratios. Removing Bootstrap's default focus outlines for aesthetic reasons, without replacing them, also breaks keyboard navigation for sighted keyboard users.

/* Avoid — removes focus visibility with nothing to replace it */
.btn:focus {
  outline: none;
  box-shadow: none;
}

Bloated Bundle Size

Loading the full bootstrap.min.css and bootstrap.bundle.min.js from a CDN is fine for a prototype, but for a production site that uses only a fraction of Bootstrap's components, a Sass build with selective imports (from the previous lesson) can cut the shipped CSS considerably, improving load time.

Grid & Layout Pitfalls

Two grid mistakes come up repeatedly: nesting a .row directly inside a .col without an extra wrapping .row/.col structure correctly (the gutters compound in confusing ways when nesting is done carelessly), and forgetting that column classes need a percentage total of 12 or less per row on a given breakpoint, or they wrap unexpectedly.

<div class="row">
  <div class="col-md-8">
    Main content
    <div class="row">
      <div class="col-6">Nested A</div>
      <div class="col-6">Nested B</div>
    </div>
  </div>
  <div class="col-md-4">Sidebar</div>
</div>

JavaScript Component Pitfalls

As covered in the JavaScript components lesson, the most frequent runtime issue is loading bootstrap.min.js (without Popper) while still using dropdowns, tooltips, or popovers — those components silently fail to position correctly. Always use bootstrap.bundle.min.js unless you are managing Popper yourself.

Best Practices Checklist

Frequently Asked Questions

Key Takeaways

Summary

Most Bootstrap problems in real projects trace back to fighting the framework instead of using its tools as designed, skipping responsive verification, or overlooking accessibility basics that take minutes to fix. With these habits in place, you're ready for the final lesson: planning and building a complete, real-world responsive landing page that ties together everything from this course.