• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Forms

← Previous Next →

Forms are an essential part of any website or web application. They allow users to interact, submit data, and communicate with the backend. Bootstrap 4 simplifies the creation of clean, responsive, and user-friendly forms. Instead of manually styling each input element, Bootstrap provides ready-to-use classes that ensure consistency across all devices.

Basic Form Structure

A form in HTML uses the <form> tag, which contains input elements such as text fields, checkboxes, radio buttons, dropdowns, and buttons. Bootstrap 4 enhances these elements with classes that make them look polished and responsive.

<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Key Points:

  • form-group ensures proper spacing between elements.

  • Labels are linked to inputs using the for attribute.

  • Buttons styled with btn and btn-primary follow Bootstrap’s design system.

Form Layouts

Bootstrap 4 provides flexibility in how forms are laid out. By default, forms stack vertically, which works well for mobile screens. For wider screens, a horizontal layout can be created using the form-row and col classes.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName" placeholder="First Name">
    </div>
    <div class="form-group col-md-6">
      <label for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName" placeholder="Last Name">
    </div>
  </div>
  <button type="submit" class="btn btn-success">Register</button>
</form>

Explanation:

  • col-md-6 divides the row into two equal columns on medium and larger screens.

  • On smaller screens, columns stack vertically automatically.

Inline Forms

Inline forms are compact forms typically used in navigation bars or toolbars. They keep all elements on a single line when space allows.

<form class="form-inline">
  <input class="form-control mb-2 mr-sm-2" type="text" placeholder="Username">
  <input class="form-control mb-2 mr-sm-2" type="password" placeholder="Password">
  <button class="btn btn-primary mb-2" type="submit">Sign in</button>
</form>

Notes:

  • form-inline keeps elements inline.

  • mb-2 adds bottom margin for spacing on small screens.

  • mr-sm-2 adds right margin between inputs on small screens and above.

Validation and Feedback

Bootstrap 4 provides built-in classes for input validation. Classes like is-valid and is-invalid visually indicate whether an input is correct or not. Feedback messages are displayed with valid-feedback or invalid-feedback.

<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control is-invalid" id="email" placeholder="Enter your email">
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Explanation:

  • Red borders indicate invalid inputs.

  • Green borders indicate valid inputs.

  • Instant feedback improves user experience and reduces errors.

Customizing Forms

Bootstrap 4 allows customization of form elements for different sizes and appearances.

Input Sizes

<input type="text" class="form-control form-control-lg" placeholder="Large input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">

  • form-control-lg creates larger inputs.

  • form-control-sm creates smaller inputs.

Additional Input Types

Bootstrap 4 supports all HTML5 input types such as email, password, number, date, and file. For modern file uploads, use custom-file classes:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

  • Label automatically updates with the selected file name.

  • Provides a cleaner look than default file input.

Best Practices for Form Design

  • Use form-group to group related inputs.

  • Always provide clear labels and placeholders.

  • Use form-row and col-* classes for responsive layouts.

  • Implement instant validation feedback to guide users.

  • Use disabled and readonly attributes carefully to indicate non-editable fields.

Summary of the Tutorial

This tutorial covered how to create responsive and user-friendly forms using Bootstrap 4. You learned:

  • How to structure basic forms with form-group and form-control.

  • Creating horizontal and inline form layouts for different screen sizes.

  • Using validation classes like is-valid and is-invalid along with feedback messages.

  • Customizing input sizes with form-control-lg and form-control-sm.

  • Adding advanced input types, including modern file uploads using custom-file.

  • Best practices for clean, responsive, and professional form design.

By applying these techniques, you can build forms that are visually appealing, consistent across devices, and provide a smooth user experience.

Practice Questions

  1. Create a simple contact form with fields: Name, Email, and Message. Use form-group and form-control classes. Add a submit button styled with btn-primary.

  2. Build a registration form with First Name and Last Name side by side using form-row and col-md-6. Add Email and Password fields stacked below them.

  3. Create a login form where Username and Password inputs are inline on a large screen using form-inline. Add a Sign In button at the end.

  4. Design a form with Email and Password fields. Apply is-invalid for email and invalid-feedback text. Show green border using is-valid for password.

  5. Create a form that allows users to upload a profile picture. Use custom-file input with the label updating on file selection.

  6. Build a form demonstrating input size variations using form-control-lg and form-control-sm for Name and Phone fields.

  7. Create a form with a select dropdown for “Country” and a text input for “City.” Use Bootstrap 4 classes for proper spacing and alignment.

  8. Create a form where the Email field is read-only and the Username field is disabled. Add a submit button to test form behavior.

  9. Design a form with three input fields (City, State, Zip Code) aligned in a single row using form-row and appropriate col-* classes.

  10. Create an inline form with Username and Email inputs. Apply is-invalid for Email if empty and display invalid-feedback. Add a submit button at the end.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top