Get the FREE Ultimate OpenClaw Setup Guide →

bootstrap-5

npx machina-cli add skill lindoelio/my-agent-skills/bootstrap-5 --openclaw
Files (1)
SKILL.md
21.1 KB

Bootstrap 5 Professional Usage Guide

Quick Start

Include Bootstrap via CDN:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 5</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Responsive Breakpoints

BreakpointClass InfixDimensions
Extra small(none)<576px
Smallsm>=576px
Mediummd>=768px
Largelg>=992px
Extra largexl>=1200px
XXLxxl>=1400px

Layout System

Containers

<div class="container">Fixed-width responsive container</div>
<div class="container-fluid">Full-width container</div>
<div class="container-md">100% until md breakpoint</div>

Grid System (12-column flexbox)

<div class="container">
  <div class="row">
    <div class="col">Auto-width column</div>
    <div class="col-6">6-column width</div>
    <div class="col-md-4">4 columns on md+</div>
  </div>
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>

Gutters (Spacing between columns)

<div class="row g-0">No gutters</div>
<div class="row g-3">1rem gutters</div>
<div class="row gx-5">Horizontal gutters only</div>
<div class="row gy-3">Vertical gutters only</div>

Spacing Utilities

Format: {property}{sides}-{size} or {property}{sides}-{breakpoint}-{size}

  • Property: m (margin), p (padding)
  • Sides: t (top), b (bottom), s (start/left in LTR), e (end/right in LTR), x (horizontal), y (vertical), blank (all)
  • Sizes: 0, 1 (.25rem), 2 (.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem), auto
<div class="m-3 p-2">Margin 1rem, padding .5rem</div>
<div class="mt-0 pt-5">No top margin, 3rem top padding</div>
<div class="mx-auto">Horizontally centered</div>
<div class="mb-md-5">3rem bottom margin on md+</div>

Flexbox Utilities

<div class="d-flex">Flex container</div>
<div class="d-inline-flex">Inline flex</div>
<div class="d-md-flex">Flex on md+</div>

<div class="d-flex flex-row">Horizontal (default)</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>

<div class="d-flex justify-content-start">Align left</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-end">Right</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Even spacing</div>

<div class="d-flex align-items-start">Top</div>
<div class="d-flex align-items-center">Center</div>
<div class="d-flex align-items-end">Bottom</div>
<div class="d-flex align-items-stretch">Stretch (default)</div>

<div class="d-flex flex-wrap">Allow wrapping</div>
<div class="d-flex flex-nowrap">No wrapping</div>

<div class="d-flex flex-fill">Fill available space</div>
<div class="flex-grow-1">Grow to fill</div>
<div class="flex-shrink-0">Don't shrink</div>

<div class="order-first">First in order</div>
<div class="order-last">Last in order</div>
<div class="order-0 through order-5">Order by number</div>

Colors & Backgrounds

Theme Colors

  • primary (blue), secondary (gray), success (green), danger (red), warning (yellow), info (cyan), light, dark

Text Colors

<p class="text-primary">Primary text</p>
<p class="text-danger">Danger text</p>
<p class="text-body-secondary">Muted text</p>
<p class="text-white bg-dark">White on dark</p>

Background Colors

<div class="bg-primary text-white">Primary background</div>
<div class="bg-light">Light background</div>
<div class="bg-gradient bg-primary">With gradient</div>
<div class="bg-opacity-75">75% opacity</div>

Combined Text + Background

<div class="text-bg-primary">Auto contrasting colors</div>
<div class="text-bg-danger">Danger with white text</div>

Typography

<h1 class="h1">Heading 1</h1>
<h1 class="display-1">Display heading (larger)</h1>
<p class="lead">Lead paragraph (emphasized)</p>
<p class="small">Smaller text</p>
<p class="fw-bold">Bold text</p>
<p class="fw-light">Light weight</p>
<p class="fst-italic">Italic</p>
<p class="text-decoration-none">No underline</p>
<p class="text-start">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-end">Right aligned</p>
<p class="text-truncate">Truncated with ellipsis...</p>
<p class="text-wrap">Normal wrapping</p>
<p class="text-nowrap">No wrapping</p>

Display & Visibility

<div class="d-none">Hidden on all</div>
<div class="d-block">Block display</div>
<div class="d-inline">Inline display</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-none d-md-block">Hidden until md, then block</div>
<div class="d-md-none">Visible only below md</div>
<div class="visible">Visibility: visible</div>
<div class="invisible">Visibility: hidden (keeps space)</div>

Sizing

<div class="w-25">25% width</div>
<div class="w-50">50% width</div>
<div class="w-75">75% width</div>
<div class="w-100">100% width</div>
<div class="w-auto">Auto width</div>
<div class="mw-100">Max-width: 100%</div>
<div class="vh-100">100% viewport height</div>
<div class="h-100">100% height</div>

Position

<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="fixed-top">Fixed to top</div>
<div class="fixed-bottom">Fixed to bottom</div>
<div class="sticky-top">Sticky top</div>
<div class="top-0 start-0">Top-left corner</div>
<div class="bottom-0 end-0">Bottom-right corner</div>
<div class="translate-middle">Center with transform</div>

Borders & Shadows

<div class="border">All borders</div>
<div class="border-top">Top border only</div>
<div class="border-0">No borders</div>
<div class="border border-primary">Primary color border</div>
<div class="border-0 border-top border-primary">Compound utilities</div>
<div class="rounded">Rounded corners</div>
<div class="rounded-circle">Circle (equal sides)</div>
<div class="rounded-pill">Pill shape</div>
<div class="rounded-0">No rounding</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-none">No shadow</div>

Buttons

<button class="btn">Base button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-primary" disabled>Disabled</button>
<a class="btn btn-primary" href="#" role="button">Link button</a>

Button Groups

<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

Block Buttons

<div class="d-grid gap-2">
  <button class="btn btn-primary">Block button</button>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary">Responsive block</button>
</div>

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">Content here.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="..." />
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay</h5>
  </div>
</div>

Card Grid Layout

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">Equal height card</div>
  </div>
</div>

Navigation

Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            role="button"
            data-bs-toggle="dropdown"
            >Dropdown</a
          >
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">Another</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" />
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Tabs & Pills

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
</ul>

Dropdowns (Requires Popper.js - included in bundle)

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
  >
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another</a></li>
    <li><hr class="dropdown-divider" /></li>
    <li><a class="dropdown-item" href="#">Separated</a></li>
  </ul>
</div>

Modal

<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch modal
</button>

<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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">Modal body content</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</button>
      </div>
    </div>
  </div>
</div>

Alerts

<div class="alert alert-primary" role="alert">Primary alert</div>
<div class="alert alert-danger" role="alert">Danger alert</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Success!</strong> Dismissible alert.
  <button
    type="button"
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close"
  ></button>
</div>

Forms

Basic Form

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input
      type="email"
      class="form-control"
      id="email"
      aria-describedby="emailHelp"
    />
    <div id="emailHelp" class="form-text">We'll never share your email.</div>
  </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="check1" />
    <label class="form-check-label" for="check1">Check me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Controls

<input class="form-control" type="text" placeholder="Text input" />
<input class="form-control form-control-lg" type="text" placeholder="Large" />
<input class="form-control form-control-sm" type="text" placeholder="Small" />
<textarea class="form-control" rows="3"></textarea>
<select class="form-select">
  <option selected>Open this select</option>
  <option value="1">One</option>
</select>

Checkboxes & Radios

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="flexCheckDefault" />
  <label class="form-check-label" for="flexCheckDefault">Checkbox</label>
</div>
<div class="form-check">
  <input
    class="form-check-input"
    type="radio"
    name="flexRadioDefault"
    id="radio1"
  />
  <label class="form-check-label" for="radio1">Radio</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheck" />
  <label class="form-check-label" for="flexSwitchCheck">Switch</label>
</div>

Floating Labels

<div class="form-floating mb-3">
  <input
    type="email"
    class="form-control"
    id="floatingInput"
    placeholder="Email"
  />
  <label for="floatingInput">Email address</label>
</div>

Input Groups

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" />
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" />
  <span class="input-group-text">@example.com</span>
</div>

Form Validation

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validation01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validation01" required />
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please provide a valid name.</div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Form Grid Layout

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4" />
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4" />
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Other Components

Badge

<span class="badge bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Pill badge</span>
<button class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Breadcrumb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Pagination

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Progress

<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    style="width: 25%"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    25%
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" style="width: 75%"></div>
</div>

Spinner

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Accordion

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

List Group

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item disabled" aria-disabled="true">Disabled</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active"
    >Active link</a
  >
</div>

Offcanvas (Slide-out panel)

<button
  class="btn btn-primary"
  type="button"
  data-bs-toggle="offcanvas"
  data-bs-target="#offcanvasExample"
>
  Open offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="offcanvas"
    ></button>
  </div>
  <div class="offcanvas-body">Content here.</div>
</div>

Toast

<button type="button" class="btn btn-primary" id="liveToastBtn">
  Show toast
</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div
    id="liveToast"
    class="toast"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
  >
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

Accessibility Best Practices

Always Include

  • role="button" on <a> elements used as buttons
  • aria-label for icon-only buttons
  • aria-current="page" for active navigation items
  • aria-describedby linking inputs to their help text
  • aria-expanded and aria-controls for collapsibles
  • Proper heading hierarchy (h1 -> h2 -> h3)
  • .visually-hidden for screen-reader-only text

Color Contrast

  • Ensure 4.5:1 contrast ratio for text
  • Don't rely solely on color to convey meaning
  • Test with accessibility tools

Focus Management

  • Visible focus states (Bootstrap provides these)
  • Logical tab order
  • Skip links for main content

Common Patterns

Centered Content

<div class="d-flex justify-content-center align-items-center vh-100">
  <div>Centered content</div>
</div>

Responsive Image

<img src="..." class="img-fluid" alt="..." />
<img src="..." class="img-thumbnail" alt="..." />

Equal Height Columns

<div class="row">
  <div class="col-md-6">
    <div class="card h-100">Equal height</div>
  </div>
  <div class="col-md-6">
    <div class="card h-100">Equal height</div>
  </div>
</div>

Sticky Footer

<body class="d-flex flex-column min-vh-100">
  <main class="flex-grow-1">Content</main>
  <footer>Footer</footer>
</body>

Responsive Visibility

<div class="d-none d-md-block">Hidden on mobile, visible md+</div>
<div class="d-md-none">Visible only on mobile</div>
<div class="d-none d-lg-block">Visible only lg+</div>

JavaScript API (for dynamic control)

const modal = new bootstrap.Modal("#myModal");
modal.show();
modal.hide();

const dropdown = new bootstrap.Dropdown("#myDropdown");
dropdown.toggle();

const toast = new bootstrap.Toast("#myToast");
toast.show();

const collapse = new bootstrap.Collapse("#myCollapse");
collapse.toggle();

Key Principles

  1. Mobile First: Write CSS for smallest screens, then add breakpoint modifiers
  2. Use Semantic HTML: <nav>, <main>, <article>, <section>, <aside>
  3. Combine Utilities: Stack multiple utility classes for complex styles
  4. Don't Override: Use Bootstrap's utilities before writing custom CSS
  5. Test Responsiveness: Check all breakpoints during development

Source

git clone https://github.com/lindoelio/my-agent-skills/blob/main/bootstrap-5/SKILL.mdView on GitHub

Overview

Bootstrap 5 provides a pure Bootstrap approach to building modern, responsive web interfaces. It covers the grid system, flexbox utilities, spacing, typography, forms, buttons, cards, modals, navbars, dropdowns, and alerts, plus best practices for responsive design. It helps you create consistent, mobile-friendly layouts using Bootstrap's components and utility classes.

How This Skill Works

Include Bootstrap CSS and JS (via CDN or local assets). Build layouts with container/row/col and apply spacing and typography through utility classes. Implement components like cards, modals, navbars, and dropdowns, using responsive breakpoints (sm, md, lg, xl, xxl) to adapt at different widths.

When to Use It

  • Create a responsive dashboard layout with a grid of cards
  • Style and validate forms using Bootstrap form controls
  • Build navigation with a navbar and dropdown menus
  • Add interactive UI with modals and alert components
  • Apply consistent spacing, typography, and colors with utilities

Quick Start

  1. Step 1: Include Bootstrap CSS and JS via CDN (or install locally).
  2. Step 2: Build a layout using container/row/col and apply responsive breakpoints.
  3. Step 3: Add components (cards, navbar, modals) and tune spacing with utilities.

Best Practices

  • Start with a container (container, container-fluid, or container-md) to define layout boundaries
  • Use the 12-column grid and responsive breakpoints for predictable layouts
  • Favor Bootstrap utility classes for spacing, typography, and colors over custom CSS
  • Leverage ready-made components (cards, navbars, modals, alerts) to avoid reinventing UI
  • Ensure accessibility by using semantic markup and ARIA attributes on components

Example Use Cases

  • Dashboard page with a responsive grid of Bootstrap cards
  • Registration or contact form styled with Bootstrap form controls
  • Collapsible navbar with dropdowns for site navigation
  • Modal dialog for confirmations or prompts
  • Alert banners using contextual colors (success, warning, danger)

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗