Form controls

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Form controls—the ideas, syntax, and habits you need before moving on in Bootstrap.

Forms are where users convert and where security mistakes (validation, labels) show up first.

You will apply Form controls in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Bootstrap styles native form elements with semantic classes so you get consistent sizing, focus rings, and disabled states without rewriting CSS. The core control class is form-control on text inputs and textareas; selects use form-select; checkboxes and radios use form-check wrappers.

Labels and help text

Pair every control with form-label and connect via for/id from your HTML forms fundamentals. Add hints with form-text below the field. Disabled controls use the native disabled attribute—Bootstrap dims them automatically.

Sizing

Scale inputs with form-control-lg or form-control-sm when a dense toolbar or hero signup needs different density. Keep label size consistent unless design spec says otherwise.

Self-check

Which class belongs on a <select> instead of form-control?
How do you associate a label with an input without nesting?
What attribute disables a field for assistive tech and styling?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Are labels wired with for/id?
What control type was new to you?

No discussion yet. Be the first to ask a question.