Input groups

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

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

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Input groups 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.

Input groups fuse addons, buttons, and text fields into one visual control. Wrap siblings in input-group; prepend or append static text with input-group-text; attach buttons with btn classes inside the group.

Common patterns

Currency or unit prefixes ($, https://)
Search fields with a submit button on the right
Username fields with @company.com suffix

Keep one primary action per group—multiple buttons confuse keyboard order. For complex pickers (date ranges, tag inputs), reach for a dedicated component rather than stacking many addons.

Self-check

Which wrapper class joins an input and a prepended label?
Where does input-group-text go relative to the input?
When is an input group the wrong pattern?

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

When prepend text vs button?
How does aria-describedby fit?

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