Bootstrap 5 UI Tutorial

Build fast, responsive sites with Bootstrap 5

Chapter Quiz Exercises
Course Topics
BS5 Get Started BS5 Containers BS5 Grid Basic BS5 Typography BS5 Colors BS5 Tables BS5 Images BS5 Alerts BS5 Buttons BS5 Button Groups BS5 Badges BS5 Progress Bars BS5 Spinners BS5 Pagination BS5 List Groups BS5 Cards BS5 Dropdowns BS5 Collapse BS5 Navs BS5 Navbar BS5 Carousel BS5 Modal BS5 Forms BS5 Input Groups BS5 Floating Labels BS5 Form Validation BS5 Grid System BS5 Dark Mode BS5 Flex BS5 Utilities

BS5 Input Groups

Bootstrap 5 Input Groups

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text".

Use the .input-group-text class to style the specified help text.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code
Result
Topics
BS5 Get Started BS5 Containers BS5 Grid Basic BS5 Typography BS5 Colors BS5 Tables BS5 Images BS5 Alerts BS5 Buttons BS5 Button Groups BS5 Badges BS5 Progress Bars BS5 Spinners BS5 Pagination BS5 List Groups BS5 Cards BS5 Dropdowns BS5 Collapse BS5 Navs BS5 Navbar BS5 Carousel BS5 Modal BS5 Forms BS5 Input Groups BS5 Floating Labels BS5 Form Validation BS5 Grid System BS5 Dark Mode BS5 Flex BS5 Utilities