Forms
Bootstrap 5.3 form patterns: .form-label, .form-floating, .input-group, validation, switches, .btn-check, and nested data-bs-theme islands. Toggle light/dark in the navbar — controls use CSS variables.
Beyond the basics
This page avoids legacy .form-group wrappers. Use grid (.row + .g-*), spacing utilities, and semantic fieldset/legend. Client validation uses .needs-validation + novalidate; server-style feedback uses .is-valid / .is-invalid.
1 · Stacked labels + help
.form-label, .form-text, required asterisk via attribute.
2 · Floating labels
.form-floating with placeholder required for sizing.
3 · Input groups
.input-group-text, merged buttons, multiple addons, .form-floating inside group.
.fb5-ig-textarea-label for top alignment with the first line.4 · Dropdown in input group
Wrap the toggle + menu in .dropdown so Popper positions correctly; use .fb5-ig-dropdown-nowrap to keep one row on small+ screens.
5 · Control sizing
.form-control-sm / .form-control-lg and matching .col-form-label-*.
6 · Responsive grid (gutters)
.row.g-3 + .col-md-*; .form-control and .form-select share the same min-height on this page so city / state / zip line up.
7 · Horizontal layout + fieldset
.row.mb-3 with .col-sm-2.col-form-label; radios grouped in fieldset.
8 · Label vertical align
.col-form-label with .col-sm-* + .align-* on row.
9 · Inline flex toolbar
Flex row with align-items-end; shared control min-height keeps the select flush with the text field.
10 · Readonly & plaintext
readonly, .form-control-plaintext, disabled.
11 · Disabled fieldset
Native disabled on fieldset disables descendants.
12 · Browser validation (.needs-validation)
Submit adds .was-validated; empty required fields show native bubbles + Bootstrap feedback.
13 · Server-style feedback
.is-valid / .is-invalid + .valid-feedback / .invalid-feedback.
14 · Range, color, datalist
15 · Checks, radios, switches
16 · Inline checks & radios
.form-check-inline for compact rows; pair with fieldset / legend for a11y.
17 · Checkbox & radio as buttons (.btn-check)
Hidden input + label.btn; stack sizes and semantic colors for dense toolbars.
Toggles
Segmented control
Sizes & outlines
18 · Form inside a card
Quick invite
19 · List group + radios
.list-group-item with nested .form-check.
20 · Nested color mode (data-bs-theme)
Bootstrap re-maps variables per subtree — useful for dark strips on light pages (or the reverse).
Dark island (always dark chrome)
Light island on dark band
Nested data-bs-theme="light" on a dark strip — floating labels + dual actions.
21 · Select, optgroup, multiple
22 · File input
.form-control styling from Bootstrap 5.23 · Native input types (sample values)
24 · Template shape utilities
Pack-specific .form-control-rounded / .form-control-square still apply if you need pill or square corners outside Bootstrap defaults.