Types of Bootstrap Forms

Bootstrap has templates for many basic website components, such as forms. You can use these templates as a springboard into creating a custom form. Bootstrap also supplies preformatted form elements that you can easily swap in or out of your form. We’ll go over the basics here. To see all of the available form templates and elements, see the Forms section of the Bootstrap CSS page.

Types of Forms

There are several types of forms: basic, inline, and horizontal. Each is styled differently. As you would expect, inline forms are styled with the form components, referred to as “controls,” aligned vertically. For horizontal forms, the controls are styled to align horizontally. The basic form simply pulls from the global style.

Basic Form

To create a basic form, you just need to create a form as you would in HTML, with the <form> element, then add some Bootstrap controls within the <form> tags. The other two form types use classes to differentiate them. However, if no class is specified, the form defaults to a basic form.

Basic Form Example image

<form> 
<!-- Note that there is no class in the <form> element, 
making it a basic form -->
  <div class="form-group">
    <label for="Username">Username</label>
    <input type="username" class="form-control" id="Username" placeholder="Username">
  </div>

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

<div class="form-group">
    <label for=“commentBox”>Comments</label>
    <textarea placeholder="Enter Your Comment Here" class="form-control" rows="3"></textarea>
</div>

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

Inline Form

To make an inline form, you need to add a class=”form-inline” to the <form> element. This will automatically style the controls within the form vertically.

Inline form example image

<form class="form-inline”> 
<!-- Note that there is a form-inline class in the <form> element, 
making it an inline form -->
  <div class="form-group">
    <label for="Username">Username</label>
    <input type="username" class="form-control" id="Username" placeholder="Username">
  </div>

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

<div class="form-group">
    <label for=“commentBox”>Comments</label>
    <textarea placeholder="Enter Your Comment Here" class="form-control" rows="3"></textarea>
</div>

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

Horizontal Form

Like the inline form, the horizontal form is called by adding class=”form-horizontal” to the <form> element. This will automatically style the controls within the form horizontally.

Horizontal Styling example image

<form class=”form-horizontal”> 
<!-- Note that there is an form-inline class in the <form> element, 
making it an inline form -->

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

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

<div class="form-group">
    <label for=“commentBox”>Comments</label>
    <textarea placeholder="Enter Your Comment Here" class="form-control" rows="3"></textarea>
</div>

  <button type="submit" class="btn btn-default">Submit</button>
</form>
Updated on April 27, 2018

Was this article helpful?

Related Articles