DEV Community

Tanay D Kubade
Tanay D Kubade

Posted on

Creating Form Using Bootstrap

Image description

Creating a Simple and Responsive Form Using Bootstrap

By Tanay Kubade | June 2025

Forms are a crucial part of modern websites and web applications, allowing users to input data, register accounts, log in, and interact with services. In this blog, we’ll walk through how to build a clean, responsive form using Bootstrap, one of the most popular front-end frameworks.

🔧 Why Use Bootstrap for Forms?

Bootstrap simplifies front-end development with pre-designed components and responsive grid layouts. Here’s why it's ideal for forms:

  • ✅ Mobile-first design
  • ✅ Built-in validation classes
  • ✅ Consistent styling
  • ✅ Easy to customize

🧱 Basic Setup

Before we dive into the form, ensure you’ve included Bootstrap in your project. Use the CDN link in your HTML:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

📝 Creating the Form Structure

Here’s a simple Bootstrap form layout:

<div class="container mt-5">
  <h2 class="mb-4">Contact Us</h2>
  <form>
    <div class="mb-3">
      <label for="name" class="form-label">Full Name</label>
      <input type="text" class="form-control" id="name" placeholder="Enter your full name">
    </div>

    <div class="mb-3">
      <label for="email" class="form-label">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="name@example.com">
    </div>

    <div class="mb-3">
      <label for="message" class="form-label">Message</label>
      <textarea class="form-control" id="message" rows="3"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
Enter fullscreen mode Exit fullscreen mode

🎨 Bootstrap Classes Used

  • container: Centers the form and adds padding.
  • form-label, form-control: Bootstrap’s default label and input styling.
  • mb-3, mt-5, mb-4: Margin utility classes for spacing.
  • btn btn-primary: Styles the submit button.

✅ Adding Validation

Bootstrap provides built-in validation styling:

<form class="was-validated">
  <div class="mb-3">
    <label for="email" class="form-label">Email*</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      Please enter a valid email.
    </div>
  </div>
</form>
Enter fullscreen mode Exit fullscreen mode

💡 Tips for Better Form Design

  • Keep the form layout simple and focused.
  • Group related fields together.
  • Use clear and concise labels.
  • Apply feedback and validation for better UX.
  • Ensure accessibility with proper label and id linking.

🚀 Conclusion

Using Bootstrap, you can quickly create responsive and professional-looking forms with minimal effort. Whether it’s a contact form, registration, or login page, Bootstrap provides the tools to make it look clean and user-friendly.

Written by @tanaykubade | Inspired by @devsyncin

👨‍💻 About the Author

Tanay Kubade is a Computer Science Engineering student passionate about web development and modern front-end technologies. Connect with him on LinkedIn.

Top comments (0)