What is Bootstrap?

Bootstrap is a CSS framework: a pre-written library of styles and layout rules that gives you a consistent grid, typography scale, and set of components (buttons, cards, navbars, modals, and more) without writing that CSS yourself. Instead of styling a button from scratch, you add a class:

<button class="btn btn-primary">Save changes</button>

That one class gives the button padding, a border radius, a color, a hover state, and a focus ring — all defined once by Bootstrap and reused across every project that includes it.

Why teams use it

Writing consistent, responsive CSS from scratch for every project is slow, and it's easy for spacing, colors, and component states to drift out of sync as a codebase grows. Bootstrap solves that by giving a team a shared vocabulary: everyone building a card or a navbar reaches for the same classes, so the result looks consistent without a design system meeting. It also bakes in responsive behavior and basic accessibility (focus states, ARIA attributes on interactive components) that would otherwise be easy to forget.

The tradeoff is that you're working within someone else's design decisions. A default Bootstrap site has a recognizable look, and undoing that look to match a custom brand takes real effort (covered later in this course, in the lesson on customizing Bootstrap with Sass).

What's new in version 5

Bootstrap 5 is the current major version, and the most important change is that jQuery is gone. Earlier versions required jQuery for interactive components like modals and dropdowns; Bootstrap 5 rewrote all of that in plain JavaScript, so you no longer need to load jQuery just to make a dropdown work.

Other notable changes:

• Dropped support for Internet Explorer, allowing the CSS to use modern features.
• Replaced jQuery-based plugins with vanilla JS, still triggered via data-bs-* attributes (the bs prefix avoids clashing with other libraries' data-* attributes).
• Improved the grid system with a new xxl breakpoint for very large screens.
• Moved to a CSS custom-properties-friendly Sass architecture, making theme overrides more predictable.

<!-- Bootstrap 4: required a data-toggle attribute -->
<button data-toggle="modal" data-target="#myModal">Open</button>

<!-- Bootstrap 5: data attributes are namespaced with bs- -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

If you find older tutorials or Stack Overflow answers using data-toggle instead of data-bs-toggle, they're written for Bootstrap 4 — the classes mostly carry over, but the JavaScript data attributes do not.

What this course assumes

You should already be comfortable with HTML and basic CSS (selectors, the box model, flexbox). Bootstrap doesn't replace that knowledge — it gives you a faster way to apply it. Every class you'll learn in this course ultimately just sets CSS properties; knowing what those properties do is what lets you use Bootstrap well instead of guessing at class names until something looks right.