Course Content
BOOTSTRAP Tutorial
About Lesson

Forms and input groups

Forms are integral components of web development, allowing users to interact with websites by inputting information. Bootstrap, a popular front-end framework, offers a range of tools to streamline form creation. One of its powerful features is input groups, which enhance form fields by incorporating additional elements.

Understanding Input Groups

Input groups in Bootstrap enable the integration of buttons, text, or dropdowns within form inputs, providing a more user-friendly and visually appealing interface. This feature proves invaluable in various scenarios, such as appending currency symbols, buttons, or icons to inputs.

Basic Setup

To start using input groups, ensure you have the Bootstrap library linked in your HTML document. Here’s a basic setup for an input group:

<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>

This creates an input field with an “@” symbol prepended, indicating it might be used for an email or username.

Adding Add-ons

Bootstrap allows the incorporation of add-ons like buttons or dropdowns alongside inputs. For instance:

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" placeholder="Enter amount">
<button class="btn btn-outline-secondary" type="button">Submit</button>
</div>

This code snippet adds a dollar sign before the input field and a “Submit” button after it, creating a cohesive input group.

Sizing and Alignment

Bootstrap provides options for adjusting the size and alignment of input groups. You can utilize classes like input-group-lg, input-group-sm, input-group-prepend, or input-group-append to modify the appearance and layout according to your design requirements.

Validation and Feedback

Validating user inputs is crucial in forms. Bootstrap simplifies this process by offering validation styles and feedback icons. You can use classes like is-valid and is-invalid to visually represent valid and invalid input, providing users with immediate feedback