Bootstrap - When You Need Shit That Just Works

Bootstrap is that big-ass CSS file from Twitter that won't die. Started around 2010 and somehow we're all still using it.

Upgrade broke everything. Bootstrap 4 to 5 completely fucked our project in 2021. Spent weeks fixing it, not because the changes were hard, but because they renamed every goddamn class. .ml-3 became .ms-3 and we had hundreds of templates that broke.

Build kept failing with some bullshit about can't resolve bootstrap scss import. Turns out they moved files around between versions. Spent hours thinking our webpack was broken before I found some buried note in their docs.

What You Actually Get

The grid works. 12 columns, does what you expect. col-md-6 means half-width on desktop, full on mobile. Never seen it break, it just does its job.

Problem is when you need layouts that don't fit their system. Try centering 5 equal columns - good fucking luck.

Components are fine I guess. Buttons, modals, forms. Had a modal z-index bug once where it rendered behind our navbar. Cost us a hotfix because customers couldn't close dialogs.

Tooltip positioning breaks sometimes when you have overflow:hidden parents. No idea why. data-bs-container="body" might fix it, might not.

The Customization Hell

Want different colors? Change $primary in your Sass file. Except Bootstrap generates like 20 variations of each color and you need to override all of them.

CSS specificity nightmare. Their selectors beat yours, so you end up with:

.btn-custom {
  background-color: #ff6b6b !important;
  border-color: #ff6b6b !important;
}

I've seen codebases with hundreds of !important rules just to fight Bootstrap. At that point why are you even using a framework?

File Size Hell

Full Bootstrap is a huge file. Tree-shaking helps until you need "just one more component" and you're back to shipping way too much CSS.

PurgeCSS is dangerous. It'll remove classes added by JavaScript. Learned this when it deleted all our modal classes and broke the UI.

Getting rid of jQuery in version 5 helped though. No more weird React conflicts and the JS bundle got way smaller.

CDN - Copy-Paste and Done

<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\">
<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js\"></script>

Copy, paste, works. Good for prototypes. Can't customize shit but sometimes that's exactly what you want.

npm - For Real Projects

npm install bootstrap

Pin the version unless you like surprises. Bootstrap updates break random stuff. Had dropdown positioning break once after an update - dropdowns started rendering off-screen for no reason. Lost half a day on that bullshit.

Customization Hell

Want different colors? Change $primary in your Sass. Except Bootstrap generates a bunch of color variations and you need to override all of them or they don't match.

CSS specificity nightmare. Bootstrap's selectors beat yours, so:

.btn-danger.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

Double class hack to beat their specificity without !important. Feels dirty but works.

The Real Problem

Spent more time fighting Bootstrap than it would've taken to write CSS from scratch. But when you need something working by Friday and it's Wednesday, Bootstrap ships on time.