bootstrap5

name	bootstrap5
description	Complete Bootstrap 5 documentation - 110 doc files, 99 SCSS source files, and 88 JavaScript files covering the world's most popular CSS framework

Bootstrap 5 Skill

Comprehensive documentation and source code for Bootstrap 5, the world's most popular CSS framework for building responsive, mobile-first websites. This skill contains 110 documentation files, 99 SCSS source files, and 88 JavaScript files.

When to Use This Skill

This skill should be triggered when:

CSS Framework Usage

• Building responsive layouts with Bootstrap grid system
• Using Bootstrap utility classes
• Implementing Bootstrap components
• Customizing Bootstrap with Sass variables

Component Implementation

• Adding navigation (navbar, breadcrumbs, pagination)
• Creating forms with validation
• Implementing modals, tooltips, popovers
• Building cards, carousels, accordions
• Adding alerts, badges, buttons

Layout & Grid

• Using the 12-column grid system
• Creating responsive breakpoints
• Implementing flexbox utilities
• Building container and row structures

Customization

• Overriding Bootstrap Sass variables
• Creating custom themes
• Extending Bootstrap with custom components
• Optimizing Bootstrap builds

Core Concepts

Grid System

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Breakpoints

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
XXL	xxl	≥1400px

Common Utility Classes

<!-- Spacing -->
<div class="mt-3 mb-4 px-2">Margin top 3, margin bottom 4, padding x 2</div>

<!-- Flexbox -->
<div class="d-flex justify-content-between align-items-center">Flexbox</div>

<!-- Text -->
<p class="text-center text-primary fw-bold">Centered, primary color, bold</p>

<!-- Display -->
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>

Directory Structure

references/
├── getting-started/          # 13 files - Installation, usage, builds
│   ├── introduction.mdx
│   ├── download.mdx
│   ├── contents.mdx
│   ├── browsers-devices.mdx
│   ├── javascript.mdx
│   ├── webpack.mdx
│   ├── parcel.mdx
│   ├── vite.mdx
│   ├── accessibility.mdx
│   ├── rfs.mdx
│   ├── rtl.mdx
│   ├── contribute.mdx
│   └── color-modes.mdx
│
├── layout/                   # 8 files - Grid, containers, columns
│   ├── breakpoints.mdx
│   ├── containers.mdx
│   ├── grid.mdx
│   ├── columns.mdx
│   ├── gutters.mdx
│   ├── utilities.mdx
│   ├── z-index.mdx
│   └── css-grid.mdx
│
├── content/                  # 5 files - Typography, images, tables
│   ├── reboot.mdx
│   ├── typography.mdx
│   ├── images.mdx
│   ├── tables.mdx
│   └── figures.mdx
│
├── forms/                    # 9 files - Form controls, validation
│   ├── overview.mdx
│   ├── form-control.mdx
│   ├── select.mdx
│   ├── checks-radios.mdx
│   ├── range.mdx
│   ├── input-group.mdx
│   ├── floating-labels.mdx
│   ├── layout.mdx
│   └── validation.mdx
│
├── components/               # 24 files - All Bootstrap components
│   ├── accordion.mdx
│   ├── alerts.mdx
│   ├── badge.mdx
│   ├── breadcrumb.mdx
│   ├── buttons.mdx
│   ├── button-group.mdx
│   ├── card.mdx
│   ├── carousel.mdx
│   ├── close-button.mdx
│   ├── collapse.mdx
│   ├── dropdowns.mdx
│   ├── list-group.mdx
│   ├── modal.mdx
│   ├── navbar.mdx
│   ├── navs-tabs.mdx
│   ├── offcanvas.mdx
│   ├── pagination.mdx
│   ├── placeholders.mdx
│   ├── popovers.mdx
│   ├── progress.mdx
│   ├── scrollspy.mdx
│   ├── spinners.mdx
│   ├── toasts.mdx
│   └── tooltips.mdx
│
├── helpers/                  # 12 files - Helper classes
│   ├── clearfix.mdx
│   ├── color-background.mdx
│   ├── colored-links.mdx
│   ├── focus-ring.mdx
│   ├── icon-link.mdx
│   ├── position.mdx
│   ├── ratio.mdx
│   ├── stacks.mdx
│   ├── stretched-link.mdx
│   ├── text-truncation.mdx
│   ├── vertical-rule.mdx
│   └── visually-hidden.mdx
│
├── utilities/                # 20 files - Utility classes
│   ├── api.mdx
│   ├── background.mdx
│   ├── borders.mdx
│   ├── colors.mdx
│   ├── display.mdx
│   ├── flex.mdx
│   ├── float.mdx
│   ├── interactions.mdx
│   ├── link.mdx
│   ├── object-fit.mdx
│   ├── opacity.mdx
│   ├── overflow.mdx
│   ├── position.mdx
│   ├── shadows.mdx
│   ├── sizing.mdx
│   ├── spacing.mdx
│   ├── text.mdx
│   ├── vertical-align.mdx
│   ├── visibility.mdx
│   └── z-index.mdx
│
├── extend/                   # 2 files - Extending Bootstrap
│   ├── approach.mdx
│   └── icons.mdx
│
├── customize/                # 8 files - Customization options
│   ├── overview.mdx
│   ├── sass.mdx
│   ├── options.mdx
│   ├── color.mdx
│   ├── color-modes.mdx
│   ├── components.mdx
│   ├── css-variables.mdx
│   └── optimize.mdx
│
├── about/                    # 5 files - About Bootstrap
│   ├── overview.mdx
│   ├── team.mdx
│   ├── brand.mdx
│   ├── license.mdx
│   └── translations.mdx
│
├── scss/                     # 99 SCSS source files
│   ├── _variables.scss       # All Bootstrap variables
│   ├── _mixins.scss          # Sass mixins
│   ├── _utilities.scss       # Utility generator
│   ├── _grid.scss            # Grid system
│   ├── _buttons.scss         # Button styles
│   ├── _forms.scss           # Form styles
│   ├── _card.scss            # Card component
│   ├── _modal.scss           # Modal component
│   ├── _navbar.scss          # Navbar styles
│   ├── mixins/               # Mixin files
│   ├── forms/                # Form-specific styles
│   ├── helpers/              # Helper styles
│   └── utilities/            # Utility styles
│
├── js/                       # 88 JavaScript source files
│   ├── src/
│   │   ├── alert.js          # Alert component
│   │   ├── button.js         # Button component
│   │   ├── carousel.js       # Carousel component
│   │   ├── collapse.js       # Collapse component
│   │   ├── dropdown.js       # Dropdown component
│   │   ├── modal.js          # Modal component
│   │   ├── offcanvas.js      # Offcanvas component
│   │   ├── popover.js        # Popover component
│   │   ├── scrollspy.js      # Scrollspy component
│   │   ├── tab.js            # Tab component
│   │   ├── toast.js          # Toast component
│   │   ├── tooltip.js        # Tooltip component
│   │   ├── dom/              # DOM utilities
│   │   └── util/             # Utility functions
│   └── tests/                # Test files
│
├── README.md                 # Bootstrap readme
├── docsref.mdx               # Documentation reference
└── migration.mdx             # Migration guide

Key Components Reference

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-sm">Small</button>

Cards

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Modal

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Modal content 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>

Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Forms

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="check">
    <label class="form-check-label" for="check">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Sass Customization

Override Variables

// Custom variables
$primary: #0d6efd;
$secondary: #6c757d;
$font-family-base: 'Helvetica Neue', sans-serif;
$border-radius: 0.375rem;
$spacer: 1rem;

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

Common Variables

// Colors
$blue, $indigo, $purple, $pink, $red, $orange, $yellow, $green, $teal, $cyan

// Theme colors
$primary, $secondary, $success, $info, $warning, $danger, $light, $dark

// Spacing
$spacer: 1rem;
$spacers: (0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3)

// Grid
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px)

JavaScript Usage

Data Attributes

<!-- Toggle modal -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button>

<!-- Toggle collapse -->
<button data-bs-toggle="collapse" data-bs-target="#collapseExample">Toggle</button>

<!-- Dismiss alert -->
<button data-bs-dismiss="alert">Close</button>

JavaScript API

// Modal
const modal = new bootstrap.Modal(document.getElementById('myModal'));
modal.show();
modal.hide();

// Tooltip
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach(el => new bootstrap.Tooltip(el));

// Toast
const toast = new bootstrap.Toast(document.getElementById('myToast'));
toast.show();

// Events
document.getElementById('myModal').addEventListener('shown.bs.modal', () => {
  console.log('Modal shown');
});

Source

• Repository: https://github.com/twbs/bootstrap
• Documentation: https://getbootstrap.com/docs/5.3
• License: MIT
• Version: 5.3.x

Statistics

Category	Files
Getting Started	13
Layout	8
Content	5
Forms	9
Components	24
Helpers	12
Utilities	20
Extend	2
Customize	8
About	5
Root docs	2
Total Docs	110
SCSS Source	99
JS Source	88
Grand Total	297

Installation

npm

npm install bootstrap

CDN

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>