Bootstrap Design System

# Bootstrap — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: high
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/bootstrap
sources:
  - https://getbootstrap.com/
  - https://getbootstrap.com/docs/5.3/customize/color/
  - https://getbootstrap.com/docs/5.3/content/typography/
  - https://github.com/twbs/bootstrap
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Bootstrap Team. "Bootstrap" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Bootstrap
**Owner:** Bootstrap Team
**Official documentation:** https://getbootstrap.com/
**Visual character:** The web's default uniform: cobalt primary, traffic-light semantics, and utilities that shipped a decade of admin panels.

---

## Summary

The world's most popular framework for building responsive, mobile-first sites.

_Editorial confidence: high. Values are drawn from well-documented public token references. Field-level evidence: 0/87 claims source-linked, 0/87 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=bootstrap)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary | `#0d6efd` | `--bs-primary` | Primary actions and links |
| Secondary | `#6c757d` | `--bs-secondary` | Secondary actions |
| Success | `#198754` | `--bs-success` | Success |
| Danger | `#dc3545` | `--bs-danger` | Errors and destructive actions |
| Warning | `#ffc107` | `--bs-warning` | Warnings |
| Info | `#0dcaf0` | `--bs-info` | Informational |
| Body Color | `#212529` | `--bs-body-color` | Primary text |
| Body Background | `#ffffff` | `--bs-body-bg` | Page background |
| Light | `#f8f9fa` | `--bs-light` | Subtle surfaces |
| Border | `#dee2e6` | `--bs-border-color` | Borders |

## Typography

- **Body:** System stack — weights 400, 500, 700 — `system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
- **Mono:** SFMono — weights 400 — `SFMono-Regular, Menlo, Monaco, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `40px` | `48px` |
| h2 | `32px` | `38.4px` |
| h3 | `28px` | `33.6px` |
| h4 | `24px` | `28.8px` |
| body | `16px` | `24px` |
| small | `14px` | `21px` |

## Spacing

Base unit: `16px (spacer)`

Scale: `4px` · `8px` · `16px` · `24px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| sm | `4px` |
| default | `6px` |
| lg | `8px` |
| pill | `50rem` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| sm | `0 .125rem .25rem rgba(0,0,0,.075)` |
| default | `0 .5rem 1rem rgba(0,0,0,.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `150ms ease-in-out` |

## Quick start (CSS)

```css
/* Bootstrap — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://getbootstrap.com/
   Field evidence: https://www.designsystems.one/api/style-spec?system=bootstrap */

:root {
  /* Color */
  --bs-primary: #0d6efd; /* Primary actions and links */
  --bs-secondary: #6c757d; /* Secondary actions */
  --bs-success: #198754; /* Success */
  --bs-danger: #dc3545; /* Errors and destructive actions */
  --bs-warning: #ffc107; /* Warnings */
  --bs-info: #0dcaf0; /* Informational */
  --bs-body-color: #212529; /* Primary text */
  --bs-body-bg: #ffffff; /* Page background */
  --bs-light: #f8f9fa; /* Subtle surfaces */
  --bs-border-color: #dee2e6; /* Borders */

  /* Typography */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale */
  --text-h1: 40px; /* line-height 48px */
  --text-h2: 32px; /* line-height 38.4px */
  --text-h3: 28px; /* line-height 33.6px */
  --text-h4: 24px; /* line-height 28.8px */
  --text-body: 16px; /* line-height 24px */
  --text-small: 14px; /* line-height 21px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-default: 6px;
  --radius-lg: 8px;
  --radius-pill: 50rem;

  /* Elevation */
  --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --shadow-default: 0 .5rem 1rem rgba(0,0,0,.15);

  /* Motion */
  --motion-default: 150ms ease-in-out;
}
```

## Engineering profile

- **Ships for:** CSS-only, Framework-agnostic
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Bootstrap by Bootstrap Team — The world's most popular framework for building responsive, mobile-first sites. Character: The web's default uniform: cobalt primary, traffic-light semantics, and utilities that shipped a decade of admin panels. Use a primary colour near #0d6efd, the typeface "System stack" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 16px (spacer) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Bootstrap documentation](https://getbootstrap.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/bootstrap) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._