YouTip

We can use the .input-group class to add more styles to form input boxes, such as icons, text, or buttons. Use the .input-group-prepend class to add text information in front of the input box, and the .input-group-append class to add it after the input box. Finally, we also need to use the .input-group-text class to set the text style. !(#) ## Bootstrap4 Example [Try it »](#) * * * ## Input Group Size Use the .input-group-sm class to set a small input box, and the .input-group-lg class to set a large input box: ## Bootstrap4 Example [Try it »](#) * * * ## Multiple Inputs and Text ## Bootstrap4 Example [Try it »](#) * * * ## Checkboxes and Radio Buttons Text information can be replaced with checkboxes and radio buttons: !(#) ## Bootstrap4 Example [Try it »](#) * * * ## Input Group with Button Groups ## Bootstrap4 Example [Try it »](#) * * * ## Input Group with Dropdown Menu You don't need to use the .dropdown class to add dropdown menus in input groups. !(#) ## Bootstrap4 Example [Try it »](#) * * * ## Input Group Labels Set labels for input groups by using a label outside the input group. The label's for attribute should correspond to the input group's id. Clicking the label will focus the input: !(#) ## Bootstrap4 Example Write your email here: