Bootstrap Versions

A Bootstrap version represents a particular release of the Bootstrap framework with its own features, components, classes, and improvements.

For example, Bootstrap 3, Bootstrap 4, and Bootstrap 5 have different APIs and class names in some areas.

Bootstrap was first publicly released in 2011. It was originally created at Twitter by Mark Otto and Jacob Thornton.

The first version provided reusable CSS and interface components for building web pages more consistently.

Bootstrap 2 was released in 2012. It improved the framework and introduced responsive design features.

Responsive features allowed websites to adapt more effectively to different screen sizes.

Bootstrap 3 was released in 2013. It introduced a stronger mobile-first approach and improved responsive layout capabilities.

Bootstrap 3 became a very widely used version of Bootstrap.

Bootstrap 4 was released in 2018. It introduced significant changes and improvements to the framework.

One important change was the extensive use of CSS Flexbox for layouts.

Bootstrap 5 was released in 2021. It introduced modern improvements and removed the dependency on jQuery.

Bootstrap 5 also expanded utility classes and improved customization.

Bootstrap 3 emphasized mobile-first design. This approach starts with styles for smaller screens and then uses responsive breakpoints for larger screens.

<div class="col-sm-6">
    Content
</div>

Bootstrap 4 made extensive use of CSS Flexbox. Flexbox provides useful tools for arranging, aligning, and distributing elements.

<div class="d-flex
justify-content-center">

    Content

</div>

Bootstrap 4 provided many utility classes for spacing, display, alignment, sizing, and other common styling tasks.

<div class="mt-3 p-4 text-center">
    Bootstrap 4
</div>

Bootstrap 5 removed the dependency on jQuery. Its interactive components use modern JavaScript instead.

This allows Bootstrap 5 projects to use Bootstrap's JavaScript components without adding jQuery as a dependency.

Bootstrap 5 expanded its utility API and introduced additional utility options for developers.

Utilities can be used for spacing, positioning, display, sizing, alignment, colors, and other common design requirements.

Bootstrap 5 provides support for right-to-left layouts.

RTL layouts are useful when developing interfaces for languages that are written from right to left.

Bootstrap 5 uses CSS custom properties in various components and utilities. This provides additional ways to customize Bootstrap interfaces.

:root {
    --bs-primary: #0d6efd;
}

Bootstrap 5.0 was the first major release in the Bootstrap 5 series. It brought the framework toward a more modern JavaScript and CSS architecture.

The release removed jQuery as a dependency and introduced several utility and component improvements.

Bootstrap 5.1 introduced additional improvements to components, utilities, documentation, and customization.

It continued the development of the Bootstrap 5 series.

Bootstrap 5.2 introduced improvements to customization and component behavior and made greater use of CSS custom properties.

It also introduced features that made color-mode customization easier.

Bootstrap 5.3 continued improving color modes, utilities, components, and customization.

It introduced and improved support for light and dark color modes.

Modern Bootstrap versions can support different color modes, including light and dark themes.

<html data-bs-theme="dark">
    ...
</html>

The data-bs-theme attribute can be used to apply a color mode to an element or document.

Bootstrap Icons is a separate icon library designed to work well with Bootstrap projects.

It is not included automatically with the core Bootstrap CSS and JavaScript package.

Developers may upgrade to newer Bootstrap versions to gain access to new features, improved components, better utilities, updated browser support, and modern development practices.

However, upgrading an existing project may require changes because some classes, components, or behaviors can change between major versions.

Major Bootstrap versions can introduce breaking changes. Therefore, developers should check the documentation and migration guide before upgrading a large project.

Some Bootstrap classes have changed between major versions. For example, Bootstrap 5 introduced several changes compared with Bootstrap 4.

Therefore, code written for one version should not automatically be assumed to work exactly the same way in another major version.

When starting a new project, developers should consider the version that matches their project's requirements, browser requirements, existing code, and available documentation.

For learning modern Bootstrap development, Bootstrap 5 is an important version to understand.

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">

The version number in the CDN URL identifies the Bootstrap release being loaded.

The version of Bootstrap used by a project depends on how Bootstrap was installed or included.

If a project uses a CDN, check the Bootstrap version specified in the CDN URL. If it uses downloaded files or a package manager, check the project's installed package version.

Bootstrap has changed significantly over time. Understanding the history of its major versions is useful when working with older projects.

For a new tutorial focused on modern Bootstrap development, Bootstrap 5 is the appropriate version to study because it uses modern JavaScript, provides extensive utilities, supports responsive layouts, and includes modern customization features.

While learning Bootstrap 5, it is still useful to know that Bootstrap 3 and Bootstrap 4 are widely encountered in older projects.