Bootstrap 5.3 Overview

Bootstrap 5.3.8 is a powerful front-end framework for building responsive, mobile-first websites. This skill covers installation, project setup, and foundational concepts.

Quick Start Options

CDN (Fastest Setup)

For prototyping or simple projects, use CDN links. Include CSS in <head> and JS before closing </body> :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Always use bootstrap.bundle.min.js (includes Popper.js) unless separately managing Popper.

Package Manager Installation

npm:

npm install bootstrap@5.3.8

yarn:

yarn add bootstrap@5.3.8

pnpm:

pnpm add bootstrap@5.3.8

Bun:

bun add bootstrap@5.3.8

Composer (PHP):

composer require twbs/bootstrap:5.3.8

NuGet (.NET):

Install-Package bootstrap -Version 5.3.8

After installation, import in JavaScript:

import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.bundle.min.js'; // Or import specific components import { Modal, Tooltip } from 'bootstrap';

ES Module Usage

For native ESM usage in browsers without a bundler, use bootstrap.esm.min.js with an importmap:

For older browsers, include the es-module-shims polyfill.

Starter Template

Every Bootstrap page requires this minimal structure:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> </head> <body> <h1>Hello, Bootstrap!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script> </body> </html>

Critical requirements:

<!doctype html> declaration for proper rendering
Responsive viewport meta tag with width=device-width, initial-scale=1
CSS loaded in <head> , JavaScript before </body>

Build Tool Integration

For production applications, integrate Bootstrap with build tools for tree-shaking and optimization.

Vite Setup

npm create vite@latest my-project -- --template vanilla cd my-project npm install bootstrap @popperjs/core npm install -D sass

Import in main.js:

import './scss/styles.scss'; import * as bootstrap from 'bootstrap';

Create src/scss/styles.scss :

// Import Bootstrap @import "bootstrap/scss/bootstrap";

See references/build-tools.md for Parcel and Webpack setup guides.

Ruby on Rails 8 Setup

Rails 8 uses Propshaft as the default asset pipeline. Three integration approaches:

Approach 1: Importmaps + bootstrap gem (no Node.js):

bundle add bootstrap -v "~> 5.3.8" bundle add dartsass-rails bin/rails dartsass:install

Approach 2: cssbundling-rails (full Node.js):

rails new myapp --css bootstrap

Or for existing apps:

bundle add cssbundling-rails bin/rails css:install:bootstrap

Approach 3: CDN only — add CDN links directly to layout.

See references/rails-setup.md for complete Rails 8 integration guides including Turbo/Stimulus patterns, form helpers, and Bootstrap Icons.

JavaScript Components

Bootstrap 5 components can be initialized two ways:

Data Attributes (No JavaScript Required)

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> Open Modal </button>

Programmatic Initialization

// Get element const myModal = document.getElementById('myModal');

// Create instance const modal = new bootstrap.Modal(myModal, { keyboard: false, backdrop: 'static' });

// Use methods modal.show(); modal.hide(); modal.toggle(); modal.dispose();

Component Methods Pattern

All components follow consistent patterns:

getInstance()
Get existing instance
getOrCreateInstance()
Get or create instance
dispose()
Destroy instance and clean up
Component-specific methods (show, hide, toggle, etc.)

See references/javascript-api.md for the complete JavaScript API including events, methods, and options for all components.

Framework Considerations

Bootstrap JavaScript is not fully compatible with React, Vue, or Angular—both Bootstrap and the framework may attempt to mutate the same DOM elements, causing bugs. For these frameworks, use dedicated packages:

React: React Bootstrap
Vue 3: BootstrapVueNext
Angular: ng-bootstrap

Bootstrap CSS works with any framework without issues.

Accessibility

Bootstrap provides accessible components out of the box, but proper implementation remains the developer's responsibility. Understanding Bootstrap's accessibility features ensures WCAG 2.2 compliance.

Key Accessibility Features

Visually Hidden Content:

Use .visually-hidden to hide content visually while keeping it accessible to screen readers:

<p class="text-danger"> <span class="visually-hidden">Error: </span> This field is required </p>

Use .visually-hidden-focusable for skip links that appear on keyboard focus:

<a class="visually-hidden-focusable" href="#main-content"> Skip to main content </a>

Color Contrast Considerations:

Bootstrap's default colors may not meet WCAG contrast requirements in all contexts:

Text requires 4.5:1 contrast ratio (WCAG AA)
Large text (18pt+) requires 3:1 ratio
Non-text elements (icons, borders) require 3:1 ratio

Always test color combinations. The default .text-muted on light backgrounds may need adjustment for compliance. Consider using .text-body or .text-body-emphasis for better contrast when needed.

Reduced Motion Support:

Bootstrap respects the prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) { /* Transitions and animations are disabled or minimized */ }

Components like carousels, modals, and collapse automatically reduce or disable animations for users who prefer reduced motion.

ARIA Implementation

Interactive components include appropriate ARIA attributes:

<div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Section Title </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"> <div class="accordion-body">Content here</div> </div> </div>

Bootstrap handles aria-expanded , aria-controls , and aria-hidden automatically for JavaScript-powered components.

Focus Management

Bootstrap manages focus appropriately for interactive components:

Modals trap focus within the dialog
Dropdowns return focus when closed
Tooltips and popovers are keyboard accessible

For custom implementations, use Bootstrap's focus trap utilities or manage focus manually.

RFS (Responsive Font Sizes)

RFS is Bootstrap's responsive scaling engine that automatically adjusts font sizes, margins, padding, and other properties based on viewport dimensions.

How RFS Works

RFS generates calc() functions combining rem units with viewport width (vw ) for fluid scaling:

// Input .title { @include font-size(4rem); }

// Output .title { font-size: calc(1.525rem + 3.3vw); } @media (min-width: 1200px) { .title { font-size: 4rem; } }

Properties scale smoothly between minimum and maximum viewport sizes, then lock at the specified value for larger screens.

Using RFS Mixins

Font sizes:

.heading { @include font-size(2.5rem); }

Other properties:

.card { @include padding(2rem); @include margin(1.5rem); @include rfs(1rem, border-radius); }

RFS Functions

For properties within media queries or complex calculations:

.responsive-element { @include media-breakpoint-down(lg) { padding: rfs-fluid-value(2rem); font-size: rfs-fluid-value(1.125rem); } }

Configuration

RFS behavior is controlled via Sass variables:

$rfs-base-value: 1.25rem; // Minimum font size $rfs-unit: rem; // Output unit $rfs-breakpoint: 1200px; // Max viewport for scaling $rfs-factor: 10; // Scaling intensity

Lower $rfs-factor values (e.g., 5) create more dramatic scaling; higher values (e.g., 15) reduce the effect. The default is 10.

RTL (Right-to-Left) Support

Bootstrap 5 includes RTL support. To enable:

Set dir="rtl" on <html> element
Use RTL stylesheet:

Logical properties (start /end ) replace directional ones (left /right ).

Browser Support

Bootstrap 5.3 supports modern browsers only:

Browser Support Level

Chrome Latest 2 versions

Firefox Latest 2 versions

Safari Latest 2 versions

Edge Latest 2 versions

iOS Safari Latest 2 versions

Android Chrome Latest 2 versions

Not supported: Internet Explorer (any version). Bootstrap 5 dropped IE support entirely, enabling modern CSS features like CSS custom properties, flexbox, and grid without fallbacks.

Mobile Considerations

Bootstrap is designed mobile-first. All components are touch-friendly with appropriate tap targets (minimum 44x44 pixels for interactive elements). Test on actual devices, as browser DevTools cannot fully simulate touch interactions, scroll behavior, or performance characteristics.

CSS Variables

Bootstrap 5.3 uses CSS custom properties extensively:

:root { --bs-blue: #0d6efd; --bs-primary: #0d6efd; --bs-body-font-family: system-ui, -apple-system, sans-serif; --bs-body-font-size: 1rem; --bs-body-line-height: 1.5; }

Override at root level or component level:

.my-component { --bs-primary: #custom-color; }

Dependencies

Bootstrap 5.3 JavaScript requires:

Popper.js (included in bootstrap.bundle.js ) - Required for dropdowns, popovers, tooltips, and any component with positioning
No jQuery dependency (removed in Bootstrap 5)

Choose the right bundle:

bootstrap.bundle.js
Includes Popper.js (recommended for most projects)
bootstrap.js
Without Popper.js (use when managing Popper separately or not using positioned components)

File Structure

When installed via npm:

node_modules/bootstrap/ ├── dist/ │ ├── css/ │ │ ├── bootstrap.css │ │ ├── bootstrap.min.css │ │ ├── bootstrap.rtl.css │ │ └── bootstrap.rtl.min.css │ └── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js │ ├── bootstrap.bundle.js │ └── bootstrap.bundle.min.js └── scss/ ├── bootstrap.scss ├── _variables.scss └── ...

Available CSS builds:

File Contents

bootstrap.css

Complete framework (default)

bootstrap-grid.css

Grid system and flex utilities only

bootstrap-utilities.css

Utility classes only

bootstrap-reboot.css

Reboot normalization only

Each variant is available in .min.css (minified) and .rtl.css (right-to-left) versions.

Key Concepts

Mobile-First

Bootstrap is built mobile-first. Base styles target mobile devices, with responsive enhancements applied via media queries at larger breakpoints. This approach means:

Start with mobile layout, add complexity for larger screens
Use min-width media queries (styles apply at breakpoint and up)
Avoid max-width queries unless specifically targeting smaller screens

Box-sizing

Bootstrap sets box-sizing: border-box globally, switching from the default content-box . This ensures padding doesn't affect the final computed width of an element, simplifying sizing calculations. This may conflict with third-party widgets (e.g., Google Maps). Override with .selector { box-sizing: content-box; } when needed.

Reboot

Bootstrap's Reboot provides opinionated CSS normalization for consistent cross-browser rendering. See the bootstrap-content skill for details.

Breakpoints

Default responsive breakpoints:

xs : <576px (default, no infix)
sm : ≥576px
md : ≥768px
lg : ≥992px
xl : ≥1200px
xxl : ≥1400px

Container System

Three container types:

.container
Fixed-width, responsive (changes width at each breakpoint)
.container-fluid
Full-width always (100% at all breakpoints)
.container-{breakpoint}
Full-width until breakpoint, then fixed-width

<div class="container">Fixed-width responsive</div> <div class="container-fluid">Always 100% width</div> <div class="container-lg">100% until lg, then fixed</div>

Containers provide horizontal padding (--bs-gutter-x: 1.5rem by default) and center content within the viewport.

Additional Resources

Reference Files

references/build-tools.md
Complete Vite, Parcel, and Webpack setup guides
references/rails-setup.md
Ruby on Rails 8 integration with Propshaft, Turbo, and Stimulus
references/javascript-api.md
Full JavaScript component API reference
references/vite-setup.md
Detailed Vite project structure and configuration

Example Files

examples/starter-template.html
Basic HTML starter
examples/rtl-starter.html
RTL-enabled starter template with Arabic content
examples/rails-application-layout.html.erb
Rails 8 application layout with Bootstrap
examples/rails-bootstrap-form.html.erb
Bootstrap-styled Rails form helpers
examples/rails-flash-messages.html.erb
Flash messages as Bootstrap alerts
examples/rails-navbar-partial.html.erb
Responsive navbar partial for Rails
examples/rails-turbo-modal.html.erb
Turbo-compatible Bootstrap modal

Related Skills

bootstrap-customize - Sass variables, theming, color modes
bootstrap-layout - Grid system, containers, breakpoints detail
bootstrap-content - Reboot and typography

bootstrap-overview

Safety Notice

Copy this and send it to your AI assistant to learn

Or for existing apps:

Source Transparency

Related Skills

bootstrap-layout

bootstrap-components

bootstrap-customize

bootstrap-icons