Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From dotnet-skills
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.
npx claudepluginhub wshaddix/dotnet-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/dotnet-skills:bootstrap5-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
Best practices for building production-grade ASP.NET Core Razor Pages applications. Focuses on structure, lifecycle, binding, validation, security, and maintainability in web apps using Razor Pages as the primary UI framework. Use when building Razor Pages applications, designing PageModels and handlers, implementing model binding and validation, or securing Razor Pages with authentication and authorization.
Styles Rails views using Tailwind CSS utilities and DaisyUI components for responsive, themeable, accessible UIs without custom CSS.
Provides atomic design UI component patterns (atoms, molecules, organisms) with Tailwind style variants via CVA, accessibility features, and tests for React/TypeScript apps.
Share bugs, ideas, or general feedback.
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.
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.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>
Always include in <head>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap uses a 12-column flexbox grid with 6 responsive breakpoints:
| Breakpoint | Prefix | Min-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 |
<div class="container">
<div class="row">
<div class="col-md-8">Main content</div>
<div class="col-md-4">Sidebar</div>
</div>
</div>
.row inside a .container (or .container-fluid for full-width).g-* classes for gutters (.g-0 removes gutters, .gx-* horizontal, .gy-* vertical).row-cols-* on the row for uniform column counts: <div class="row row-cols-1 row-cols-md-3 g-4"><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 — responsive fixed-width.container-fluid — full-width always.container-{breakpoint} — fluid until breakpoint, then fixedFormat: {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>
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 themetext-body, text-body-secondary, text-body-emphasis — adapt to themeborder-body — adapts to themeAvoid hardcoded colors. Use bg-body-tertiary instead of bg-light for theme-aware backgrounds.
<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>
<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>
<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>
<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>
<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>
For detailed ASP.NET Core Razor Pages integration patterns including tag helpers, validation, layouts, and partial views, see references/razor-integration.md.
Key points:
asp-for, asp-page, asp-action tag helpers with Bootstrap classesasp-validation-for with .invalid-feedback / .is-invalid classes@section Scripts for page-specific scripts in layoutFor complete component patterns (modals, alerts, toasts, accordion, pagination, breadcrumbs, badges, offcanvas, spinners, progress bars), see references/components.md.
d-none, d-block, d-flex, d-grid, d-inline, d-inline-block
Responsive: d-md-none, d-lg-flex
justify-content-{start|center|end|between|around|evenly}
align-items-{start|center|end|stretch}
flex-{row|column}, flex-wrap, flex-grow-1
text-{start|center|end}, text-{lowercase|uppercase|capitalize}
fw-{bold|semibold|normal|light}, fs-{1-6}
text-truncate, text-nowrap, text-break
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
border, border-{top|bottom|start|end}, border-{color}, border-{1-5}
rounded, rounded-{0-5|circle|pill}
shadow, shadow-sm, shadow-lg, shadow-none
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-{static|relative|absolute|fixed|sticky}
top-{0|50|100}, start-{0|50|100}, translate-middle
aria-label on icon-only buttons and togglersaria-current="page" on active nav linksaria-expanded on collapse/dropdown triggersalt text on images; use .visually-hidden for screen-reader-only text<nav>, <main>, <header>, <footer>, <section>, <article>:focus styles; use Bootstrap's .focus-ring utility for custom focuscol-* without a parent .row — breaks grid alignment<br> and inline styles for spacing — use spacing utilities (mt-3, mb-4)bg-light/bg-dark — use bg-body-tertiary for theme-aware backgroundsnavbar-expand-{breakpoint} — navbar won't collapse responsivelyml-3, mr-3) — use ms-3, me-3 (start/end logical properties)type="button" on non-submit buttons in forms — causes unintended form submission<a> for actions without href — use <button> for actions, <a> for navigation.form-label on form inputs — hurts accessibility.table-responsive — causes horizontal overflow on mobile