TL;DR

Bootstrap’s color contrast calculations are now compliant with WCAG 2.1 standards, improving accessibility for users with visual impairments.

Breaking

None.

New

None.

Fixes Worth Knowing

• Improved color contrast for better accessibility (WCAG 2.1).
• Spinner distortion in flex containers is resolved.
• Search input cancel buttons now have a pointer cursor.
• Tooltips added to example buttons in documentation (documentation tool - guides users).

Before You Upgrade

None.

TL;DR

Bootstrap now supports more consistent theming (dark mode) and improved floating form labels, enhancing usability and customization.

New

• .d-inline-grid utility class added for easier grid layouts.
• Expanded use of --bs-border-radius variables for greater styling control (CSS variables).

Fixes Worth Knowing

• Tooltips now position correctly with custom placement options.
• Floating form labels display correctly with multi-line text and disabled states.

Before You Upgrade

If you’re using custom Sass, review your calc() functions to ensure compatibility with the new variable interpolation checks.

TL;DR

Bootstrap now supports horizontal collapsing (expanding/collapsing content sideways) via a new class, improving layout flexibility.

Breaking

• color-adjust in Sass files has been replaced with print-color-adjust due to Autoprefixer updates. (Dependency change)

New

• Horizontal Collapse: A new class enables collapsing content horizontally.
• Accessibility Improvements: Enhanced color contrast and ARIA attributes for dropdowns and other components.

Fixes Worth Knowing

• small font size now renders as a whole pixel value (14px) for consistency.
• Fixed broken links in documentation.

Before You Upgrade

• If you customize Bootstrap’s Sass directly, review your code for uses of color-adjust and update to print-color-adjust.

TL;DR

Bootstrap now includes a security fix addressing a potential cross-site scripting (XSS) vulnerability in tooltips and popovers, requiring review if you heavily rely on user-supplied content within these components.

Breaking

• Tooltips and Popovers: HTML content is now sanitized to prevent XSS attacks (security enhancement).

New

• NuGet Packages: Bootstrap now supports content files for NuGet (package manager for .NET).

Fixes Worth Knowing

• Dropdowns: Correctly handles invalid selectors in data-target attributes.

Before You Upgrade

Review any custom tooltip or popover implementations that rely on unfiltered HTML content to ensure compatibility with the new sanitizer.

TL;DR

Bootstrap 4 significantly updates form controls and input groups, requiring code adjustments for validation and custom elements.

Breaking

• Form Controls: Checkboxes and radios now use a <div> wrapper with sibling <input> and <label> elements. (HTML structure change)
• Input Groups: Require .input-group-{prepend|append} classes for validation and custom elements. (Class names changed)
• Responsive Tables: Use parent classes instead of direct table styling. (Accessibility improvement)
• Column Labels: .col-form-legend is removed; use .col-form-label instead. (Class consolidation)

New

• Vertically Centered Modals: Use .modal-dialog-centered for easy vertical alignment. (Layout option)
• Dropdown Variants: New dropleft and dropright options added. (UI flexibility)

Fixes Worth Knowing

• Links, buttons, and other interactive elements now have cursor: pointer by default. (Usability improvement)

Before You Upgrade

Review the [Bootstrap Migration Docs](https://getbootstrap.com/docs/4.0/migration/#beta

TL;DR

Bootstrap 3 is here, bringing a fully responsive, mobile-first approach with a revamped grid system (now with .col-xs, .col-sm, .col-md, and .col-lg tiers) and standardized sizing for components.

Breaking

• Navbar: Requires a .navbar-header and uses .navbar-left/.navbar-right instead of .pull-left/.pull-right. .nav-collapse is now .navbar-collapse.
• Accordion: Removed; functionality is now part of the extended .panel component.
• Button/Input Sizing: .btn-mini, .btn-small, .btn-large are replaced with .btn-xs, .btn-sm, .btn-lg. Similar changes for form inputs.
• Labels: .label-default is now required for the default gray label.
• Inline Forms: Now require .form-group for proper alignment.
• Alerts: Dismissable alerts now require .alert-dismissable.

New

• Accessibility: Improved ARIA attributes and semantic HTML for better accessibility compliance

TL;DR

Bootstrap now requires a more recent version of jQuery due to updated dependencies.

Fixes Worth Knowing

• Fixed a dropdown issue in Firefox when middle-clicking, and on mobile devices.

Before You Upgrade

Ensure your project uses a compatible version of jQuery – check the Bootstrap documentation (JavaScript framework) for details.

TL;DR

Bootstrap now includes robust JavaScript plugins (interactive components) for common UI elements like modals, dropdowns, and tooltips, significantly expanding its functionality beyond basic styling.

Breaking

• .fixed-container() replaces .container() mixing (CSS preprocessor change).
• Static .span1-16 grid classes are removed (CSS grid system change).

New

• JavaScript Plugins: Modals, alerts, dropdowns, and more are now interactive with included jQuery plugins.
• Grid Columns: Added .one-third and .two-thirds for more flexible layouts.

Fixes Worth Knowing

• Improved form styling with error, warning, and success states.
• Enhanced button and alert readability and consistency.
• HTML5 form support via generalized selectors.

Before You Upgrade

• Update your Less compilation process to use .fixed-container() instead of .container().
• Replace any usage of .span1 through .span16 grid classes with the responsive grid system (e.g., .col-md-6).