MCPInstall

bootstrap5-ui

by wshaddixFrontend & Design

Production-grade Bootstrap 5.3 patterns for building modern, responsive web UIs in HTML and ASP.NET Core Razor Pages/Views. Use when creating or styling web pages, layouts, navigation, forms, cards, modals, tables, or any UI component with Bootstrap 5. Covers the grid system, responsive breakpoints, utility classes, color modes (dark/light), accessibility, and integration with ASP.NET Core tag helpers and Razor syntax. Trigger on any task involving Bootstrap CSS classes, responsive HTML layouts, Razor Page UI design, or front-end styling for .NET web applications.

Installs
116
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/wshaddix/dotnet-skills --skill bootstrap5-ui
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads bootstrap5-ui automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Bootstrap 5 UI

Production patterns for building responsive, accessible web UIs with Bootstrap 5.3 in HTML and ASP.NET Core Razor Pages/Views. Target Bootstrap 5.3.x (current CDN: 5.3.8). Bootstrap 5 dropped jQuery dependency entirely.

Setup in ASP.NET Core

CDN (Quick Start)

In _Layout.cshtml or _Host.cshtml:

<!-- In <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous">

<!-- Before closing </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        crossorigin="anonymous"></script>

LibMan (Recommended for Production)

// libman.json
{
  "version": "1.0",
  "defaultProvider": "jsdelivr",
  "libraries": [
    {
      "library": "bootstrap@5.3.8",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ]
}

Reference locally in layout:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Required Globals

Always include in <head>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

Grid System

Bootstrap uses a 12-column flexbox grid with 6 responsive breakpoints:

BreakpointPrefixMin-width
Extra small.col-<576px
Small.col-sm->=576px
Medium.col-md->=768px
Large.col-lg->=992px
Extra large.col-xl->=1200px
XXL.col-xxl->=1400px

Core Pattern

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

Key Rules

  • Always wrap columns in .row inside a .container (or .container-fluid for full-width)
  • Columns must be direct children of rows
  • Use .g-* classes for gutters (.g-0 removes gutters, .gx-* horizontal, .gy-* vertical)
  • Use .row-cols-* on the row for uniform column counts: <div class="row row-cols-1 row-cols-md-3 g-4">
  • Mix breakpoints: <div class="col-6 col-md-4 col-lg-3"> — stacks to 2-up on xs, 3-up on md, 4-up on lg

Container Types

  • .container — responsive fixed-width
  • .container-fluid — full-width always
  • .container-{breakpoint} — fluid until breakpoint, then fixed

Spacing Utilities

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

Property: m (margin), p (padding) Sides: t top, b bottom, s start(left), e end(right), x horizontal, y vertical, blank = all Size: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem, auto

<div class="mt-3 mb-4 px-2">Spaced element</div>
<div class="mx-auto" style="width: 200px;">Centered block</div>
<div class="py-md-5">Padding only on md+</div>

Color Modes (Dark/Light)

Bootstrap 5.3 supports data-bs-theme attribute for dark mode:

<!-- Global dark mode -->
<html lang="en" data-bs-theme="dark">

<!-- Per-component -->
<div class="card" data-bs-theme="dark">...</div>
<nav class="navbar bg-dark" data-bs-theme="dark">...</nav>

Use semantic color classes that adapt to color mode:

  • bg-body, bg-body-secondary, bg-body-tertiary — adapt to theme
  • text-body, text-body-secondary, text-body-emphasis — adapt to theme
  • border-body — adapts to theme

Avoid hardcoded colors. Use bg-body-tertiary instead of bg-light for theme-aware backgrounds.

Common Component Patterns

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="#mainNav"
            aria-controls="mainNav" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <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="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Cards in Grid

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Description text.</p>
        <a href="#" class="btn btn-primary">Action</a>
      </div>
    </div>
  </div>
  <!-- repeat -->
</div>

Forms

<form method="post">
  <div class="mb-3">
    <label for="email" class="form-label">Email</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="remember">
    <label class="form-check-label" for="remember">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Floating Labels

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
  <label for="floatEmail">Email address</label>
</div>

Responsive Table

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr><th>Name</th><th>Email</th><th>Actions</th></tr>
    </thead>
    <tbody>
      <tr><td>John</td><td>john@example.com</td><td><a class="btn btn-sm btn-outline-primary">Edit</a></td></tr>
    </tbody>
  </table>
</div>

Razor Pages Integration

For detailed ASP.NET Core Razor Pages integration patterns including tag helpers, validation, layouts, and partial views, see references/razor-integration.md.

Key points:

  • Use asp-for, asp-page, asp-action tag helpers with Bootstrap classes
  • Combine asp-validation-for with .invalid-feedback / .is-invalid classes
  • Place Bootstrap validation classes via jQuery Validation Unobtrusive or custom JS
  • Use @section Scripts for page-specific scripts in layout

Component Reference

For complete component patterns (modals, alerts, toasts, accordion, pagination, breadcrumbs, badges, offcanvas, spinners, progress bars), see references/components.md.

Utility Classes Quick Reference

Display

d-none, d-block, d-flex, d-grid, d-inline, d-inline-block Responsive: d-md-none, d-lg-flex

Flexbox

justify-content-{start|center|end|between|around|evenly} align-items-{start|center|end|stretch} flex-{row|column}, flex-wrap, flex-grow-1

Text

text-{start|center|end}, text-{lowercase|uppercase|capitalize} fw-{bold|semibold|normal|light}, fs-{1-6} text-truncate, text-nowrap, text-break

Colors

text-{primary|secondary|success|danger|warning|info|light|dark} bg-{primary|secondary|success|danger|warning|info|light|dark} text-bg-{color} — sets matching text+bg together

Borders & Shadows

border, border-{top|bottom|start|end}, border-{color}, border-{1-5} rounded, rounded-{0-5|circle|pill} shadow, shadow-sm, shadow-lg, shadow-none

Sizing

w-{25|50|75|100|auto}, h-{25|50|75|100|auto} mw-100, mh-100, vw-100, vh-100 min-vw-100, min-vh-100

Position

position-{static|relative|absolute|fixed|sticky} top-{0|50|100}, start-{0|50|100}, translate-middle

Accessibility Requirements

  • Always include aria-label on icon-only buttons and togglers
  • Use aria-current="page" on active nav links
  • Use aria-expanded on collapse/dropdown triggers
  • Provide alt text on images; use .visually-hidden for screen-reader-only text
  • Ensure color contrast meets WCAG 2.1 AA (4.5:1 for text, 3:1 for large text)
  • Use semantic HTML: <nav>, <main>, <header>, <footer>, <section>, <article>
  • Never remove :focus styles; use Bootstrap's .focus-ring utility for custom focus

Anti-Patterns

  • Using col-* without a parent .row — breaks grid alignment
  • Nesting containers — only nest rows, never containers inside containers
  • Using <br> and inline styles for spacing — use spacing utilities (mt-3, mb-4)
  • Hardcoding bg-light/bg-dark — use bg-body-tertiary for theme-aware backgrounds
  • Forgetting navbar-expand-{breakpoint} — navbar won't collapse responsively
  • Mixing Bootstrap 4 classes (e.g., ml-3, mr-3) — use ms-3, me-3 (start/end logical properties)
  • Omitting type="button" on non-submit buttons in forms — causes unintended form submission
  • Using <a> for actions without href — use <button> for actions, <a> for navigation
  • Skipping .form-label on form inputs — hurts accessibility
  • Not wrapping tables in .table-responsive — causes horizontal overflow on mobile

FAQ

What does the bootstrap5-ui skill do?

Production-grade Bootstrap 5.3 patterns for building modern, responsive web UIs in HTML and ASP.NET Core Razor Pages/Views. Use when creating or styling web pages, layouts, navigation, forms, cards, modals, tables, or any UI component with Bootstrap 5. Covers the grid system, responsive breakpoints, utility classes, color modes (dark/light), accessibility, and integration with ASP.NET Core tag helpers and Razor syntax. Trigger on any task involving Bootstrap CSS classes, responsive HTML layouts, Razor Page UI design, or front-end styling for .NET web applications.

How do I install bootstrap5-ui?

Run npx skills add https://github.com/wshaddix/dotnet-skills --skill bootstrap5-ui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/bootstrap5-ui/ (personal) or .claude/skills/bootstrap5-ui/ (project).

Which AI agents can use bootstrap5-ui?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is bootstrap5-ui safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains bootstrap5-ui?

It is published by wshaddix in wshaddix/dotnet-skills. It has 116 recorded installs.

More from wshaddix/dotnet-skills

View all →

dotnet-xunit

wshaddix/dotnet-skills

Writing xUnit tests. v3 Fact/Theory, fixtures, parallelism, IAsyncLifetime, v2 compatibility.

Backend & APIs613 installs

dotnet-testing-strategy

wshaddix/dotnet-skills

Deciding how to test .NET code. Unit vs integration vs E2E decision tree, test doubles.

Testing & QA610 installs

modern-csharp-coding-standards

wshaddix/dotnet-skills

Write modern, high-performance C code using records, pattern matching, value objects, async/await, Span /Memory , and best-practice API design patterns. Emphasizes functional-style programming with C 12+ features. Use when writing new C code or refactoring existing code, designing public APIs for libraries or services, optimizing performance-critical code paths, or building async/await-heavy applications.

Code Quality & Workflow583 installs

csharp-wolverinefx

wshaddix/dotnet-skills

Build .NET applications with WolverineFX for messaging, HTTP services, and event sourcing. Use when implementing command handlers, message handlers, HTTP endpoints with WolverineFx.HTTP, transactional outbox patterns, event sourcing with Marten, CQRS architectures, cascading messages, batch message processing, or configuring transports like RabbitMQ, Azure Service Bus, or Amazon SQS.

Backend & APIs570 installs

testcontainers

wshaddix/dotnet-skills

Patterns for using Testcontainers in .NET integration tests to spin up real dependencies like databases and message queues. Use when writing integration tests that require real databases, testing with message brokers like RabbitMQ or Kafka, or isolating test dependencies with Docker containers.

Testing & QA565 installs

microsoft-extensions-dependency-injection

wshaddix/dotnet-skills

Dependency injection patterns and best practices using Microsoft.Extensions.DependencyInjection for .NET applications. Use when configuring DI containers in .NET, choosing between service lifetimes (Singleton, Scoped, Transient), or implementing decorator patterns and service interception.

Security549 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs