Nearby lessons
33 of 39📝 BS5 Forms
📌 What Are Bootstrap 5 Form Controls?
Bootstrap styles form elements with .form-control (inputs, textareas), .form-label (labels), .form-text (help text). Use .mb-3 to space form groups. Wrap each label+input in a div.
📝 Text Inputs (.form-control, .form-label)
.form-control – styles <input>, <textarea>, <select> with border, padding, focus state. .form-label – styles the <label>. Use for and id to associate them.
📄 Textarea (.form-control)
Use .form-control on <textarea> for the same styling. You can set rows to control height.
💬 Help Text (.form-text)
.form-text – small muted text below a control (e.g. “We’ll never share your email”). Use aria-describedby on the input and id on the help div for accessibility.
📏 Form Control Sizes (.form-control-lg, .form-control-sm)
.form-control-lg – larger input. .form-control-sm – smaller. Add to the same element as .form-control.
✅ Form Best Practices
- Use .form-label and .form-control for consistent styling.
- Use .form-text for help and aria-describedby to link it.
- Use .mb-3 (or similar) to space form groups.
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 Select Menus