History & Versions of Bootstrap
Trace Bootstrap's evolution from version 1 through version 5, including the removal of the jQuery dependency and where the framework stands today.
Introduction
Bootstrap has changed a great deal since its first public release in 2011. Understanding its version history helps you recognize old code you might encounter in tutorials or legacy projects, and it explains why modern Bootstrap 5 code looks different from what you might find in an older Stack Overflow answer.
- The major milestones from Bootstrap 1 to Bootstrap 5.
- Why Bootstrap 4 switched from Less to Sass.
- Why jQuery was removed in Bootstrap 5.
- Where the framework stands as of today.
Bootstrap 1 and 2
Bootstrap 1.0 launched in August 2011 with a basic grid, typography styles, and a handful of components. It used the Less CSS preprocessor. Bootstrap 2, released in January 2012, added a responsive design overhaul, so layouts could adapt to different screen sizes for the first time, along with new components like the top navigation bar and improved form styling.
Bootstrap 3
Released in August 2013, Bootstrap 3 was a major rewrite that adopted a "mobile-first" approach, meaning styles were designed for small screens first and then progressively enhanced for larger ones. It introduced the flat, minimalist design trend that was popular at the time and became one of the most widely adopted versions of the framework, still found in many older production websites today.
Bootstrap 4
Bootstrap 4 arrived in January 2018 after a long beta period. It switched the underlying preprocessor from Less to Sass, replaced the old grid's float-based layout with Flexbox, added a new spacing and sizing utility system, and introduced the Card component to replace the older panels, wells, and thumbnails. It also added a new, smaller breakpoint (extra small) at the low end and reorganized the grid tiers.
<!-- Bootstrap 4 card example --><div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">Some quick example text for the card.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>Click Run to see what this code prints.
Bootstrap 5
Bootstrap 5 was released in May 2021 and is the current major version as of today. It dropped Internet Explorer 11 support, switched icons from the old Glyphicons to a separate Bootstrap Icons library, added a new extra-extra-large (xxl) breakpoint, improved the utility API for generating custom utility classes, and refined offcanvas menus and other components. Bootstrap 5.3, released in 2023, added built-in support for dark mode via a `data-bs-theme` attribute.
Removing the jQuery Dependency
From version 1 through version 4, Bootstrap's interactive components, like modals, dropdowns, tooltips, and carousels, relied on jQuery to handle DOM manipulation and events. jQuery was extremely popular when Bootstrap was created, but by the late 2010s, modern JavaScript itself gained most of the features developers used to need jQuery for.
Bootstrap 5 rewrote all of its JavaScript plugins in plain, "vanilla" JavaScript, removing the jQuery dependency entirely. This made Bootstrap lighter, faster, and easier to use alongside modern JavaScript frameworks like React, Vue, and Angular, which often conflict with jQuery's direct DOM manipulation approach.
If you see JavaScript code in a tutorial that uses `$('.modal').modal('show')`, that is old, jQuery-based Bootstrap 4 or earlier syntax. In Bootstrap 5, you either use `data-bs-*` attributes or plain JavaScript like `new bootstrap.Modal(element)`.
Where Bootstrap Stands Today
| Version | Released | Key Change |
|---|---|---|
| Bootstrap 1 | 2011 | First public release, built with Less |
| Bootstrap 2 | 2012 | Added responsive design |
| Bootstrap 3 | 2013 | Mobile-first rewrite, flat design |
| Bootstrap 4 | 2018 | Sass, Flexbox grid, Card component |
| Bootstrap 5 | 2021 | jQuery removed, new breakpoint, dark mode (5.3) |
Common Mistakes
- Copying jQuery-based JavaScript snippets from old tutorials into a Bootstrap 5 project.
- Mixing class names across versions, such as using Bootstrap 3's `.col-xs-6` in a Bootstrap 5 project instead of `.col-6`.
- Assuming all Bootstrap versions share the same grid breakpoints.
- Forgetting that Bootstrap 5 needs its own JS bundle since it no longer depends on jQuery.
Best Practices
- Always check which Bootstrap version a tutorial or Stack Overflow answer is using before copying code.
- Use Bootstrap 5 for new projects unless you have a specific reason to support older browsers.
- Read the official migration guide when upgrading an existing project between major versions.
- Bookmark the version-specific documentation, since class names and behavior can differ between versions.
Frequently Asked Questions
Yes, many existing production sites still run on Bootstrap 4, but all new projects should use Bootstrap 5.
No. Bootstrap 5's JavaScript components are written in vanilla JavaScript and do not require jQuery.
Bootstrap 5 is the current major version, with incremental releases like 5.3 adding features such as native dark mode support.
Key Takeaways
- Bootstrap has evolved through five major versions since 2011.
- Bootstrap 3 introduced the mobile-first approach still used today.
- Bootstrap 4 moved from Less to Sass and from floats to Flexbox.
- Bootstrap 5 removed the jQuery dependency and added a new xxl breakpoint and dark mode support.
Summary
Bootstrap's history shows a framework that has continuously modernized itself to match the way developers actually build websites. Now that you understand where Bootstrap came from and how it changed, the next lesson looks at why learning Bootstrap is still a valuable skill for developers today.