Bootstrap (twbs/bootstrap)

Bootstrap

https://github.com/twbs/bootstrap
Admin
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first...

Tokens:304,825
Snippets:2,096
Trust Score:7.8
Update:2 months ago
Show doc for...
Context Summary (auto-generated)
Raw
# 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
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

// 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)
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

// 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
<div class="alert alert-primary" role="alert">Primary alert</div>
<div class="alert alert-secondary" role="alert">Secondary alert</div>
<div class="alert alert-success" role="alert">Success alert</div>
<div class="alert alert-danger" role="alert">Danger alert</div>
<div class="alert alert-warning" role="alert">Warning alert</div>
<div class="alert alert-info" role="alert">Info alert</div>
<div class="alert alert-light" role="alert">Light alert</div>
<div class="alert alert-dark" role="alert">Dark alert</div>

// 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
<button type="button" class="btn btn-primary" data-bs-toggle="button">
  Toggle button
</button>

// 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 type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">
  Single toggle
</button>

// Button group with radio behavior
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

// Checkbox button group
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
</div>

// 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
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some description for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

// 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
<div class="carousel slide" data-bs-ride="carousel">
  <!-- Carousel content -->
</div>

// Control with data attributes
<button data-bs-target="#carouselExample" data-bs-slide="prev">Previous</button>
<button data-bs-target="#carouselExample" data-bs-slide="next">Next</button>
<button data-bs-target="#carouselExample" data-bs-slide-to="2">Go to slide 3</button>

// 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
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapseExample" aria-expanded="false"
        aria-controls="collapseExample">
  Toggle Content
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component.
  </div>
</div>

// Accordion structure
<div class="accordion" id="accordionExample">
  <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">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show"
         data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content for accordion item 1
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button"
              data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse"
         data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Content for accordion item 2
      </div>
    </div>
  </div>
</div>

// 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
<div class="accordion" id="accordionPanelsStayOpen">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseOne">
        Item 1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">Content 1</div>
    </div>
  </div>
</div>

// 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
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button"
          data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

// 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
<div class="dropup"><!-- Dropup --></div>
<div class="dropend"><!-- Dropend (right) --></div>
<div class="dropstart"><!-- Dropstart (left) --></div>

// Dropdown in navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
          Dropdown
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

// Split button dropdown
<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
          data-bs-toggle="dropdown">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

// 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
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal body content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

// 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
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

// Pass data to modal
<button data-bs-toggle="modal" data-bs-target="#myModal" data-bs-whatever="@getbootstrap">
  Open modal
</button>

<script>
  const myModal = document.getElementById('myModal')
  myModal.addEventListener('show.bs.modal', event => {
    const button = event.relatedTarget
    const recipient = button.getAttribute('data-bs-whatever')
    console.log('Recipient:', recipient)
  })
</script>

// Modal sizes
<div class="modal-dialog modal-sm">Small modal</div>
<div class="modal-dialog modal-lg">Large modal</div>
<div class="modal-dialog modal-xl">Extra large modal</div>

// Fullscreen modals
<div class="modal-dialog modal-fullscreen">Always fullscreen</div>
<div class="modal-dialog modal-fullscreen-sm-down">Fullscreen below sm breakpoint</div>
<div class="modal-dialog modal-fullscreen-md-down">Fullscreen below md breakpoint</div>

// Vertically centered modal
<div class="modal-dialog modal-dialog-centered">Centered modal</div>

// Scrollable modal
<div class="modal-dialog modal-dialog-scrollable">Scrollable modal</div>

// 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
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
     aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen.
    </div>
  </div>
</div>

// 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
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasExample">
  Open offcanvas
</button>

// Placement options
<div class="offcanvas offcanvas-start">From left (start)</div>
<div class="offcanvas offcanvas-end">From right (end)</div>
<div class="offcanvas offcanvas-top">From top</div>
<div class="offcanvas offcanvas-bottom">From bottom</div>

// Allow body scrolling
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false">
  Scrollable content
</div>

// 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
<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover"
        data-bs-title="Popover title"
        data-bs-content="And here's some amazing content.">
  Click to toggle popover
</button>

// 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: '<div class="popover">...</div>',  // 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: '<strong>Bold content</strong> with <em>HTML</em>'
})

// Different triggers
<button data-bs-toggle="popover" data-bs-trigger="hover">Hover me</button>
<button data-bs-toggle="popover" data-bs-trigger="focus">Focus me</button>
<button data-bs-toggle="popover" data-bs-trigger="hover focus">Hover or focus</button>

// Delay configuration
const popover4 = new Popover(element, {
  delay: { show: 500, hide: 100 }
})

// Dismiss on next click
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover"
        data-bs-trigger="focus" title="Dismissible popover"
        data-bs-content="Click anywhere to dismiss">
  Dismissible popover
</button>

// 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
<nav id="navbar-example" class="navbar bg-light">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading3">Third</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0"
     class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>Content for first section...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>Content for second section...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>Content for third section...</p>
</div>

// 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
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="10">
  <!-- Content -->
</body>

// Nested navigation
<nav id="navbar-nested" class="navbar">
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-nested" data-bs-smooth-scroll="true">
  <div id="item-1">
    <h4>Item 1</h4>
    <div id="item-1-1"><h5>Item 1-1</h5></div>
    <div id="item-1-2"><h5>Item 1-2</h5></div>
  </div>
  <div id="item-2"><h4>Item 2</h4></div>
</div>

// List group navigation
<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>Content...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>Content...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>Content...</p>
</div>

// Refresh after adding/removing content
const addContent = () => {
  document.querySelector('.content').innerHTML += '<div>New content</div>'
  scrollSpy.refresh()  // Update scrollspy
}

// Static methods
const scrollSpy2 = ScrollSpy.getOrCreateInstance(scrollSpyElement, { offset: 20 })
const scrollSpy3 = ScrollSpy.getInstance(scrollSpyElement)
```

### Tab

Navigational tabs to switch between content panes with support for fade transitions.

```javascript
// HTML markup
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
            data-bs-target="#home" type="button" role="tab"
            aria-controls="home" aria-selected="true">
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
            data-bs-target="#profile" type="button" role="tab"
            aria-controls="profile" aria-selected="false">
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab"
            data-bs-target="#contact" type="button" role="tab"
            aria-controls="contact" aria-selected="false">
      Contact
    </button>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel"
       aria-labelledby="home-tab">Home content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel"
       aria-labelledby="profile-tab">Profile content</div>
  <div class="tab-pane fade" id="contact" role="tabpanel"
       aria-labelledby="contact-tab">Contact content</div>
</div>

// ES Module import
import Tab from 'bootstrap/js/dist/tab'

// Initialize and show tab
const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

// Programmatic activation
const tabElement = document.querySelector('#profile-tab')
const tab = new Tab(tabElement)
tab.show()  // Show this tab

// Methods
tab.show()      // Show the tab pane
tab.dispose()   // Destroy the tab instance

// Event handling
const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('show.bs.tab', event => {
  console.log('New tab:', event.target)  // Newly activated tab
  console.log('Previous tab:', event.relatedTarget)  // Previous active tab
})

tabEl.addEventListener('shown.bs.tab', event => {
  console.log('Tab shown:', event.target)
})

tabEl.addEventListener('hide.bs.tab', event => {
  console.log('Current tab being hidden:', event.target)
  console.log('New tab being shown:', event.relatedTarget)
})

tabEl.addEventListener('hidden.bs.tab', event => {
  console.log('Tab hidden:', event.target)
})

// Select tab by name
const firstTabEl = document.querySelector('#myTab button:first-child')
const firstTab = new Tab(firstTabEl)
firstTab.show()

// Select specific tab
const someTabTriggerEl = document.querySelector('#profile-tab')
const someTab = Tab.getInstance(someTabTriggerEl)
someTab.show()

// Pills navigation
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="pill"
            data-bs-target="#pills-home">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="pill"
            data-bs-target="#pills-profile">Profile</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="pills-home">Home content</div>
  <div class="tab-pane fade" id="pills-profile">Profile content</div>
</div>

// Vertical tabs
<div class="d-flex">
  <div class="nav flex-column nav-pills me-3">
    <button class="nav-link active" data-bs-toggle="pill"
            data-bs-target="#v-pills-home">Home</button>
    <button class="nav-link" data-bs-toggle="pill"
            data-bs-target="#v-pills-profile">Profile</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="v-pills-home">Content</div>
    <div class="tab-pane fade" id="v-pills-profile">Content</div>
  </div>
</div>

// Using anchor links
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a>
  </li>
</ul>

// Static methods
const tab2 = Tab.getOrCreateInstance(tabElement)
const tab3 = Tab.getInstance(tabElement)
```

### Toast

Lightweight notification messages that auto-dismiss after a delay.

```javascript
// HTML markup
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="icon.svg" class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

// ES Module import
import Toast from 'bootstrap/js/dist/toast'

// Initialize with options
const toastElement = document.querySelector('.toast')
const toast = new Toast(toastElement, {
  animation: true,   // Apply fade transition (default: true)
  autohide: true,   // Auto-hide the toast (default: true)
  delay: 5000       // Delay in ms before hiding (default: 5000)
})

// Methods
toast.show()      // Show the toast
toast.hide()      // Hide the toast
toast.dispose()   // Destroy the toast instance

// Event handling
toastElement.addEventListener('show.bs.toast', () => {
  console.log('Toast is about to show')
})

toastElement.addEventListener('shown.bs.toast', () => {
  console.log('Toast is now visible')
})

toastElement.addEventListener('hide.bs.toast', () => {
  console.log('Toast is about to hide')
})

toastElement.addEventListener('hidden.bs.toast', () => {
  console.log('Toast is now hidden')
})

// Show toast on page load
document.addEventListener('DOMContentLoaded', () => {
  const toastElList = document.querySelectorAll('.toast')
  const toastList = [...toastElList].map(el => new Toast(el))
  toastList.forEach(toast => toast.show())
})

// Toast container for stacking
<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Notification</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Message content here
    </div>
  </div>
</div>

// Different positioning
<div class="toast-container position-fixed top-0 start-0 p-3">Top left</div>
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">Top center</div>
<div class="toast-container position-fixed top-0 end-0 p-3">Top right</div>
<div class="toast-container position-fixed bottom-0 start-0 p-3">Bottom left</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3">Bottom right</div>

// Color schemes
<div class="toast align-items-center text-white bg-primary" role="alert">
  <div class="d-flex">
    <div class="toast-body">Primary toast</div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto"
            data-bs-dismiss="toast"></button>
  </div>
</div>

// Custom delay and no auto-hide
const toast2 = new Toast(toastElement, {
  autohide: false  // Won't auto-hide
})

const toast3 = new Toast(toastElement, {
  delay: 10000  // Hide after 10 seconds
})

// Programmatically create and show toast
const createToast = (message) => {
  const toastHTML = `
    <div class="toast" role="alert">
      <div class="toast-header">
        <strong class="me-auto">Notification</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
      </div>
      <div class="toast-body">${message}</div>
    </div>
  `
  const container = document.querySelector('.toast-container')
  container.insertAdjacentHTML('beforeend', toastHTML)
  const newToast = container.lastElementChild
  const toast = new Toast(newToast)
  toast.show()
}

// Static methods
const toast4 = Toast.getOrCreateInstance(toastElement)
const toast5 = Toast.getInstance(toastElement)
```

### Tooltip

Hover-triggered overlays with advanced positioning via Popper.js for additional context.

```javascript
// HTML markup
<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        data-bs-title="Tooltip on top">
  Tooltip on top
</button>

// ES Module import
import Tooltip from 'bootstrap/js/dist/tooltip'

// Initialize all tooltips (required - must be explicitly initialized)
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(el => new Tooltip(el))

// Initialize with options
const tooltipElement = document.querySelector('#myTooltip')
const tooltip = new Tooltip(tooltipElement, {
  animation: true,              // Apply fade transition (default: true)
  container: false,             // Append to specific element (default: false)
  customClass: '',              // Add custom class
  delay: 0,                     // Delay showing/hiding: number or { show, hide }
  html: false,                  // Allow HTML in tooltip (default: false)
  placement: 'top',             // Placement: auto, top, bottom, left, right
  sanitize: true,               // Sanitize HTML content (default: true)
  selector: false,              // Delegate to descendant elements
  template: '<div class="tooltip">...</div>',  // Base HTML template
  title: '',                    // Title text, element, or function
  trigger: 'hover focus',       // Trigger: hover, focus, click, manual
  offset: [0, 0],              // Offset [skidding, distance]
  fallbackPlacements: ['top', 'right', 'bottom', 'left'],
  boundary: 'clippingParents',  // Overflow constraint boundary
  popperConfig: null           // Custom Popper.js config
})

// Methods
tooltip.show()      // Show the tooltip
tooltip.hide()      // Hide the tooltip
tooltip.toggle()    // Toggle the tooltip
tooltip.enable()    // Enable the tooltip
tooltip.disable()   // Disable the tooltip
tooltip.toggleEnabled()  // Toggle enabled state
tooltip.update()    // Update the tooltip position
tooltip.dispose()   // Destroy the tooltip instance

// Event handling
tooltipElement.addEventListener('show.bs.tooltip', () => {
  console.log('Tooltip is about to show')
})

tooltipElement.addEventListener('shown.bs.tooltip', () => {
  console.log('Tooltip is now visible')
})

tooltipElement.addEventListener('hide.bs.tooltip', () => {
  console.log('Tooltip is about to hide')
})

tooltipElement.addEventListener('hidden.bs.tooltip', () => {
  console.log('Tooltip is now hidden')
})

tooltipElement.addEventListener('inserted.bs.tooltip', () => {
  console.log('Tooltip has been added to the DOM')
})

// Different placements
<button data-bs-toggle="tooltip" data-bs-placement="top" title="Top">Top</button>
<button data-bs-toggle="tooltip" data-bs-placement="right" title="Right">Right</button>
<button data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bottom">Bottom</button>
<button data-bs-toggle="tooltip" data-bs-placement="left" title="Left">Left</button>

// HTML content
const tooltip2 = new Tooltip(element, {
  html: true,
  title: '<strong>Bold</strong> <em>italic</em> content'
})

// Function-based title
const tooltip3 = new Tooltip(element, {
  title: function() {
    return `Dynamic tooltip for ${this.getAttribute('data-name')}`
  }
})

// Custom delay
const tooltip4 = new Tooltip(element, {
  delay: { show: 500, hide: 100 }
})

// Disabled elements (need wrapper)
<span class="d-inline-block" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" disabled>Disabled button</button>
</span>

// Manual trigger
const tooltip5 = new Tooltip(element, {
  trigger: 'manual'
})
// Control manually
tooltip5.show()
setTimeout(() => tooltip5.hide(), 2000)

// Custom triggers
const tooltip6 = new Tooltip(element, {
  trigger: 'click'  // Show on click
})

// Delegated tooltips (for dynamic content)
const tooltip7 = new Tooltip(document.body, {
  selector: '[data-bs-toggle="tooltip"]'
})

// Custom container
const tooltip8 = new Tooltip(element, {
  container: 'body'
})

// Custom class
const tooltip9 = new Tooltip(element, {
  customClass: 'my-custom-tooltip-class'
})

// Custom Popper config
const tooltip10 = new Tooltip(element, {
  popperConfig: {
    placement: 'top',
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 8]
        }
      }
    ]
  }
})

// Static methods
const tooltip11 = Tooltip.getOrCreateInstance(tooltipElement)
const tooltip12 = Tooltip.getInstance(tooltipElement)
```

## CSS Grid System

### Responsive Grid Layout

Flexbox-based 12-column grid system with responsive breakpoints and extensive customization.

```html
<!-- Container -->
<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<!-- Container sizes -->
<div class="container">Fixed width responsive container</div>
<div class="container-fluid">Full width container</div>
<div class="container-sm">100% width until sm breakpoint</div>
<div class="container-md">100% width until md breakpoint</div>
<div class="container-lg">100% width until lg breakpoint</div>
<div class="container-xl">100% width until xl breakpoint</div>
<div class="container-xxl">100% width until xxl breakpoint</div>

<!-- Equal width columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row">
  <div class="col">1 of 3</div>
  <div class="col">2 of 3</div>
  <div class="col">3 of 3</div>
</div>

<!-- Specific column widths -->
<div class="row">
  <div class="col-4">4 columns wide</div>
  <div class="col-8">8 columns wide</div>
</div>

<!-- Responsive columns -->
<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3">Responsive column</div>
  <div class="col-sm-6 col-md-4 col-lg-3">Responsive column</div>
  <div class="col-sm-12 col-md-4 col-lg-6">Responsive column</div>
</div>

<!-- Auto-layout columns -->
<div class="row">
  <div class="col">Auto</div>
  <div class="col-6">6 columns</div>
  <div class="col">Auto</div>
</div>

<!-- Nested columns -->
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
      <div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
    </div>
  </div>
</div>

<!-- Offset columns -->
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>

<!-- Gutters (spacing between columns) -->
<div class="row g-0">No gutters</div>
<div class="row g-2">Small gutters</div>
<div class="row g-3">Default gutters</div>
<div class="row g-5">Large gutters</div>

<!-- Horizontal gutters -->
<div class="row gx-5">Horizontal gutters only</div>

<!-- Vertical gutters -->
<div class="row gy-5">Vertical gutters only</div>

<!-- Responsive gutters -->
<div class="row g-2 g-md-3 g-lg-4">Responsive gutters</div>

<!-- Row columns (set column count) -->
<div class="row row-cols-2">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

<!-- Alignment -->
<div class="row align-items-start">Align items to top</div>
<div class="row align-items-center">Align items to center</div>
<div class="row align-items-end">Align items to bottom</div>

<div class="row">
  <div class="col align-self-start">Align self start</div>
  <div class="col align-self-center">Align self center</div>
  <div class="col align-self-end">Align self end</div>
</div>

<!-- Horizontal alignment -->
<div class="row justify-content-start">Justify start</div>
<div class="row justify-content-center">Justify center</div>
<div class="row justify-content-end">Justify end</div>
<div class="row justify-content-around">Justify around</div>
<div class="row justify-content-between">Justify between</div>
<div class="row justify-content-evenly">Justify evenly</div>

<!-- Column ordering -->
<div class="row">
  <div class="col order-3">First (order-3)</div>
  <div class="col order-1">Second (order-1)</div>
  <div class="col order-2">Third (order-2)</div>
</div>

<!-- Responsive ordering -->
<div class="row">
  <div class="col order-last order-md-first">Responsive order</div>
</div>

<!-- Breakpoints: xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px) -->
```

## Utility Classes

### Spacing, Display, and Layout Utilities

```html
<!-- Margin utilities: m-{0-5}, mt-, mb-, ms-, me-, mx-, my- -->
<div class="m-3">Margin on all sides</div>
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left in LTR)</div>
<div class="me-3">Margin end (right in LTR)</div>
<div class="mx-3">Margin horizontal</div>
<div class="my-3">Margin vertical</div>
<div class="mx-auto">Center horizontally</div>

<!-- Padding utilities: p-{0-5}, pt-, pb-, ps-, pe-, px-, py- -->
<div class="p-3">Padding on all sides</div>
<div class="pt-3">Padding top</div>
<div class="px-4 py-2">Padding horizontal and vertical</div>

<!-- Responsive spacing: m-{breakpoint}-{size} -->
<div class="m-0 m-md-3 m-lg-5">Responsive margin</div>

<!-- Display utilities -->
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline block</div>
<div class="d-flex">Flexbox</div>
<div class="d-inline-flex">Inline flexbox</div>
<div class="d-grid">CSS Grid</div>
<div class="d-table">Table</div>

<!-- Responsive display -->
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>
<div class="d-block d-md-none">Visible on mobile, hidden on md+</div>

<!-- Flexbox utilities -->
<div class="d-flex flex-row">Flex row (default)</div>
<div class="d-flex flex-column">Flex column</div>
<div class="d-flex flex-row-reverse">Flex row reverse</div>
<div class="d-flex flex-column-reverse">Flex column reverse</div>

<div class="d-flex justify-content-start">Justify start</div>
<div class="d-flex justify-content-center">Justify center</div>
<div class="d-flex justify-content-end">Justify end</div>
<div class="d-flex justify-content-between">Justify between</div>
<div class="d-flex justify-content-around">Justify around</div>
<div class="d-flex justify-content-evenly">Justify evenly</div>

<div class="d-flex align-items-start">Align items start</div>
<div class="d-flex align-items-center">Align items center</div>
<div class="d-flex align-items-end">Align items end</div>
<div class="d-flex align-items-baseline">Align items baseline</div>
<div class="d-flex align-items-stretch">Align items stretch</div>

<div class="d-flex flex-wrap">Flex wrap</div>
<div class="d-flex flex-nowrap">Flex no wrap</div>
<div class="d-flex flex-wrap-reverse">Flex wrap reverse</div>

<div class="d-flex">
  <div class="flex-grow-1">Grow</div>
  <div class="flex-shrink-1">Shrink</div>
  <div class="flex-fill">Fill</div>
</div>

<!-- Text utilities -->
<div class="text-start">Text align start</div>
<div class="text-center">Text align center</div>
<div class="text-end">Text align end</div>

<div class="text-lowercase">lowercase text</div>
<div class="text-uppercase">UPPERCASE TEXT</div>
<div class="text-capitalize">capitalize text</div>

<div class="fw-bold">Bold text</div>
<div class="fw-bolder">Bolder text</div>
<div class="fw-normal">Normal weight</div>
<div class="fw-light">Light weight</div>
<div class="fw-lighter">Lighter weight</div>

<div class="fst-italic">Italic text</div>
<div class="fst-normal">Normal style</div>

<div class="text-decoration-none">No decoration</div>
<div class="text-decoration-underline">Underline</div>
<div class="text-decoration-line-through">Line through</div>

<!-- Color utilities -->
<div class="text-primary">Primary text</div>
<div class="text-secondary">Secondary text</div>
<div class="text-success">Success text</div>
<div class="text-danger">Danger text</div>
<div class="text-warning">Warning text</div>
<div class="text-info">Info text</div>
<div class="text-light bg-dark">Light text</div>
<div class="text-dark">Dark text</div>
<div class="text-muted">Muted text</div>
<div class="text-white bg-dark">White text</div>

<!-- Background utilities -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-secondary text-white">Secondary background</div>
<div class="bg-success text-white">Success background</div>
<div class="bg-danger text-white">Danger background</div>
<div class="bg-warning">Warning background</div>
<div class="bg-info text-white">Info background</div>
<div class="bg-light">Light background</div>
<div class="bg-dark text-white">Dark background</div>
<div class="bg-transparent">Transparent background</div>

<!-- Border utilities -->
<div class="border">Border on all sides</div>
<div class="border-top">Border top</div>
<div class="border-end">Border end</div>
<div class="border-bottom">Border bottom</div>
<div class="border-start">Border start</div>

<div class="border-0">No border</div>
<div class="border-top-0">No top border</div>

<div class="border border-primary">Primary border</div>
<div class="border border-success">Success border</div>

<div class="border border-1">1px border</div>
<div class="border border-2">2px border</div>
<div class="border border-3">3px border</div>
<div class="border border-4">4px border</div>
<div class="border border-5">5px border</div>

<!-- Border radius -->
<div class="rounded">Rounded corners</div>
<div class="rounded-0">No rounded corners</div>
<div class="rounded-1">Small rounded</div>
<div class="rounded-2">Medium rounded</div>
<div class="rounded-3">Large rounded</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill shape</div>
<div class="rounded-top">Rounded top</div>
<div class="rounded-end">Rounded end</div>
<div class="rounded-bottom">Rounded bottom</div>
<div class="rounded-start">Rounded start</div>

<!-- Sizing utilities -->
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>
<div class="w-auto">Width auto</div>

<div class="h-25">Height 25%</div>
<div class="h-50">Height 50%</div>
<div class="h-75">Height 75%</div>
<div class="h-100">Height 100%</div>
<div class="h-auto">Height auto</div>

<div class="mw-100">Max width 100%</div>
<div class="mh-100">Max height 100%</div>

<div class="vw-100">Viewport width 100%</div>
<div class="vh-100">Viewport height 100%</div>
<div class="min-vw-100">Min viewport width 100%</div>
<div class="min-vh-100">Min viewport height 100%</div>

<!-- Position utilities -->
<div class="position-static">Static</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

<div class="position-absolute top-0 start-0">Top left</div>
<div class="position-absolute top-0 end-0">Top right</div>
<div class="position-absolute bottom-0 start-0">Bottom left</div>
<div class="position-absolute bottom-0 end-0">Bottom right</div>
<div class="position-absolute top-50 start-50 translate-middle">Centered</div>

<!-- Shadow utilities -->
<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-lg">Large shadow</div>

<!-- Visibility utilities -->
<div class="visible">Visible</div>
<div class="invisible">Invisible (still takes space)</div>

<!-- Overflow utilities -->
<div class="overflow-auto">Auto overflow</div>
<div class="overflow-hidden">Hidden overflow</div>
<div class="overflow-visible">Visible overflow</div>
<div class="overflow-scroll">Scroll overflow</div>

<!-- Z-index utilities -->
<div class="z-0">Z-index 0</div>
<div class="z-1">Z-index 1</div>
<div class="z-2">Z-index 2</div>
<div class="z-3">Z-index 3</div>
```

## 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.