# Bootstrap v5.3.8
## Introduction
Bootstrap is a powerful, feature-rich front-end framework for building responsive, mobile-first websites and web applications. Developed originally by Twitter and now maintained by the Bootstrap core team, version 5.3.8 represents a modern evolution with significant improvements over previous versions. The framework no longer depends on jQuery, instead using vanilla JavaScript with ES6+ modules, and has switched from LESS to Sass for CSS preprocessing. Bootstrap 5 provides a comprehensive component library, a flexible grid system based on CSS Flexbox and Grid, extensive utility classes, and powerful JavaScript plugins for interactive UI elements.
This version includes 12 JavaScript components built as ES modules that can be imported individually or as a bundle, uses Popper.js v2 for advanced positioning of dropdowns and tooltips, and supports both data attributes for declarative initialization and programmatic JavaScript APIs. The framework emphasizes accessibility with ARIA attributes, supports RTL (right-to-left) languages, offers dark mode support through CSS custom properties, and provides extensive customization through Sass variables and maps. Bootstrap can be integrated via CDN, npm, yarn, or by including the compiled CSS and JavaScript files directly in your project.
## JavaScript Components
### Alert
Dismissible alert messages with fade animations for user notifications and feedback.
```javascript
// HTML markup
Warning! You should check in on some of those fields below.
// ES Module import
import Alert from 'bootstrap/js/dist/alert'
// Initialize with JavaScript
const alertElement = document.getElementById('myAlert')
const alert = new Alert(alertElement)
// Methods
alert.close() // Close the alert
alert.dispose() // Destroy the alert instance
// Data API (automatic initialization)
// Event handling
alertElement.addEventListener('close.bs.alert', () => {
console.log('Alert is about to close')
})
alertElement.addEventListener('closed.bs.alert', () => {
console.log('Alert has been closed')
})
// Different alert styles
Primary alert
Secondary alert
Success alert
Danger alert
Warning alert
Info alert
Light alert
Dark alert
// Static method to get or create instance
const alert2 = Alert.getOrCreateInstance(alertElement)
// Static method to get existing instance
const alert3 = Alert.getInstance(alertElement)
```
### Button
Toggle button states and functionality with loading states and checkbox/radio behavior.
```javascript
// HTML markup
// ES Module import
import Button from 'bootstrap/js/dist/button'
// Initialize programmatically
const button = document.getElementById('myButton')
const bsButton = new Button(button)
// Methods
bsButton.toggle() // Toggle button state
bsButton.dispose() // Destroy button instance
// Toggle state is managed via aria-pressed attribute
// Button group with radio behavior
// Checkbox button group
// Static methods
const button2 = Button.getOrCreateInstance(button)
const button3 = Button.getInstance(button)
```
### Carousel
Slideshow component for cycling through images or content with automatic rotation and manual controls.
```javascript
// HTML markup
First slide label
Some description for the first slide.
// ES Module import
import Carousel from 'bootstrap/js/dist/carousel'
// Initialize with options
const carouselElement = document.querySelector('#carouselExample')
const carousel = new Carousel(carouselElement, {
interval: 5000, // Auto-cycle interval in ms (default: 5000)
keyboard: true, // Respond to keyboard events (default: true)
pause: 'hover', // Pause on hover: 'hover' or false (default: 'hover')
ride: false, // Auto-play on load: 'carousel' or false
wrap: true, // Continuous cycling (default: true)
touch: true // Support touch swipe gestures (default: true)
})
// Control methods
carousel.cycle() // Start auto-cycling
carousel.pause() // Pause auto-cycling
carousel.next() // Go to next slide
carousel.prev() // Go to previous slide
carousel.to(2) // Go to specific slide index (0-based)
carousel.dispose() // Destroy carousel instance
// Event handling
carouselElement.addEventListener('slide.bs.carousel', (event) => {
console.log('Sliding from:', event.from, 'to:', event.to)
console.log('Direction:', event.direction)
})
carouselElement.addEventListener('slid.bs.carousel', (event) => {
console.log('Slide transition complete')
})
// Data API - automatic initialization
// Control with data attributes
// Static methods
const carousel2 = Carousel.getOrCreateInstance(carouselElement, { interval: 3000 })
const carousel3 = Carousel.getInstance(carouselElement)
```
### Collapse
Toggle visibility of content panels with smooth transitions, perfect for accordions and expandable sections.
```javascript
// HTML markup - Basic collapsible
Some placeholder content for the collapse component.
// Accordion structure
Content for accordion item 1
Content for accordion item 2
// ES Module import
import Collapse from 'bootstrap/js/dist/collapse'
// Initialize with options
const collapseElement = document.querySelector('#collapseExample')
const collapse = new Collapse(collapseElement, {
parent: '#accordionExample', // Close other panels in accordion
toggle: true // Toggle on initialization (default: true)
})
// Methods
collapse.show() // Show the collapse element
collapse.hide() // Hide the collapse element
collapse.toggle() // Toggle the collapse element
collapse.dispose() // Destroy the collapse instance
// Event handling
collapseElement.addEventListener('show.bs.collapse', () => {
console.log('About to expand')
})
collapseElement.addEventListener('shown.bs.collapse', () => {
console.log('Fully expanded')
})
collapseElement.addEventListener('hide.bs.collapse', () => {
console.log('About to collapse')
})
collapseElement.addEventListener('hidden.bs.collapse', () => {
console.log('Fully collapsed')
})
// Always keep one item open in accordion
Content 1
// Static methods
const collapse2 = Collapse.getOrCreateInstance(collapseElement)
const collapse3 = Collapse.getInstance(collapseElement)
```
### Dropdown
Context menus with advanced positioning via Popper.js, keyboard navigation, and auto-close behavior.
```javascript
// HTML markup
// ES Module import
import Dropdown from 'bootstrap/js/dist/dropdown'
// Initialize with options
const dropdownElement = document.querySelector('.dropdown-toggle')
const dropdown = new Dropdown(dropdownElement, {
autoClose: true, // Auto close: true, false, 'inside', 'outside'
boundary: 'clippingParents', // Overflow constraint boundary
display: 'dynamic', // Dynamic or static positioning
offset: [0, 2], // Offset [skidding, distance]
popperConfig: null, // Custom Popper.js config
reference: 'toggle' // Reference element: 'toggle', 'parent', or DOM element
})
// Methods
dropdown.show() // Show the dropdown menu
dropdown.hide() // Hide the dropdown menu
dropdown.toggle() // Toggle the dropdown menu
dropdown.update() // Update the dropdown position
dropdown.dispose() // Destroy the dropdown instance
// Event handling
dropdownElement.addEventListener('show.bs.dropdown', () => {
console.log('Dropdown is about to be shown')
})
dropdownElement.addEventListener('shown.bs.dropdown', () => {
console.log('Dropdown is now visible')
})
dropdownElement.addEventListener('hide.bs.dropdown', (event) => {
console.log('Dropdown is about to hide')
// event.preventDefault() to cancel hiding
})
dropdownElement.addEventListener('hidden.bs.dropdown', () => {
console.log('Dropdown is now hidden')
})
// Dropdown variations
// Dropdown in navbar
// Split button dropdown
// Auto close options
data-bs-auto-close="true" // Close when clicking inside or outside
data-bs-auto-close="false" // Disable auto close
data-bs-auto-close="inside" // Close when clicking inside
data-bs-auto-close="outside" // Close when clicking outside
// Custom Popper config
const dropdown2 = new Dropdown(element, {
popperConfig: {
placement: 'top-start',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8]
}
}
]
}
})
// Static methods
const dropdown3 = Dropdown.getOrCreateInstance(dropdownElement)
const dropdown4 = Dropdown.getInstance(dropdownElement)
```
### Modal
Dialog windows with backdrop, keyboard support, focus management, and optional sizing.
```javascript
// HTML markup
Modal title
Modal body content goes here...
// ES Module import
import Modal from 'bootstrap/js/dist/modal'
// Initialize with options
const modalElement = document.querySelector('#exampleModal')
const modal = new Modal(modalElement, {
backdrop: true, // Show backdrop: true, false, or 'static'
focus: true, // Focus on modal when initialized (default: true)
keyboard: true // Close on ESC key (default: true)
})
// Methods
modal.show() // Show the modal
modal.hide() // Hide the modal
modal.toggle() // Toggle the modal
modal.dispose() // Destroy the modal instance
modal.handleUpdate() // Update modal position (if content changed)
// Event handling
modalElement.addEventListener('show.bs.modal', (event) => {
console.log('Modal is about to be shown')
// event.relatedTarget contains the button that triggered the modal
})
modalElement.addEventListener('shown.bs.modal', () => {
console.log('Modal is now visible and focused')
})
modalElement.addEventListener('hide.bs.modal', (event) => {
console.log('Modal is about to hide')
// event.preventDefault() to cancel hiding
})
modalElement.addEventListener('hidden.bs.modal', () => {
console.log('Modal is now hidden')
})
modalElement.addEventListener('hidePrevented.bs.modal', () => {
console.log('Hide was prevented (static backdrop clicked)')
})
// Data API - trigger modal
// Pass data to modal
// Modal sizes
Small modal
Large modal
Extra large modal
// Fullscreen modals
Always fullscreen
Fullscreen below sm breakpoint
Fullscreen below md breakpoint
// Vertically centered modal
Centered modal
// Scrollable modal
Scrollable modal
// Static backdrop (doesn't close on click outside)
const staticModal = new Modal(modalElement, {
backdrop: 'static',
keyboard: false
})
// Static methods
const modal2 = Modal.getOrCreateInstance(modalElement, { backdrop: 'static' })
const modal3 = Modal.getInstance(modalElement)
```
### Offcanvas
Sidebar component that slides in from the edge of the viewport for navigation or content.
```javascript
// HTML markup
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen.
// ES Module import
import Offcanvas from 'bootstrap/js/dist/offcanvas'
// Initialize with options
const offcanvasElement = document.querySelector('#offcanvasExample')
const offcanvas = new Offcanvas(offcanvasElement, {
backdrop: true, // Show backdrop: true, false, or 'static'
keyboard: true, // Close on ESC key (default: true)
scroll: false // Allow body scrolling while open (default: false)
})
// Methods
offcanvas.show() // Show the offcanvas
offcanvas.hide() // Hide the offcanvas
offcanvas.toggle() // Toggle the offcanvas
offcanvas.dispose() // Destroy the offcanvas instance
// Event handling
offcanvasElement.addEventListener('show.bs.offcanvas', () => {
console.log('Offcanvas is about to show')
})
offcanvasElement.addEventListener('shown.bs.offcanvas', () => {
console.log('Offcanvas is now visible')
})
offcanvasElement.addEventListener('hide.bs.offcanvas', () => {
console.log('Offcanvas is about to hide')
})
offcanvasElement.addEventListener('hidden.bs.offcanvas', () => {
console.log('Offcanvas is now hidden')
})
offcanvasElement.addEventListener('hidePrevented.bs.offcanvas', () => {
console.log('Hide was prevented (static backdrop clicked)')
})
// Data API - trigger offcanvas
// Placement options
From left (start)
From right (end)
From top
From bottom
// Allow body scrolling
Scrollable content
// Static backdrop
const offcanvas2 = new Offcanvas(offcanvasElement, {
backdrop: 'static',
keyboard: false
})
// Static methods
const offcanvas3 = Offcanvas.getOrCreateInstance(offcanvasElement)
const offcanvas4 = Offcanvas.getInstance(offcanvasElement)
```
### Popover
Extended tooltips with title and body content, supporting click or hover triggers.
```javascript
// HTML markup
// ES Module import
import Popover from 'bootstrap/js/dist/popover'
// Initialize (required - popovers must be explicitly initialized)
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(el => new Popover(el))
// Initialize with options
const popoverElement = document.querySelector('#myPopover')
const popover = new Popover(popoverElement, {
animation: true, // Apply fade transition (default: true)
container: false, // Append to specific element (default: false)
content: '', // Content text or function
customClass: '', // Add custom class
delay: 0, // Delay showing/hiding: number or { show, hide }
html: false, // Allow HTML in content (default: false)
placement: 'top', // Placement: auto, top, bottom, left, right
sanitize: true, // Sanitize HTML content (default: true)
selector: false, // Delegate to descendant elements
template: '
...
', // Base HTML template
title: '', // Title text or function
trigger: 'click', // Trigger: click, hover, focus, manual
offset: [0, 8], // Offset [skidding, distance]
fallbackPlacements: ['top', 'right', 'bottom', 'left'],
boundary: 'clippingParents', // Overflow constraint boundary
popperConfig: null // Custom Popper.js config
})
// Methods
popover.show() // Show the popover
popover.hide() // Hide the popover
popover.toggle() // Toggle the popover
popover.enable() // Enable the popover
popover.disable() // Disable the popover
popover.toggleEnabled() // Toggle enabled state
popover.update() // Update the popover position
popover.dispose() // Destroy the popover instance
// Event handling
popoverElement.addEventListener('show.bs.popover', () => {
console.log('Popover is about to show')
})
popoverElement.addEventListener('shown.bs.popover', () => {
console.log('Popover is now visible')
})
popoverElement.addEventListener('hide.bs.popover', () => {
console.log('Popover is about to hide')
})
popoverElement.addEventListener('hidden.bs.popover', () => {
console.log('Popover is now hidden')
})
popoverElement.addEventListener('inserted.bs.popover', () => {
console.log('Popover has been added to the DOM')
})
// Function-based content
const popover2 = new Popover(element, {
title: () => {
return 'Dynamic title from function'
},
content: function() {
return `Content for ${this.getAttribute('data-name')}`
}
})
// HTML content
const popover3 = new Popover(element, {
html: true,
content: 'Bold content with HTML'
})
// Different triggers
// Delay configuration
const popover4 = new Popover(element, {
delay: { show: 500, hide: 100 }
})
// Dismiss on next click
// Custom container
const popover5 = new Popover(element, {
container: 'body' // Append to body instead of parent
})
// Static methods
const popover6 = Popover.getOrCreateInstance(popoverElement)
const popover7 = Popover.getInstance(popoverElement)
```
### ScrollSpy
Automatically updates navigation based on scroll position for single-page layouts.
```javascript
// HTML markup
First heading
Content for first section...
Second heading
Content for second section...
Third heading
Content for third section...
// ES Module import
import ScrollSpy from 'bootstrap/js/dist/scrollspy'
// Initialize with options
const scrollSpyElement = document.querySelector('[data-bs-spy="scroll"]')
const scrollSpy = new ScrollSpy(scrollSpyElement, {
target: '#navbar-example', // Target navigation element (required)
offset: 10, // Offset from top (default: 10)
method: 'auto', // Scroll method: auto, offset, position (default: auto)
rootMargin: '0px 0px -40%', // Root margin for intersection observer
smoothScroll: false, // Enable smooth scrolling (default: false)
threshold: [0.1, 0.5, 1.0] // Intersection observer thresholds
})
// Methods
scrollSpy.refresh() // Refresh scrollspy (after DOM changes)
scrollSpy.dispose() // Destroy the scrollspy instance
// Event handling
scrollSpyElement.addEventListener('activate.bs.scrollspy', (event) => {
console.log('New section activated:', event.relatedTarget)
// event.relatedTarget is the newly activated nav link
})
// Data API - automatic initialization on body
// Nested navigation
```
## Main Use Cases and Applications
Bootstrap v5.3.8 excels in rapid development of responsive web applications where consistent, professional UI and cross-browser compatibility are essential. It's ideal for building admin dashboards, SaaS platforms, e-commerce sites, corporate websites, web applications, and MVPs where development velocity matters. The framework's extensive component library, utility-first approach, and responsive grid system enable developers to build complex interfaces quickly without writing custom CSS for common patterns. Organizations leverage Bootstrap for enterprise applications, internal tools, and customer-facing products where accessibility (WCAG compliance), mobile responsiveness, and maintainability are critical requirements.
The framework integrates seamlessly into modern JavaScript workflows through ES modules and npm packages, supporting tree-shaking for optimal bundle sizes. Import only the components you need, customize the framework through Sass variables and maps, or extend it with custom CSS. Bootstrap works well with React, Vue, Angular, and other frameworks through wrapper libraries, and its data-attribute API allows progressive enhancement without JavaScript. The utility classes follow a consistent naming convention for rapid prototyping, while the comprehensive Sass source enables deep customization of colors, spacing, typography, and component styles. With built-in dark mode support via CSS custom properties and extensive RTL language support, Bootstrap provides a solid foundation for global, accessible web applications.
Bootstrap
11 mins ago