Bootstrap Forms

Bootstrap Forms are used to build clean, responsive, and consistent form layouts. Bootstrap provides classes to style inputs, labels, checkboxes, radio buttons, select menus, and more, with minimal CSS.

Available in Bootstrap 3, 4, and 5. Classes differ slightly across versions.

✅ Basic Form

<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>

<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>

<form>

</div>

<label for="email">Email:</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

.form-group → Wraps each label and input for proper spacing.
.form-control → Styles inputs, textarea, and select elements.

🔹 Input Types

<input type="text" class="form-control" placeholder="Text">
<input type="password" class="form-control" placeholder="Password">
<input type="email" class="form-control" placeholder="Email">
<input type="number" class="form-control" placeholder="Number">
<input type="date" class="form-control">

All standard HTML input types are supported with .form-control.

🎯 Textarea

🔹 Select Menu

✅ Checkboxes & Radio Buttons

<div class="checkbox">
<label><input type="checkbox"> I agree to terms</label>
</div>

<div class="radio">
<label><input type="radio" name="gender" value="male"> Male</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="female"> Female</label>
</div>

<label><input type="checkbox"> I agree to terms</label>

</div>

</div>

<label><input type="radio" name="gender" value="female"> Female</label>

</div>

Use .checkbox and .radio for proper Bootstrap styling.

🔹 Inline Form

.form-inline → Makes inputs and buttons appear inline horizontally.

🎨 Horizontal Form

<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>

<label class="col-sm-2 control-label" for="email">Email:</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</div>

</form>

.form-horizontal → Aligns labels and inputs side by side using grid classes (col-sm-*).

🔹 Disabled & Readonly Inputs

✔ Summary

Feature	Supported
Input types (text, email, password, etc.)	✔️
Textarea	✔️
Select dropdowns	✔️
Checkboxes & Radio	✔️
Inline forms	✔️
Horizontal forms	✔️
Disabled & readonly	✔️
Buttons (primary, success, etc.)	✔️

Bootstrap Forms

✅ Basic Form

🔹 Input Types

🎯 Textarea

🔹 Select Menu

✅ Checkboxes & Radio Buttons

🔹 Inline Form

🎨 Horizontal Form

🔹 Disabled & Readonly Inputs

✔ Summary

You may also like...

Bootstrap 3 Tutorial

Bootstrap Grids

Bootstrap Forms

✅ Basic Form

🔹 Input Types

🎯 Textarea

🔹 Select Menu

✅ Checkboxes & Radio Buttons

🔹 Inline Form

🎨 Horizontal Form

🔹 Disabled & Readonly Inputs

✔ Summary

You may also like...

Bootstrap Get Started

Bootstrap Modal Plugin

Bootstrap Form Inputs

Bootstrap 3 Tutorial

Bootstrap Grids