Bootstrap Module 35

  Module 35 : Input Groups & Floating Labels 

1. Input Groups – Concept & Purpose

What is an Input Group?

An Input Group allows you to attach text, icons, buttons, or dropdowns before or after an input field.

Why Input Groups Are Important

Improve clarity of input purpose

Reduce form clutter

Enhance user example (UX)

Ideal for:

                

Currency inputs

Search bars

Username/email fields

verification inputs

2. Structure of Input Groups

Basic Syntax

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

Key Components

Component

Description

input-group

Wrapper container

input-group-text

Text, icons, or symbols

form-control

Input field

3. Input Group Examples

Example 1: Email Input

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

Explanation:

@ symbol tells the user it’s an email

Reduces confusion

Improves form speed

Example 2: Currency Input

<div class="input-group mb-3"> <span class="input-group-text">₹</span> <input type="number" class="form-control" placeholder="Amount"> </div>

Use Case:

E-commerce checkout, payment forms, invoices

Example 3: Button Inside Input Group

<div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <button class="btn btn-primary">Search</button> </div>

Use Case:

Search bars, filters, dashboards

4. Floating Labels – Concept & Purpose

What Are Floating Labels?

Floating labels are labels that start inside the input field and move upward when the user types.

Why Floating Labels Matter

Saves space

Cleaner UI

Better mobile experience

Avoids placeholder-only issues

5. Floating Labels – Basic Structure

Syntax

<div class="form-floating mb-3"> <input type="text" class="form-control" id="name" placeholder="Name"> <label for="name">Full Name</label> </div>

Important Rules

placeholder is mandatory (even if empty)

Label must come after input

Works best with text-based inputs

6. Floating Label Examples

Example 1: Login Form

<div class="form-floating mb-3"> <input type="email" class="form-control" id="email" placeholder="Email"> <label for="email">Email address</label> </div> <div class="form-floating"> <input type="password" class="form-control" id="password" placeholder="Password"> <label for="password">Password</label> </div>

UX Benefit:

Label is always visible

No confusion after typing

7. Combining Input Groups with Floating Labels

Advanced Example

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

Explanation

Input Group provides context (@)

Floating Label provides clarity

Works well for modern login/signup forms

8. Accessibility 

✔ Always use <label>

✔ Use meaningful placeholders

✔ Avoid icons without text for screen readers

✔ Maintain proper contrast

Accessibility Tip

<label for="email" class="visually-hidden">Email</label>

9. Exercises

Exercise 1

Create a registration form with:

Name (Floating Label)

Email (Input Group with @)

Password (Floating Label)

Exercise 2

Create a payment form with:

Currency symbol

Amount input

Submit button inside input group

10. Title: Designing a Professional Login Form

Objective

Build a responsive login form using Input Groups & Floating Labels.

Steps

Include Bootstrap CDN

Create container and card

Add floating label inputs

Add input group icons

Test responsiveness

Code

<div class="container mt-5"> <div class="card p-4"> <h3 class="mb-3">Login</h3> <div class="input-group mb-3"> <span class="input-group-text">@</span> <div class="form-floating"> <input type="email" class="form-control" id="loginEmail" placeholder="Email"> <label for="loginEmail">Email</label> </div> </div> <div class="form-floating mb-3"> <input type="password" class="form-control" id="loginPass" placeholder="Password"> <label for="loginPass">Password</label> </div> <button class="btn btn-primary w-100">Login</button> </div> </div>

Expected Output

Clean modern UI

Responsive layout

User-friendly interaction

11. Research 

UI/UX Insights

Floating labels reduce form abandonment by up to 20%

Input groups improve form completion speed

Clear context reduces validation errors

Technical Research Areas

Bootstrap form rendering behavior

CSS positioning of floating labels

ARIA roles and accessibility testing

Comparison with Material UI forms

Advanced Research 

🔍 Compare:

Bootstrap Floating Labels

Material Design Floating Labels

Custom CSS solutions

Document:

Performance

Accessibility

Browser compatibility

Summary

Input Groups enhance context

Floating Labels improve clarity

Combined usage creates professional UI

Bootstrap simplifies complex form design

Essential skill for modern frontend developers