Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

37 of 39
BS5 Checks and RadiosBS5 RangeBS5 Input GroupsBS5 Floating LabelsBS5 Form Validation

🔗 BS5 Input Groups

📌 What Are Bootstrap 5 Input Groups?

Input groups attach add-ons (text, buttons) to an input. Use .input-group as the wrapper, .input-group-text for add-ons, and .form-control for the input. Place add-ons before or after the input.

🔗 Basic Input Group (.input-group, .input-group-text)

.input-group – flex container that groups the input and add-ons. .input-group-text – styles a span or div as an add-on (e.g. "@", "$"). Put .form-control next to it.

🅱️

bootstrap Designer

Live Component Playground

html Source
Loading...
Built with Bootstrap 5.3 • Enterprise Ready

✅ Input Group Best Practices

  • Use .input-group-text for static text add-ons.
  • Use .form-control for the actual input.
  • Add aria-label on the input when the label is visual only.

🧠 Test Your Knowledge

2 Questions

Progress: 0 / 2
Keep Going!BS5 Floating Labels