Bootstrap Update

Bootstrap Update - v5.0.2 → v5.3.3

Update Summary

Updated Bootstrap from version 5.0.2 to the latest stable version 5.3.3.

Changes Made

File: /themes/book/layouts/partials/docs/html-head.html

Before (v5.0.2)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
      crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"></script>

After (v5.3.3)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
      crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
        crossorigin="anonymous"></script>

What’s New in Bootstrap 5.3.3

Major Features (5.1.x - 5.3.x)

Color Modes (Dark Mode)

  • Native dark mode support with data-bs-theme="dark"
  • Automatic color scheme detection
  • Per-component color mode override

Improved CSS Variables

  • More CSS custom properties for easier customization
  • Better theming support
  • Enhanced color system

New Components & Features

  • Color mode toggle - Built-in dark/light mode switching
  • Enhanced focus - Better keyboard navigation visibility
  • Improved forms - Better form controls and validation
  • Updated utilities - New utility classes for common tasks

Performance Improvements

  • Smaller bundle size
  • Faster rendering
  • Improved accessibility (ARIA)

Bug Fixes

  • 200+ bug fixes since v5.0.2
  • Better cross-browser compatibility
  • Enhanced RTL (Right-to-Left) support

Breaking Changes (Minimal)

Bootstrap 5.3.3 is mostly backward compatible with 5.0.2. Minor changes:

  1. CSS Variables: Some CSS variable names changed (mostly internal)
  2. Focus Styles: New default focus ring (can be customized)
  3. Form Controls: Slightly different appearance (better UX)

Browser Support

  • Chrome/Edge: Latest 2 versions
  • Firefox: Latest 2 versions + ESR
  • Safari: Latest 2 versions
  • iOS Safari: Latest 2 versions
  • Android Browser: Latest version

Migration Impact

Low Risk Changes

✅ Layout Components: No breaking changes ✅ Grid System: Fully compatible ✅ Utilities: Backward compatible ✅ JavaScript Components: API unchanged

Test Areas

  • Forms and form validation
  • Modal dialogs
  • Dropdowns and popovers
  • Navigation components
  • Custom themed components

New Capabilities Available

1. Dark Mode Support

<html data-bs-theme="dark">
  <!-- Entire page in dark mode -->
</html>

<!-- Or per component -->
<div data-bs-theme="light">
  <!-- Light mode component in dark page -->
</div>

2. Enhanced Color Utilities

<div class="text-primary-emphasis">Enhanced primary text</div>
<div class="bg-primary-subtle">Subtle primary background</div>

3. Better Focus Indicators

/* Improved keyboard navigation visibility */
.focus-ring { /* New utility class */ }

4. Updated Form Controls

  • Better file inputs
  • Improved color picker
  • Enhanced validation styles

File Sizes

VersionCSS SizeJS SizeTotal
5.0.2159 KB59 KB218 KB
5.3.3157 KB57 KB214 KB

Result: Slightly smaller bundle size! 🎉

CDN Information

Source: jsDelivr (jsdelivr.net)

  • Availability: 99.9% uptime
  • Global CDN: Fast worldwide delivery
  • HTTP/2: Multiplexing support
  • Brotli Compression: Enabled

Rollback Plan

If issues arise, revert to v5.0.2:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
      crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"></script>

Resources

Testing Checklist

  • Hugo builds successfully
  • All pages render correctly
  • Navigation menus work
  • Forms display properly
  • Modals/dialogs function
  • Responsive breakpoints work
  • Mobile view is correct
  • No console errors

Status: ✅ Updated
Date: November 24, 2025
Impact: Low risk, backward compatible upgrade
Benefits: Bug fixes, performance improvements, dark mode support

Follow Us: