Bootstrap Form Inputs

Form inputs are the backbone of any user interaction on a website. Whether it’s collecting a user’s name, email, or preferences, inputs are crucial to web development. Bootstrap makes it incredibly easy to create beautiful, responsive, and functional form input fields.

In this article from TheCodingCollege.com, we’ll explore the different types of Bootstrap form inputs and how to use them effectively.

Why Use Bootstrap for Form Inputs?

Bootstrap form inputs offer:

  1. Consistent Styling: Ensures uniformity across all devices and browsers.
  2. Responsive Design: Adjusts seamlessly to screen sizes.
  3. Ease of Customization: Predefined classes that can be styled as per your requirements.
  4. Accessibility: Includes features to make inputs usable by everyone.

Basic Bootstrap Input Field

Bootstrap’s .form-control class is used to style input fields. By simply applying this class, your input fields become responsive and look professional.

Example: Basic Text Input

<form>
    <div class="form-group">
        <label for="basic-input">Name:</label>
        <input type="text" class="form-control" id="basic-input" placeholder="Enter your name">
    </div>
</form>

Explanation:

  • .form-group: Wraps the label and input for proper spacing.
  • .form-control: Applies default Bootstrap styling.

Types of Bootstrap Form Inputs

Bootstrap supports a wide variety of input types. Here’s a breakdown:

1. Text Input

<div class="form-group">
    <label for="text-input">Username:</label>
    <input type="text" class="form-control" id="text-input" placeholder="Enter username">
</div>

2. Password Input

<div class="form-group">
    <label for="password-input">Password:</label>
    <input type="password" class="form-control" id="password-input" placeholder="Enter password">
</div>

3. Email Input

<div class="form-group">
    <label for="email-input">Email address:</label>
    <input type="email" class="form-control" id="email-input" placeholder="Enter email">
</div>

4. Number Input

<div class="form-group">
    <label for="number-input">Age:</label>
    <input type="number" class="form-control" id="number-input" placeholder="Enter your age">
</div>

5. File Input

<div class="form-group">
    <label for="file-input">Upload File:</label>
    <input type="file" class="form-control" id="file-input">
</div>

6. Textarea

Use a textarea for multiline input fields.

<div class="form-group">
    <label for="textarea">Comments:</label>
    <textarea class="form-control" id="textarea" rows="5" placeholder="Enter your comments"></textarea>
</div>

Adding Placeholders

Bootstrap allows you to use placeholder text to guide users on what to input.

<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>

Placeholders are particularly useful for inputs without accompanying labels.

Input Sizing

Bootstrap offers classes for adjusting input sizes:

  • .input-lg: Large input.
  • .input-sm: Small input.

Example: Input Sizing

<div class="form-group">
    <input type="text" class="form-control input-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 input-sm" placeholder="Small input">
</div>

Input Groups

Input groups allow you to add icons, buttons, or text inside input fields.

Example: Input with Text Addon

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>

Example: Input with Button Addon

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Go</button>
    </span>
</div>

Checkboxes and Radio Buttons

Bootstrap simplifies the styling of checkboxes and radio buttons.

Example: Checkbox

<div class="checkbox">
    <label><input type="checkbox"> Subscribe to newsletter</label>
</div>

Example: Radio Button

<div class="radio">
    <label><input type="radio" name="optionsRadios"> Option 1</label>
</div>

You can also group checkboxes and radio buttons:

<div class="form-group">
    <label>Options:</label>
    <div class="radio">
        <label><input type="radio" name="optionsRadios"> Option 1</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="optionsRadios"> Option 2</label>
    </div>
</div>

Validation States

Bootstrap supports validation styles to indicate form input success, warning, or error.

Example: Validation States

<div class="form-group has-success">
    <label for="success-input">Success:</label>
    <input type="text" class="form-control" id="success-input">
</div>
<div class="form-group has-warning">
    <label for="warning-input">Warning:</label>
    <input type="text" class="form-control" id="warning-input">
</div>
<div class="form-group has-error">
    <label for="error-input">Error:</label>
    <input type="text" class="form-control" id="error-input">
</div>

Customizing Bootstrap Form Inputs

You can customize Bootstrap input fields to fit your design by adding custom CSS.

Example: Custom Styling

<style>
    .custom-input {
        border: 2px solid #4CAF50;
        border-radius: 5px;
    }
</style>

<input type="text" class="form-control custom-input" placeholder="Custom Styled Input">

Responsive Design with Bootstrap Grid

You can use Bootstrap’s grid system to make inputs responsive and organize them neatly.

Example: Two-Column Form

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="first-name">First Name:</label>
            <input type="text" class="form-control" id="first-name" placeholder="First Name">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="last-name">Last Name:</label>
            <input type="text" class="form-control" id="last-name" placeholder="Last Name">
        </div>
    </div>
</div>

Best Practices for Bootstrap Form Inputs

  1. Keep it Simple: Use placeholders and labels effectively.
  2. Ensure Accessibility: Add aria attributes for better accessibility.
  3. Validate User Input: Use both client-side and server-side validation.
  4. Test on All Devices: Ensure inputs are responsive.

Conclusion

Bootstrap form inputs provide everything you need to create beautiful, responsive, and functional forms. From basic text fields to advanced input groups, Bootstrap has it all. With some customization, you can easily adapt the inputs to match your website’s theme.

Leave a Comment