Bootstrap 4 Form Inputs

Welcome to The Coding College! Bootstrap 4 simplifies the creation of form inputs, providing a variety of built-in styles, sizes, and functionalities to enhance user interaction and design consistency. Whether you’re building simple forms or complex user input interfaces, Bootstrap 4 has you covered.

In this guide, we will explore all the available form input types, styling options, and advanced features.

Why Use Bootstrap 4 for Form Inputs?

Bootstrap 4 form inputs are:

  • Responsive: Automatically adapt to various screen sizes.
  • Customizable: Support styling and layout tweaks with predefined classes.
  • Accessible: Provide ARIA support and enhanced usability.

Basic Input Types

Bootstrap 4 uses the .form-control class to style input elements like text, email, password, and more.

Example: Basic Form Inputs

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap Form Inputs</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 Inputs</h2>  
    <form>  
      <div class="form-group">  
        <label for="textInput">Text Input:</label>  
        <input type="text" class="form-control" id="textInput" placeholder="Enter text">  
      </div>  
      <div class="form-group">  
        <label for="emailInput">Email Input:</label>  
        <input type="email" class="form-control" id="emailInput" placeholder="Enter email">  
      </div>  
      <div class="form-group">  
        <label for="passwordInput">Password Input:</label>  
        <input type="password" class="form-control" id="passwordInput" placeholder="Enter password">  
      </div>  
      <button type="submit" class="btn btn-primary">Submit</button>  
    </form>  
  </div>  
</body>  
</html>

Input Sizing

Bootstrap 4 lets you easily control the size of your form inputs using classes like .form-control-sm and .form-control-lg.

Example: Input Sizes

<div class="container mt-5">  
  <h2>Input Sizes</h2>  
  <form>  
    <div class="form-group">  
      <input type="text" class="form-control form-control-lg" placeholder="Large Input">  
    </div>  
    <div class="form-group">  
      <input type="text" class="form-control" placeholder="Default Input">  
    </div>  
    <div class="form-group">  
      <input type="text" class="form-control form-control-sm" placeholder="Small Input">  
    </div>  
  </form>  
</div>

Input Validation

Bootstrap 4 includes classes like .is-valid and .is-invalid for visual feedback on input validity.

Example: Input Validation

<div class="container mt-5">  
  <h2>Form Validation</h2>  
  <form>  
    <div class="form-group">  
      <input type="text" class="form-control is-valid" placeholder="Valid Input">  
      <small class="form-text text-success">Looks good!</small>  
    </div>  
    <div class="form-group">  
      <input type="text" class="form-control is-invalid" placeholder="Invalid Input">  
      <small class="form-text text-danger">Please correct this input.</small>  
    </div>  
  </form>  
</div>

Input Groups

Use .input-group classes to add text, buttons, or icons to your inputs.

Example: Input Groups

<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>  

    <div class="input-group">  
      <div class="input-group-prepend">  
        <span class="input-group-text">$</span>  
      </div>  
      <input type="text" class="form-control" placeholder="Amount">  
      <div class="input-group-append">  
        <span class="input-group-text">.00</span>  
      </div>  
    </div>  
  </form>  
</div>

Disabled and Read-Only Inputs

Bootstrap 4 allows you to style disabled or read-only inputs with ease.

Example: Disabled and Read-Only

<div class="container mt-5">  
  <h2>Disabled and Read-Only Inputs</h2>  
  <form>  
    <div class="form-group">  
      <input type="text" class="form-control" placeholder="Disabled Input" disabled>  
    </div>  
    <div class="form-group">  
      <input type="text" class="form-control" placeholder="Read-Only Input" readonly>  
    </div>  
  </form>  
</div>

Advanced Input Types

Bootstrap 4 supports advanced input types like date, range, file, and more.

Example: Advanced Inputs

<div class="container mt-5">  
  <h2>Advanced Input Types</h2>  
  <form>  
    <div class="form-group">  
      <label for="dateInput">Date:</label>  
      <input type="date" class="form-control" id="dateInput">  
    </div>  
    <div class="form-group">  
      <label for="rangeInput">Range:</label>  
      <input type="range" class="form-control" id="rangeInput">  
    </div>  
    <div class="form-group">  
      <label for="fileInput">File:</label>  
      <input type="file" class="form-control-file" id="fileInput">  
    </div>  
  </form>  
</div>

Conclusion

Bootstrap 4 form inputs provide an easy way to create user-friendly and professional forms. By leveraging predefined classes, input groups, and advanced features, you can quickly build forms tailored to your needs.

Leave a Comment