From surveys to shipping forms to registration forms and quizzes, web forms are everywhere on the internet. They come in handy for countless reasons. You can use web forms to convert visitors into potential leads and keep track of existing customer’s personal information, purchases, feedback, and survey responses.

How you add this interactive element to your website depends on how you build your site. If you were creating a website on WordPress, for example, then you could install a plugin — like the HubSpot WordPress plugin — to add forms to your site.  If you were creating a website with Bootstrap CSS, on the other hand, then you could use CSS classes to quickly add forms on your site.

We’ll cover this process in detail in this post. Then, we'll walk through common styles and examples of Bootstrap forms. Let’s get started.

Download Now: Free Intro Guide to HTML & CSS

Bootstrap Form CSS

Thanks to the predesigned templates included in Bootstrap, creating forms for your site is easy. 

You’ll just need to add the necessary code into the body section of your index.html file. Say, for example, you want to add a form to capture a customer’s account information so they can log into your site faster and easier next time. It might look something like this:

bootstrap basic form example

Image Source

Here’s the code you’d use:

 

 

    <form>

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword1">

  </div>

  <div class="form-group form-check">

    <input type="checkbox" class="form-check-input" id="exampleCheck1">

    <label class="form-check-label" for="exampleCheck1">Remember me</label>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

Notice that you have the opening and closing tags for a <form> element. And, within those tags, you have a variety of HTML elements, including dividers, labels, inputs, and buttons, that all together make up the form. For these to work, they need to be styled with the correct form classes in Bootstrap.

We can see a few of these in action in the three containers of the snippet above. Let’s break down the elements and styling used in each.

See the first two <input> elements? These are styled with the .form-control class so that they span the entire width of the page and are responsive. On the front-end, these are where the user will enter in their email address and password.

These <input> elements are preceded by <label> elements so the user knows what information to enter in and to which box. Together, each <label> and <input> pair are wrapped in their own container, or <div> element, which is styled with the .form-group class.

The third container is styled with .form-group class as well as the .form-check class because it contains a checkbox. To create this checkbox, the <input> element is styled with the .form-check-input class (instead of the .form-control class applied to the other <input> elements). Lastly, the <label> element comes after the <input> element and is styled with the .form.check.label class.

Finally, there’s a button element included. This requires styling with the button class rather than a form class.

Now that we understand how to build a basic form in Bootstrap, let’s look at how else you can modify and extend the form class. We'll start with a basic overview of the different styles Bootstrap offers, then walk through examples.

Bootstrap Form Styles

You can use any of the predefined form styles, as shown in Bootstrap’s documentation, to quickly add forms on your site. Let's take a brief look at the most common styles below.

Bootstrap Select Form

The Bootstrap select form includes a drop down menu with a range of options. Users can select one of these options. It requires the .form-control class.

Bootstrap Select form include a dropdown menu

Bootstrap Text Area Form

The Bootstrap text area form includes a text area where users can input comments or reviews. A text area can contain an unlimited number of characters — unless a limit is set. It requires the .form-control class.

Bootstrap attachment form style allows users to upload a file

Bootstrap Attachment Form

The Bootstrap attachment or file input form allows users to choose and upload a file. It requires the .form-control-file class.

Bootstrap text area form style allows users to input comments

Bootstrap Grid Form 

The Bootstrap grid form is any form that has multiple columns, varied widths, and other alignment options. It requires the .row and .col classes.

Bootstrap grid form style has multiple columns for user to input first and last name in different input controls in same row

Bootstrap Address Form

The Bootstrap address form is an example of a complex form built using Bootstrap grid classes. The .row class is used to form groups and the .col-*-* classes used to specify the width of the labels and controls so that the city, state, and zip are all on a single horizontal row.

Bootstrap Address form uses grid classes to display Address and Address 2 labels on different rows and city, state, and zip on single horizontal row

Bootstrap Horizontal Form

The Bootstrap horizontal form displays labels and their associated form controls on the same horizontal rows. Like the address form style, it requires the .row class and  .col-*-* classes. The .col-form-label class is also used to ensure the labels are vertically centered with their associated form controls.

Bootstrap Horizontal Form style displays labels and their associated form controls on the same horizontal rows

Bootstrap Inline Form

The Bootstrap inline form displays a series of labels, form controls, and buttons on a single horizontal row. It requires the .form-inline class.

Bootstrap inline form displaying name and username labels, checkbox, and submit button on a single horizontal row

Bootstrap Form Validation

The Bootstrap validation form provides valuable, actionable feedback to users, typically after they try to submit a form. This form style typically uses custom colors, borders, focus styles, and background icons to communicate feedback. It requires the .{valid|invalid}-feedback classes.

Bootstrap form validation style telling user to select a valid state and agree to terms and conditions before submitting the form

Bootstrap Range Input Form

The Bootstrap range input form allows users to horizontally scroll range inputs. It requires the .form-control-range class.

Bootstrap range input form style allows users to horizontally scroll a range input

Bootstrap Checkbox Form

The Bootstrap checkbox form allows users to select one or several options in a list. It requires the .form-check class as well as the input type attribute be set to “checkbox.”

Bootstrap Checkbox Form style allows users to select one or multiple options in a list

Bootstrap Radio Form

The Bootstrap radio button form allows users to select only one option in a list. It requires the .form-check class as well as the input type attribute be set to “radio.”

Bootstrap Radio Form style allows users to select only one option from mutliple

Bootstrap Form CSS Examples

Below are some examples that demonstrate the range of Bootstrap’s form styles. Each example will show the different required classes, form layouts, and more.

I’ll be using the CodePen Editor to create the examples so you can click any of the Source links to view the full code snippet behind the example.

1. Bootstrap Select Example

Let’s say you want to add a dropdown menu in your existing form. Then you’d add the following in your HTML, right before the <div> containing the checkbox.

 

 

    <div class="form-group">

    <label for="exampleFormControlSelect1">How did you hear about us?</label>

    <select class="form-control" id="exampleFormControlSelect1">

      <option>Select one</option>

      <option>Ad</option>

      <option>Friend</option>

      <option>Flyer</option>

      <option>TV</option>

      <option>Blog</option>

    </select>

  </div>

 

Here’s the result:

bootstrap form with select example

Image Source

You can learn more about creating dropdown menus in forms, navigation menus, and other parts of your site in How to Create an HTML Dropdown Menu [+ Examples].

2. Bootstrap Text Area Example

Let’s say you want to ask the user the same question, “How did you hear about us?” But rather than offer a limited selection of answers, you want to include a text area so they can write whatever they want. Then you’d add the following in your HTML, right before the <div> containing the checkbox.

 

 

     <div class="form-group">

    <label for="exampleFormControlTextarea1">How did you hear about us?</label>

    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

  </div>

 

Here’s the result:

bootstrap form with text area example

Image Source

3. Bootstrap Attachment Example

If you’d like to let users upload a file before submitting a form, then you can use an <input> element and style it with the .form-control-file class. You’ll pair it with a <label> element and wrap it in a <div> styled with the .form-group class as usual. Here’s the code you’d add right before the button.

 

 

     <div class="form-group">

    <label for="exampleFormControlFile1">Upload Resume and Cover Letter</label>

    <input type="file" class="form-control-file" id="exampleFormControlFile1">

  </div>

 

Here’s the result:

bootstrap form with attachment example

Image Source

4. Bootstrap Grid Form Example

To build more complex forms, you can use Bootstrap’s grid classes. For example, say you want the input fields for email address and password to be side-by-side and the rest of the elements to be stacked vertically. You also want to remove the labels above the input fields and instead have that text inside the fields.

Then you can replace the first two <div> containers with three divs. The first will be style with the .row class. It will contain two divs, each of which is styled with the .col class and has a placeholder attribute. 

 

 

    <div class="row">

    <div class="col">

      <input type="text" class="form-control" placeholder="Email address">

    </div>

    <div class="col">

      <input type="text" class="form-control" placeholder="Password">

    </div>

    </div>

 

Here’s the result:

Bootstrap grid form example

Image Source

Please note: I added some margin settings in the CSS to make the layout look better. You can see that code by clicking on the source link.

5. Bootstrap Address Form Example

You can create an even more complex layout with the Bootstrap’s grid classes than the layout above. For example, say you want the input fields for email address and password to be side-by-side. Then you want two address fields stacked vertically and the city, state, and zip fields on the same row. 

Since Bootstrap is a 12-column system, you’ll have to specify the number of twelve available columns you want each input to span. So to put the email and password inputs in two equal-width columns, you'd use the .col-md-6 class. The next two divs — for address and address 2 — won't need a .col class because they each take up a horizontal row. For the final row, you want the city input to be the same size as the email and password inputs. You want the state input to be two-thirds that size and the zip to be half that. So you'd use the .col-md-6 for city, .col-md-4 for state, and .col-md-2 for zip (6 + 4 + 2 = 12). 

Then you’d add the following in your HTML, right before the <div> containing the checkbox.

 

 

   <div class="form-row">

    <div class="form-group col-md-6">

      <label for="inputEmail4">Email</label>

      <input type="email" class="form-control" id="inputEmail4">

    </div>

    <div class="form-group col-md-6">

      <label for="inputPassword4">Password</label>

      <input type="password" class="form-control" id="inputPassword4">

    </div>

  </div>

  <div class="form-group">

    <label for="inputAddress">Address</label>

    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">

  </div>

  <div class="form-group">

    <label for="inputAddress2">Address 2</label>

    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">

  </div>

  <div class="form-row">

    <div class="form-group col-md-6">

      <label for="inputCity">City</label>

      <input type="text" class="form-control" id="inputCity">

    </div>

    <div class="form-group col-md-4">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected>Choose...</option>

        <option>...</option>

      </select>

    </div>

    <div class="form-group col-md-2">

      <label for="inputZip">Zip</label>

      <input type="text" class="form-control" id="inputZip">

    </div>

  </div>

 

Here's the result:

Bootstrap Address Form example uses Bootstraps grid classes to place city, state, and zip on the same horizontal row-1

Image Source

6. Bootstrap Horizontal Form Example

You can also display labels and their associated form controls on the same horizontal rows, instead of stacked on top of each other.

To do so, you'd apply the .form-group row classes to the parent divs. Then you'd apply the .col-sm-2 classes to the label elements and the .col-sm-10 classes to the div elements containing input elements and the button element. You'd also apply the .col-form-label classes to the label elements to ensure they're vertically centered with their associated form controls.

Here's the code all together:

 

 

<form>

  <div class="form-group row">

    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3">

    </div>

  </div>

  <div class="form-group row">

    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3">

    </div>

  </div>

  <fieldset class="form-group row">

    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>

    <div class="col-sm-10">

      <div class="form-check">

        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>

        <label class="form-check-label" for="gridRadios1">

          First radio

        </label>

      </div>

      <div class="form-check">

        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">

        <label class="form-check-label" for="gridRadios2">

          Second radio

        </label>

      </div>

      <div class="form-check disabled">

        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>

        <label class="form-check-label" for="gridRadios3">

          Third disabled radio

        </label>

      </div>

    </div>

  </fieldset>

  <div class="form-group row">

    <div class="col-sm-10 offset-sm-2">

      <div class="form-check">

        <input class="form-check-input" type="checkbox" id="gridCheck1">

        <label class="form-check-label" for="gridCheck1">

          Example checkbox

        </label>

      </div>

    </div>

  </div>

  <div class="form-group row">

    <div class="col-sm-10">

      <button type="submit" class="btn btn-primary">Sign in</button>

    </div>

  </div>

</form>

 

Here's the result:

Bootstrap horizontal form example displays labels and associated form controls in same horizontal row

Image Source

7. Bootstrap Inline Form Example

If you’re looking to take up less space, then you might want to create an inline form in which all of the elements are on one line. You can do this by adding the .form-inline class to the <form> element and some size-specific column classes.

You’ll see mb-2 was added throughout the code, for example, which sets the margin-bottom of those elements to .5rem in Bootstrap. Similarly, mr-sm-2 sets the margin-right of those elements to .5rem and the breakpoint to small.

Let’s use the example from above and turn it into an inline form. Here’s the code:

 

 

    <form class="form-inline">

  <label class="sr-only" for="inlineFormInputName2">Name</label>

  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputEmail" placeholder="Email Address">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Email Address</label>

  <div class="input-group mb-2 mr-sm-2">

    <input type="text" class="form-control" id="inlineFormInputPassword" placeholder="Password">

  </div>

  <div class="form-check mb-2 mr-sm-2">

    <input class="form-check-input" type="checkbox" id="inlineFormCheck">

    <label class="form-check-label" for="inlineFormCheck">

      Remember me

    </label>

  </div>

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

</form>



Here’s the result:

Bootstrap inline form example

Image Source

Note: If the device or viewport you’re using is less than 576 pixels wide, then the elements will stack on top of each other. If I reduce my screen to 400px, for example, the form will look like this:

Boostrap inline form on mobile device will revert back to vertical stack (default)

8. Bootstrap Form Validation Example

Let’s say you want to include actionable feedback to users filling out your forms, like a reminder to check the “Remember me” box if they forgot before submitting. You can do so by applying validation classes to the Bootstrap <form> element.

For example, the .was-validated class will let users know what fields must be filled out or checked off before submitting, whereas the .needs-validation class will only let users know if fields are missing after they try to submit.

Whichever class you use, input fields that have been filled out will have a green border, while input fields that haven’t been filled out will have a red border. If you’d like to tell users exactly what information is missing (and what info has been successfully provided), then you can even add .valid-feedback and .invalid-feedback messages.

In the example below, let’s use the .needs-validation class so that the user will know if anything is missing.

Here’s the HTML you’ll need to add in the <body> of your HTML.

 

 

    <form action="/action_page.php" class="needs-validation" novalidate>

    <div class="form-group">

      <label for="email">Email Address</label>

      <input type="text" class="form-control" id="uname" placeholder="Enter email address" name="uname" required>

      <div class="valid-feedback">Thanks for entering a valid email address.</div>

      <div class="invalid-feedback">Please enter your email address.</div>

    </div>

    <div class="form-group">

      <label for="pwd">Password</label>

      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>

      <div class="valid-feedback">Thanks for entering a valid password.</div>

      <div class="invalid-feedback">Please enter your password.</div>

    </div>

    <div class="form-group form-check">

      <label class="form-check-label">

        <input class="form-check-input" type="checkbox" name="remember" required> Remember me

        <div class="invalid-feedback">Please check this box to continue.</div>

      </label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

  </form>

 

And here's the starter JavaScript you’ll need to add below that in the <body> of your HTML.

 

 

   <script>

// Disable form submissions if there are invalid fields

(function() {

  'use strict';

  window.addEventListener('load', function() {

    // Get the forms we want to add validation styles to

    var forms = document.getElementsByClassName('needs-validation');

    // Loop over them and prevent submission

    var validation = Array.prototype.filter.call(forms, function(form) {

      form.addEventListener('submit', function(event) {

        if (form.checkValidity() === false) {

          event.preventDefault();

          event.stopPropagation();

        }

        form.classList.add('was-validated');

      }, false);

    });

  }, false);

})();

</script>

 

Here’s the result:

Bootstrap CSS form validation exampleImage Source

9. Bootstrap Help Text Form Example

Another way to provide actionable feedback to users filling out your forms is to include help text.  For example, you might explicitly state password requirements below the password input field, or next to it. You can do so by applying .form-text classes to a block-level element or .form-text and .text-muted classes to an inline element, like <small>.

Make sure to include an aria-describedby attribute so that assistive technologies, like screen readers, can understand and read the help text to users.

Here's the code you'd add after the email address input and before the checkbox:

 

<div class=”form-group”>

<label for="inputPassword5">Password</label>

<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">

<small id="passwordHelpBlock" class="form-text text-muted">

  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

</small>

</div>

Here's the result:

Bootstrap Help Text Example form provides instructions for filling out password correctly

Image Source

10. Bootstrap Disabled Form Example

Let’s say you want to disable an option or section of your form to make it unclickable and unusable. You can add the disabled boolean attribute on an individual input to prevent user interactions and make it appear lighter, or you can add it to a <fieldset> element to specify that the group of related form elements is disabled.

Here's the code for a disabled fieldset:

 

<fieldset disabled>

    <legend>Disabled fieldset example</legend>

    <div class="form-group">

      <label for="disabledTextInput">Disabled input</label>

      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">

    </div>

    <div class="form-group">

      <label for="disabledSelect">Disabled select menu</label>

      <select id="disabledSelect" class="form-control">

        <option>Disabled select</option>

      </select>

    </div>

    <div class="form-group">

      <div class="form-check">

        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>

        <label class="form-check-label" for="disabledFieldsetCheck">

          Can't check this

        </label>

      </div>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

  </fieldset>

Here's the result:

Bootstrap form example with disabled fieldset so user cant complete and submit form

Image Source

11. Bootstrap Checkbox and Radio Form Example

You can achieve more user interaction in your forms by adding interactive elements like checkboxes and radio buttons. Let’s say you want to provide users with a simple yes-or-no option like “remember me.” Then you could include a checkbox. Users can choose one or no option. Radio buttons, on the other hand, let users select exactly one option per group.

Both checkboxes and radio buttons require the .form-check class. They must also have their input type attribute set to “checkbox” and “radio,” respectively. 

The code below will create three radio buttons in a horizontal layout and a checkbox element. 

 

 

<fieldset class="form-group row">

    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>

    <div class="col-sm-10">

      <div class="form-check">

        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>

        <label class="form-check-label" for="gridRadios1">

          First radio

        </label>

      </div>

      <div class="form-check">

        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">

        <label class="form-check-label" for="gridRadios2">

          Second radio

        </label>

      </div>

      <div class="form-check disabled">

        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">

        <label class="form-check-label" for="gridRadios3">

          Third radio

        </label>

      </div>

    </div>

  </fieldset>

  <div class="form-group">

    <div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" id="gridCheck1">

        <label class="form-check-label" for="gridCheck1">

         Remember me 

        </label>

      </div>

    </div>

  </div>

 

Here's the result:

Bootstrap Checkbox and Radio Form Example displays three radio buttons in a horizontal layout and a remember me checkbox

Image Source

Adding Forms to Your Bootstrap Site

Web forms are an important design element for your website. They can enable you to generate newsletter signups, accept orders online, and keep track of both customers’ and potential customers’ information.

If you’re using Bootstrap, then you can use the templates above to create different forms with less code and in less time. You just need to be familiar with HTML and CSS. 

Editor's note: This post was originally published in June 2020 and has been updated for comprehensiveness.

New Call-to-action

 css introduction

Originally published Jun 9, 2021 7:00:00 AM, updated June 09 2021

Topics:

Bootstrap & CSS