bootstrap5-ui

Name: bootstrap5-ui
Author: wshaddix

84installs10forks

How to install bootstrap5-ui?

wshaddix/dotnet-skills/bootstrap5-ui

$npx -y skills add wshaddix/dotnet-skills --skill bootstrap5-ui

Installs into the current project.

Summary

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, res

Files · 1

View on GitHub

SKILL.md

1	# Bootstrap 5 UI
2
3	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.
4
5	## Setup in ASP.NET Core
6
7	### CDN (Quick Start)
8
9	In `_Layout.cshtml` or `_Host.cshtml`:
10
11	```html
12	<!-- In <head> -->
13	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
14	rel="stylesheet"
15	integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
16	crossorigin="anonymous">
17
18	<!-- Before closing </body> -->
19	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
20	integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
21	crossorigin="anonymous"></script>
22	```
23
24	### LibMan (Recommended for Production)
25
26	```json
27	// libman.json
28	{
29	"version": "1.0",
30	"defaultProvider": "jsdelivr",
31	"libraries": [
32	{
33	"library": "bootstrap@5.3.8",
34	"destination": "wwwroot/lib/bootstrap/"
35	}
36	]
37	}
38	```
39
40	Reference locally in layout:
41	```html
42	<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
43	<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
44	```
45
46	### Required Globals
47
48	Always include in `<head>`:
49	```html
50	<!doctype html>
51	<html lang="en">
52	<head>
53	<meta charset="utf-8">
54	<meta name="viewport" content="width=device-width, initial-scale=1">
55	```
56
57	## Grid System
58
59	Bootstrap uses a 12-column flexbox grid with 6 responsive breakpoints:
60
61	\| Breakpoint \| Prefix \| Min-width \|
62	\|------------\|--------\|-----------\|
63	\| Extra small \| `.col-` \| <576px \|
64	\| Small \| `.col-sm-` \| >=576px \|
65	\| Medium \| `.col-md-` \| >=768px \|
66	\| Large \| `.col-lg-` \| >=992px \|
67	\| Extra large \| `.col-xl-` \| >=1200px \|
68	\| XXL \| `.col-xxl-` \| >=1400px \|
69
70	### Core Pattern
71
72	```html
73	<div class="container">
74	<div class="row">
75	<div class="col-md-8">Main content</div>
76	<div class="col-md-4">Sidebar</div>
77	</div>
78	</div>
79	```
80
81	### Key Rules
82	- Always wrap columns in `.row` inside a `.container` (or `.container-fluid` for full-width)
83	- Columns must be direct children of rows
84	- Use `.g-` classes for gutters (`.g-0` removes gutters, `.gx-` horizontal, `.gy-*` vertical)
85	- Use `.row-cols-*` on the row for uniform column counts: `<div class="row row-cols-1 row-cols-md-3 g-4">`
86	- 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
87
88	### Container Types
89	- `.container` — responsive fixed-width
90	- `.container-fluid` — full-width always
91	- `.container-{breakpoint}` — fluid until breakpoint, then fixed
92
93	## Spacing Utilities
94
95	Format: `{property}{sides}-{breakpoint}-{size}`
96
97	Property: `m` (margin), `p` (padding)
98	Sides: `t` top, `b` bottom, `s` start(left), `e` end(right), `x` horizontal, `y` vertical, blank = all
99	Size: `0`=0, `1`=0.25rem, `2`=0.5rem, `3`=1rem, `4`=1.5rem, `5`=3rem, `auto`
100
101	```html
102	<div class="mt-3 mb-4 px-2">Spaced element</div>
103	<div class="mx-auto" style="width: 200px;">Centered block</div>
104	<div class="py-md-5">Padding only on md+</div>
105	```
106
107	## Color Modes (Dark/Light)
108
109	Bootstrap 5.3 supports `data-bs-theme` attribute for dark mode:
110
111	```html
112	<!-- Global dark mode -->
113	<html lang="en" data-bs-theme="dark">
114
115	<!-- Per-component -->
116	<div class="card" data-bs-theme="dark">...</div>
117	<nav class="navbar bg-dark" data-bs-theme="dark">...</nav>
118	```
119
120	Use semantic color classes that adapt to color mode:
121	- `bg-body`, `bg-body-secondary`, `bg-body-tertiary` — adapt to theme
122	- `text-body`, `text-body-secondary`, `text-body-emphasis` — adapt to theme
123	- `border-body` — adapts to theme
124
125	Avoid hardcoded colors. Use `bg-body-tertiary` instead of `bg-light` for theme-aware backgrounds.
126
127	## Common Component Patterns
128
129	### Navbar
130
131	```html
132	<nav class="navbar navbar-expand-lg bg-body-tertiary">
133	<div class="container-fluid">
134	<a class="navbar-brand" href="#">Brand</a>
135	<button class="navbar-toggler" type="button"
136	data-bs-toggle="collapse" data-bs-target="#mainNav"
137	aria-controls="mainNav" aria-expanded="false"
138	aria-label="Toggle navigation">
139	<span class="navbar-toggler-icon"></span>
140	</button>
141	<div class="collapse navbar-collapse" id="mainNav">
142	<ul class="navbar-nav me-auto mb-2 mb-lg-0">
143	<li class="nav-item">
144	<a class="nav-li

People who liked this also viewed

6 picks

Type

bootstrap5-ui

84installs10forks

View on GitHub

How to install bootstrap5-ui?

wshaddix/dotnet-skills/bootstrap5-ui

$npx -y skills add wshaddix/dotnet-skills --skill bootstrap5-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Bootstrap 5 UI
2
3	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.
4
5	## Setup in ASP.NET Core
6
7	### CDN (Quick Start)
8
9	In `_Layout.cshtml` or `_Host.cshtml`:
10
11	```html
12	<!-- In <head> -->
13	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
14	rel="stylesheet"
15	integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
16	crossorigin="anonymous">
17
18	<!-- Before closing </body> -->
19	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
20	integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
21	crossorigin="anonymous"></script>
22	```
23
24	### LibMan (Recommended for Production)
25
26	```json
27	// libman.json
28	{
29	"version": "1.0",
30	"defaultProvider": "jsdelivr",
31	"libraries": [
32	{
33	"library": "bootstrap@5.3.8",
34	"destination": "wwwroot/lib/bootstrap/"
35	}
36	]
37	}
38	```
39
40	Reference locally in layout:
41	```html
42	<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
43	<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
44	```
45
46	### Required Globals
47
48	Always include in `<head>`:
49	```html
50	<!doctype html>
51	<html lang="en">
52	<head>
53	<meta charset="utf-8">
54	<meta name="viewport" content="width=device-width, initial-scale=1">
55	```
56
57	## Grid System
58
59	Bootstrap uses a 12-column flexbox grid with 6 responsive breakpoints:
60
61	\| Breakpoint \| Prefix \| Min-width \|
62	\|------------\|--------\|-----------\|
63	\| Extra small \| `.col-` \| <576px \|
64	\| Small \| `.col-sm-` \| >=576px \|
65	\| Medium \| `.col-md-` \| >=768px \|
66	\| Large \| `.col-lg-` \| >=992px \|
67	\| Extra large \| `.col-xl-` \| >=1200px \|
68	\| XXL \| `.col-xxl-` \| >=1400px \|
69
70	### Core Pattern
71
72	```html
73	<div class="container">
74	<div class="row">
75	<div class="col-md-8">Main content</div>
76	<div class="col-md-4">Sidebar</div>
77	</div>
78	</div>
79	```
80
81	### Key Rules
82	- Always wrap columns in `.row` inside a `.container` (or `.container-fluid` for full-width)
83	- Columns must be direct children of rows
84	- Use `.g-` classes for gutters (`.g-0` removes gutters, `.gx-` horizontal, `.gy-*` vertical)
85	- Use `.row-cols-*` on the row for uniform column counts: `<div class="row row-cols-1 row-cols-md-3 g-4">`
86	- 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
87
88	### Container Types
89	- `.container` — responsive fixed-width
90	- `.container-fluid` — full-width always
91	- `.container-{breakpoint}` — fluid until breakpoint, then fixed
92
93	## Spacing Utilities
94
95	Format: `{property}{sides}-{breakpoint}-{size}`
96
97	Property: `m` (margin), `p` (padding)
98	Sides: `t` top, `b` bottom, `s` start(left), `e` end(right), `x` horizontal, `y` vertical, blank = all
99	Size: `0`=0, `1`=0.25rem, `2`=0.5rem, `3`=1rem, `4`=1.5rem, `5`=3rem, `auto`
100
101	```html
102	<div class="mt-3 mb-4 px-2">Spaced element</div>
103	<div class="mx-auto" style="width: 200px;">Centered block</div>
104	<div class="py-md-5">Padding only on md+</div>
105	```
106
107	## Color Modes (Dark/Light)
108
109	Bootstrap 5.3 supports `data-bs-theme` attribute for dark mode:
110
111	```html
112	<!-- Global dark mode -->
113	<html lang="en" data-bs-theme="dark">
114
115	<!-- Per-component -->
116	<div class="card" data-bs-theme="dark">...</div>
117	<nav class="navbar bg-dark" data-bs-theme="dark">...</nav>
118	```
119
120	Use semantic color classes that adapt to color mode:
121	- `bg-body`, `bg-body-secondary`, `bg-body-tertiary` — adapt to theme
122	- `text-body`, `text-body-secondary`, `text-body-emphasis` — adapt to theme
123	- `border-body` — adapts to theme
124
125	Avoid hardcoded colors. Use `bg-body-tertiary` instead of `bg-light` for theme-aware backgrounds.
126
127	## Common Component Patterns
128
129	### Navbar
130
131	```html
132	<nav class="navbar navbar-expand-lg bg-body-tertiary">
133	<div class="container-fluid">
134	<a class="navbar-brand" href="#">Brand</a>
135	<button class="navbar-toggler" type="button"
136	data-bs-toggle="collapse" data-bs-target="#mainNav"
137	aria-controls="mainNav" aria-expanded="false"
138	aria-label="Toggle navigation">
139	<span class="navbar-toggler-icon"></span>
140	</button>
141	<div class="collapse navbar-collapse" id="mainNav">
142	<ul class="navbar-nav me-auto mb-2 mb-lg-0">
143	<li class="nav-item">
144	<a class="nav-li

People who liked this also viewed

6 picks

Type