Bootstrap Form Inputs (more)

In the previous article on Bootstrap Form Inputs at TheCodingCollege.com, we covered the basics like text inputs, password fields, and file uploads. This guide expands on advanced features, customization, and best practices to make your forms more interactive and user-friendly.

Advanced Input Examples

Bootstrap’s rich input field capabilities let you build intuitive and elegant forms for complex scenarios. Let’s look at some advanced use cases.

Custom File Upload Input

Bootstrap makes file uploads easy to style and responsive. However, you can enhance it further by customizing the default file input.

Example: Custom File Upload

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

For a more stylish approach, use custom styling:

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

Note: Use JavaScript to dynamically display the selected file name.

Inline Forms for Compact Layouts

Sometimes, you might need a compact layout where form elements are placed inline.

Example: Inline Form

<form class="form-inline">
    <div class="form-group mx-sm-3">
        <label for="inlineFormInputName2" class="sr-only">Name</label>
        <input type="text" class="form-control" id="inlineFormInputName2" placeholder="Name">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Key Points:

  • .form-inline: Styles the form to display inline.
  • Use spacing classes like mx-sm-3 to add proper spacing between elements.

Pre-Filled Inputs

To guide users, you can pre-fill input fields with default values.

Example: Pre-Filled Input

<div class="form-group">
    <label for="prefilledInput">Your Name:</label>
    <input type="text" class="form-control" id="prefilledInput" value="John Doe">
</div>

Input Alignment

Bootstrap makes it easy to align input fields horizontally. You can use grid classes to align labels and inputs in a structured way.

Example: Horizontal Form

<form class="form-horizontal">
    <div class="form-group row">
        <label for="horizontalEmail" class="col-sm-2 col-form-label">Email:</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="horizontalEmail" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="horizontalPassword" class="col-sm-2 col-form-label">Password:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="horizontalPassword" placeholder="Password">
        </div>
    </div>
</form>

Bootstrap Input Validation

Input validation ensures that users provide the correct data. Bootstrap supports three states:

  • Success (has-success)
  • Warning (has-warning)
  • Error (has-error)

Example: Validation States

<div class="form-group has-success">
    <label for="successInput">Valid Input:</label>
    <input type="text" class="form-control" id="successInput">
    <span class="help-block">Looks good!</span>
</div>

<div class="form-group has-warning">
    <label for="warningInput">Warning Input:</label>
    <input type="text" class="form-control" id="warningInput">
    <span class="help-block">Something might be wrong.</span>
</div>

<div class="form-group has-error">
    <label for="errorInput">Error Input:</label>
    <input type="text" class="form-control" id="errorInput">
    <span class="help-block">Please check your input.</span>
</div>

Bootstrap Custom Checkboxes and Radios

Bootstrap allows you to style checkboxes and radio buttons.

Example: Custom Checkbox

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Example: Custom Radio Button

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio">
    <label class="custom-control-label" for="customRadio1">Custom Radio 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">Custom Radio 2</label>
</div>

Bootstrap Floating Labels

Floating labels are an elegant way to display input fields. They float above the input when users begin typing.

Example: Floating Labels

<div class="form-group">
    <input type="text" class="form-control" id="floatingInput" placeholder=" ">
    <label for="floatingInput">Name</label>
</div>

Bootstrap Input Masks

Input masks restrict the user’s input format. While Bootstrap doesn’t have built-in support for input masks, you can use JavaScript libraries like Inputmask or jQuery Mask Plugin to implement them.

Example: Input Mask for Phone Number

<input type="text" class="form-control" id="phoneInput" placeholder="(XXX) XXX-XXXX">
<script>
    // Example with Inputmask library
    Inputmask("(999) 999-9999").mask("#phoneInput");
</script>

Input Groups with Icons

Icons can be added to input fields for visual clarity.

Example: Input with Icon

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="fas fa-user"></i></span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
</div>

Bootstrap Inline Checkbox and Radio

Checkboxes and radio buttons can also be displayed inline for a cleaner layout.

Example: Inline Checkbox

<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">Option 1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">Option 2</label>
</div>

Best Practices for Bootstrap Form Inputs

  1. Mobile Optimization: Test on multiple screen sizes.
  2. User Guidance: Use placeholders, help texts, and floating labels effectively.
  3. Validation: Combine Bootstrap classes with JavaScript to provide real-time feedback.
  4. Accessibility: Ensure all fields have labels and use ARIA attributes where applicable.

Conclusion

Bootstrap’s form inputs go beyond basic fields, offering rich functionality and advanced customizations. Whether it’s creating inline forms, custom file uploads, or validation states, Bootstrap equips developers to create intuitive, responsive, and stylish forms.

Leave a Comment