Bootstrap 5 FormsLesson 38Free preview
BS5 Input Groups
This lesson is part of Bootstrap · All levels
Summary
Input groups combine text or buttons with inputs in a neat line, such as the prefix @ on a username or the send button at the end of a column. Its structure uses .input-group with .input-group-text for the packaging text and .form-control for the main input. In Bootstrap 5, the elements are assembled directly without a prepend or append wrapper.
Key points
- It's a controlled combined pack.
- .input-group-text wrap text or icons such as prefixes and endings.
- Bootstrap 5 no longer uses .input-group-prepend and .input-group-append.
- .input-group-sm and .input-group-lg set the size.
- The buttons can also be combined, for example the Search button at the end of the input.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.