Web Toolkit

Bootstrap 5 Logic Cheat Sheet

Core Logic

Spacing (The "Spacer" Map)

Rule: The number (0-5) is a key in a predefined map. It is NOT a linear multiplier like Tailwind. The default base spacer ('3') is 1rem (16px).

Formula: p-3 = padding: 1rem;

Applies to: padding (p-*, pt-*, px-*, etc.), margin (m-*, mt-*, mx-*, etc.), gap (gap-*)

Examples:
  • p-0 = padding: 0;
  • p-1 = padding: 0.25rem; (1/4 of base)
  • p-2 = padding: 0.5rem; (1/2 of base)
  • p-3 = padding: 1rem; (Base)
  • p-4 = padding: 1.5rem; (1.5x base)
  • p-5 = padding: 3rem; (3x base)
  • mx-auto = margin-left: auto; margin-right: auto;

Grid (The "12-Column" System)

Rule: The number (1-12) represents how many columns an element should span out of a 12-column row. It is not a size unit.

Formula: col-{breakpoint}-{columns}

Applies to: Grid columns (col-*)

Examples:
  • col-6 = Spans 6 of 12 columns (50% width) on all screen sizes.
  • col-md-4 = Spans 4 of 12 columns (33.3% width) on 'md' screens and larger.
  • col-auto = Spans only the width of its content.

Colors (Semantic Names)

Rule: Colors are named based on their *purpose* or *meaning*, not their hue (like 'blue').

Applies to: background (bg-*), text (text-*), borders (border-*)

Examples:
  • bg-primary (The main brand color, usually blue)
  • bg-secondary (A secondary color, usually gray)
  • bg-success (Green, for success messages)
  • bg-danger (Red, for errors)
  • bg-warning (Yellow, for warnings)
  • bg-info (Teal/Cyan, for information)
  • bg-light (Light gray)
  • bg-dark (Dark gray/black)

Font Sizes (Heading Scale)

Rule: The number (1-6) represents a heading level, with '1' being the largest and '6' being the smallest.

Applies to: font-size (fs-*)

Examples:
  • fs-1 = Largest size (like an h1)
  • fs-2 = Second largest (like an h2)
  • fs-3 = Third largest (like an h3)
  • fs-4 = Fourth largest (like an h4)
  • fs-5 = Fifth largest (like an h5)
  • fs-6 = Smallest size (like an h6)

Responsive Breakpoints

Responsive Breakpoints

Classes are mobile-first. A class with no breakpoint (e.g., 'p-3') applies to all sizes (xs and up). A class with a breakpoint (e.g., 'p-md-3') applies to that size and larger.

  • xs: (none) - <576px
  • sm: ≥576px
  • md: ≥768px
  • lg: ≥992px
  • xl: ≥1200px
  • xxl: ≥1400px

Example: class="p-1 p-md-3" = 0.25rem padding on all screens, but 1rem padding on 'md' screens and up.

Categories

Layout & Grid

  • container: max-width: (breakpoint width);

    Fixed-width container with responsive max-widths.

  • container-fluid: width: 100%;
  • row: display: flex; flex-wrap: wrap;

    Wrapper for columns. Creates a flex container.

  • col: flex: 1 0 0%;

    An auto-sizing column.

  • col-6: flex: 0 0 auto; width: 50%;

    Spans 6 of 12 columns.

  • col-md-4: width: 33.33%;

    Spans 4 cols on 'md' screens and up.

Display & Flexbox

  • d-none: display: none;
  • d-block: display: block;
  • d-flex: display: flex;
  • d-grid: display: grid;
  • d-md-flex: display: flex; (at 'md' breakpoint)
  • flex-column: flex-direction: column;
  • justify-content-center: justify-content: center;
  • align-items-center: align-items: center;

Sizing & Spacing

  • p-3: padding: 1rem;

    Uses Spacer Map. 'p' (all), 'pt', 'pb', 'ps' (start), 'pe' (end), 'px', 'py'

  • m-3: margin: 1rem;

    Uses Spacer Map. 'm' (all), 'mt', 'mb', 'ms', 'me', 'mx', 'my'

  • gap-3: gap: 1rem;

    For flex and grid. Uses Spacer Map (0-5).

  • w-25: width: 25%;

    Percentage scale: 25, 50, 75, 100, auto

  • h-100: height: 100%;

    Percentage scale: 25, 50, 75, 100, auto

Typography

  • fs-1: font-size: 2.5rem; (default)

    Uses Font Size Scale (1-6).

  • fw-bold: font-weight: 700;
  • fw-normal: font-weight: 400;
  • fw-light: font-weight: 300;
  • text-center: text-align: center;
  • text-start: text-align: left;
  • text-decoration-none: text-decoration: none;

Colors, Borders & Effects

  • bg-primary: background-color: (primary color);

    Uses Semantic Color Names.

  • text-danger: color: (danger color);

    Uses Semantic Color Names.

  • bg-opacity-50: --bs-bg-opacity: 0.5;

    Opacity scale: 10, 25, 50, 75, 100

  • border: border: 1px solid (color);
  • border-3: border-width: 3px;

    Pixel scale (1-5)

  • rounded-3: border-radius: 1rem;

    Uses Spacer Map keys (0-5, circle, pill)

  • shadow: box-shadow: (standard shadow);

    Scale: shadow-none, shadow-sm, shadow, shadow-lg

Customization Note

Customization (No Escape Hatch)

Bootstrap does NOT have an 'escape hatch' for arbitrary values like Tailwind's []. Customization is intended to be done by overriding or extending the Sass maps (like $spacers or $theme-colors) and recompiling your CSS.