Label, control, hint — one height, one voice, one ring on focus.
Where the admin spends most of its markup: a label, a control, sometimes a hint. The row is three stock pieces, and the skin holds them to one height and one voice.
<label class="form-label" for="f-title">Title</label>
<input id="f-title" type="text" class="form-control" />
<div class="form-text">Shown in listings and the browser tab.</div>
| Piece | What the skin does |
|---|---|
form-label |
One size — control-size type, tight seat below. The small class is a no-op; weight stays whatever the markup says. |
form-control |
The one control height, app radius, control type size. form-control-sm is a no-op. |
form-select |
Same metrics; the right padding stays Bootstrap's — that side belongs to the arrow. form-select-sm is a no-op. |
input-group-text |
Rides the same metrics, so affixed groups sit flush at the one height. |
form-text |
The hint voice, as Bootstrap ships it. |
Inputs, selects, and buttons all resolve to the same height on purpose: a toolbar that mixes them stays a single line with nothing proud of the rest.
One ring everywhere — inputs, selects, and checks share the same focus treatment, an accent border with the accent ring, replacing Bootstrap's default halo. A form's focus should look like the app's focus.
py-* / px-* on controls, no shadow-* on wrappers that hold
them.