When not to use Bootstrap and production tips
Bootstrap saves time, but ready-made solutions have a cost: extra code, a recognizable look, fighting someone else's styles. Before a new project it is worth honestly asking whether it fits, and before release — checking a few things that do not matter on a practice page.
When to do without it
| Situation | Why Bootstrap gets in the way |
|---|---|
| A unique design from a designer | Almost every component has to be overridden, and your own styles outweigh the benefit |
| One simple page | A grid and a couple of buttons are easier with the flexbox and grid from the tutorial |
| Every kilobyte matters | Even a trimmed build carries base styles you may not need |
| A React or Vue project with its own components | Bootstrap's scripts change the DOM directly and conflict with the framework |
Alternatives: plain CSS with grid and flexbox, the utility framework Tailwind CSS, component libraries made for a specific framework. For admin dashboards, internal tools and prototypes Bootstrap is still one of the fastest routes.
Pin the version
Always put the exact version in the CDN address, as in the course: bootstrap@5.3.3. An address without a version will one day load a new one, and the layout may break without a single change on your side. In an npm project the version is pinned by package-lock.json — commit it to Git.
Load only what you need
With a CDN you load the whole file — about 30 KB of CSS after compression. In a Vite project you can keep only the parts you need through Sass, as in the customization lesson. Scripts can be imported one by one too:
// src/main.js
import Collapse from 'bootstrap/js/dist/collapse';
import Modal from 'bootstrap/js/dist/modal';If the site only has a hamburger menu and modals, the code for the carousel, tooltips and other components does not end up in the bundle.
Check accessibility
Bootstrap gives a good base but does not do everything for you. Before release go through the list:
- images have a meaningful
alt; - icon buttons have an
aria-label; - every form field has a
<label>; - the page can be navigated with the Tab key, and focus is visible;
- color is not the only carrier of meaning.
Your own style
If you leave everything at the defaults, the site looks "like Bootstrap" — people notice. The minimum that changes the impression: your own $primary, your own font, different rounding. That is three lines of Sass or a few CSS variables.
Common mistake
Overriding Bootstrap styles with !important and long selectors like .navbar .nav-item .nav-link.active. Each such rule has to be beaten by the next, even longer one, and a month later the styles are impossible to maintain. First look for a Sass variable or a component CSS variable and change it — it is usually one line.