Bootstrap 4 Forms

Welcome to The Coding College! Forms are essential elements of any website, used for gathering user input and performing interactions. Bootstrap 4 provides a rich toolkit to create beautiful, responsive, and functional forms quickly and easily.

In this guide, we will cover everything you need to know about creating forms using Bootstrap 4, from basic form structures to advanced customization.

Why Use Bootstrap 4 for Forms?

Bootstrap 4 offers:

  • Responsive Design: Automatically adjusts to different screen sizes.
  • Customizable Styles: Easily change colors, layouts, and input types.
  • Built-In Validation: Simplifies the process of adding validation feedback.
  • Predefined Classes: Save time with ready-to-use classes for labels, inputs, buttons, and more.

Basic Form Structure

A simple form can be created using the .form-group and .form-control classes.

Example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap Form</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container mt-5">  
    <h2>Basic Form</h2>  
    <form>  
      <div class="form-group">  
        <label for="email">Email:</label>  
        <input type="email" class="form-control" id="email" placeholder="Enter your email">  
      </div>  
      <div class="form-group">  
        <label for="password">Password:</label>  
        <input type="password" class="form-control" id="password" placeholder="Enter your password">  
      </div>  
      <button type="submit" class="btn btn-primary">Submit</button>  
    </form>  
  </div>  
</body>  
</html>

Explanation:

  • .form-group: Wraps input fields and labels for better spacing.
  • .form-control: Adds default styles to input elements.

Horizontal Forms

Use the .form-row and .col-* classes to create horizontal forms.

Example:

<div class="container mt-5">  
  <h2>Horizontal Form</h2>  
  <form>  
    <div class="form-row">  
      <div class="col-md-6">  
        <label for="firstName">First Name:</label>  
        <input type="text" class="form-control" id="firstName" placeholder="Enter first name">  
      </div>  
      <div class="col-md-6">  
        <label for="lastName">Last Name:</label>  
        <input type="text" class="form-control" id="lastName" placeholder="Enter last name">  
      </div>  
    </div>  
    <button type="submit" class="btn btn-success mt-3">Submit</button>  
  </form>  
</div>

Inline Forms

To create compact forms for small spaces, use the .form-inline class.

Example:

<div class="container mt-5">  
  <h2>Inline Form</h2>  
  <form class="form-inline">  
    <label class="sr-only" for="email">Email:</label>  
    <input type="email" class="form-control mb-2 mr-sm-2" id="email" placeholder="Enter email">  

    <label class="sr-only" for="password">Password:</label>  
    <input type="password" class="form-control mb-2 mr-sm-2" id="password" placeholder="Enter password">  

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

Form Validation

Bootstrap 4 provides built-in classes for form validation.

Example:

<div class="container mt-5">  
  <h2>Form Validation</h2>  
  <form>  
    <div class="form-group">  
      <label for="username">Username:</label>  
      <input type="text" class="form-control is-valid" id="username" placeholder="Valid input">  
      <small class="form-text text-success">Looks good!</small>  
    </div>  
    <div class="form-group">  
      <label for="email">Email:</label>  
      <input type="email" class="form-control is-invalid" id="email" placeholder="Invalid input">  
      <small class="form-text text-danger">Please enter a valid email address.</small>  
    </div>  
    <button type="submit" class="btn btn-warning">Submit</button>  
  </form>  
</div>

Explanation:

  • .is-valid: Styles the input as valid.
  • .is-invalid: Styles the input as invalid.

Custom Form Controls

Bootstrap 4 allows for custom checkboxes, radio buttons, and file inputs.

Example:

<div class="container mt-5">  
  <h2>Custom Form Controls</h2>  
  <form>  
    <div class="custom-control custom-checkbox">  
      <input type="checkbox" class="custom-control-input" id="customCheck1">  
      <label class="custom-control-label" for="customCheck1">Check me out</label>  
    </div>  
    <div class="custom-control custom-radio">  
      <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio">  
      <label class="custom-control-label" for="customRadio1">Radio Option 1</label>  
    </div>  
    <div class="custom-control custom-radio">  
      <input type="radio" class="custom-control-input" id="customRadio2" name="customRadio">  
      <label class="custom-control-label" for="customRadio2">Radio Option 2</label>  
    </div>  
    <div class="custom-file mt-3">  
      <input type="file" class="custom-file-input" id="customFile">  
      <label class="custom-file-label" for="customFile">Choose file</label>  
    </div>  
    <button type="submit" class="btn btn-info mt-3">Submit</button>  
  </form>  
</div>

Forms with Input Groups

Use the .input-group class to combine inputs and buttons.

Example:

<div class="container mt-5">  
  <h2>Input Groups</h2>  
  <form>  
    <div class="input-group mb-3">  
      <div class="input-group-prepend">  
        <span class="input-group-text">@</span>  
      </div>  
      <input type="text" class="form-control" placeholder="Username">  
    </div>  

    <div class="input-group mb-3">  
      <input type="text" class="form-control" placeholder="Recipient's username">  
      <div class="input-group-append">  
        <span class="input-group-text">@example.com</span>  
      </div>  
    </div>  
  </form>  
</div>

Conclusion

With Bootstrap 4, creating attractive and user-friendly forms has never been easier. From basic forms to advanced customizations, you can quickly build responsive layouts to meet your website’s needs.

Leave a Comment