How to create form in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Form in Bootstrap: Simple Guide

To create a form in Bootstrap, use the <form> element with Bootstrap's form classes like form-control for inputs and btn for buttons. Wrap inputs in mb-3 for spacing or use Bootstrap 5's grid system for layout and responsiveness.

📐

Syntax

A Bootstrap form uses the <form> tag with input elements styled by Bootstrap classes. Use form-control on inputs for consistent styling. Group inputs with mb-3 for spacing. Buttons use btn classes for styling.

<form>: Container for form elements.
form-control: Styles text inputs, selects, and textareas.
mb-3: Adds margin below each form group for spacing.
btn btn-primary: Styles a button with primary color.

html

<form>
  <div class="mb-3">
    <label for="inputEmail" class="form-label">Email address</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="inputPassword" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output

A simple form with labeled email and password fields and a blue submit button.

💻

Example

This example shows a complete Bootstrap form with email, password, checkbox, and a submit button. It uses Bootstrap 5 classes for spacing and styling, making the form look clean and responsive.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <form>
      <div class="mb-3">
        <label for="emailInput" class="form-label">Email address</label>
        <input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
      </div>
      <div class="mb-3">
        <label for="passwordInput" class="form-label">Password</label>
        <input type="password" class="form-control" id="passwordInput" placeholder="Password">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="checkRemember">
        <label class="form-check-label" for="checkRemember">Remember me</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</body>
</html>

Output

A clean form with email and password fields, a checkbox labeled 'Remember me', and a blue submit button, all styled and spaced nicely.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap forms include:

Not adding form-control class to inputs, causing inconsistent styling.
Forgetting to wrap inputs in spacing classes like mb-3, making the form look cramped.
Using outdated Bootstrap classes like form-group instead of spacing utilities in Bootstrap 5.
Not including the Bootstrap CSS link, so styles do not apply.

Always check your form in different screen sizes to ensure responsiveness.

html

<!-- Wrong: Missing form-control class -->
<input type="text" id="name" placeholder="Name">

<!-- Right: Added form-control class -->
<input type="text" class="form-control" id="name" placeholder="Name">

📊

Quick Reference

Bootstrap form essentials:

Class	Purpose
form-control	Styles inputs, selects, and textareas with consistent look
form-label	Styles labels for inputs
mb-3	Adds margin below elements for spacing
form-check	Container for checkbox or radio inputs
form-check-input	Styles checkbox or radio input
form-check-label	Styles label for checkbox or radio
btn btn-primary	Styles a button with primary color

✅

Key Takeaways

Use form-control class on inputs for consistent Bootstrap styling.

Wrap inputs in spacing classes like mb-3 to keep form neat and readable.

Include Bootstrap CSS link to apply styles correctly.

Use form-check classes for checkboxes and radios.

Test your form on different screen sizes for responsiveness.