Bootstrap Forms

Forms are one of the most important elements in web development, whether it’s for login, registration, contact, or data submission. With Bootstrap Forms, you can build clean, responsive, and user-friendly forms effortlessly.

At TheCodingCollege.com, we’re here to make coding simple for you. In this tutorial, we’ll walk you through the basics and advanced features of Bootstrap Forms.

Why Use Bootstrap for Forms?

Bootstrap Forms provide:

  • Responsive Design: Automatically adapt to various screen sizes.
  • Built-in Validation: Easy to implement validation states.
  • Predefined Styles: Out-of-the-box components like inputs, buttons, and labels.
  • Customizability: Fully customizable to match your website’s design.

Basic Bootstrap Form Structure

The basic structure of a Bootstrap form includes the use of the .form-group class to group form elements and the .form-control class to style inputs.

Example: A Simple Bootstrap Form

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Key Classes:

  • .form-group: Groups label and input elements.
  • .form-control: Applies consistent styling to input fields.
  • .btn and .btn-primary: Styles the submit button.

Horizontal Forms

A horizontal form displays labels and inputs side-by-side, ideal for wider screens.

Example: Horizontal Form

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Explanation:

  • form-horizontal: Applies horizontal form styling.
  • col-sm-2 and col-sm-10: Defines the label and input column widths.
  • col-sm-offset-2: Adds spacing to align the button correctly.

Inline Forms

Inline forms display all elements in a single row, useful for quick search bars or login forms.

Example: Inline Form

<form class="form-inline">
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

Key Features:

  • form-inline: Arranges form elements inline.
  • Compact Design: Perfect for small forms like login or search bars.

Adding Validation States

Bootstrap allows you to add visual feedback to forms based on validation. Simply use classes like .has-success, .has-warning, or .has-error.

Example: Form Validation

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

Bootstrap Form Controls

Bootstrap offers a variety of input types to enhance your forms.

Text Input Example:

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

Checkboxes and Radios:

<div class="checkbox">
    <label><input type="checkbox" value=""> Remember me</label>
</div>
<div class="radio">
    <label><input type="radio" name="optradio"> Option 1</label>
</div>

Select Dropdown:

<div class="form-group">
    <label for="sel1">Select list:</label>
    <select class="form-control" id="sel1">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

Textarea:

<div class="form-group">
    <label for="comment">Comment:</label>
    <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Advanced Bootstrap Form Features

Form with Icons:

Bootstrap allows you to include icons inside input fields using Glyphicons or custom icons.

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

Input Groups:

Input groups combine multiple form elements into one.

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

Customizing Bootstrap Forms

To match your website’s style, you can override Bootstrap’s default form styles with CSS.

Example: Custom Button Styling

<style>
    .btn-custom {
        background-color: #4CAF50;
        color: white;
    }
</style>
<button class="btn btn-custom">Custom Button</button>

Responsive Forms with Bootstrap Grid

You can use Bootstrap’s grid system to create complex layouts.

Example: Two-Column Form

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

Best Practices for Bootstrap Forms

  1. Keep Forms Simple: Avoid overwhelming users with too many fields.
  2. Ensure Accessibility: Use proper aria attributes and labels.
  3. Test Responsiveness: Verify form behavior on different devices.
  4. Validate Inputs: Use client-side and server-side validation for better data accuracy.

Conclusion

Bootstrap Forms make it easy to create beautiful, responsive, and functional forms for any type of website. By combining Bootstrap’s predefined classes with custom styling, you can design forms tailored to your specific needs.

Leave a Comment