Code has been added to clipboard!

Collect Data Using a Stacked or Inline Bootstrap Form

Reading time 2 min
Published Nov 14, 2017
Updated Oct 2, 2019

Recently, we have been talking about how to work with huge amounts of data. We learned pagination, collapsibles and other navigation methods you could use in your website. Today we are going to speak about another side of things: collecting data.

Using Bootstrap 4, you can easily create HTML forms that come in handy when you need to allow your users to input data. In this lesson, we will introduce you to two types of Bootstrap form layouts and teach how to use them. Learning to add Bootstrap forms to your website will make connecting to your users a breeze.

Bootstrap Form: Main Tips

  • Using Bootstrap 4, you can create HTML forms.
  • HTML forms are used to collect user input data.

Bootstrap 4 adds certain changes to the default styling of forms: each text-based input field with .form-control class has its width set to 100%. What is more, Bootstrap 4 lets you use two types of form layouts:

  • Inline
  • Stacked (full-width)

In this tutorial, we will go through examples of both Bootstrap form types.

Stacked Forms

The stacked layout type is the default type for Bootstrap forms and does not need any classes to be applied to the <form> element. Take a look at how such form could look in HTML:

Example
<form>
  <label for="username">Username:</label>
  <input type="username" id="username" class="form-control">
  <label for="pass">Password:</label>
  <input type="password" id="pass" class="form-control">
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input"> Stay logged in
    </label>
  </div>
  <button type="submit" class="btn btn-success">Log in</button>
</form>

Inline Forms

Inline forms are created by applying the .form-inline class to the <form> element. In HTML, a Bootstrap inline form would look like this:

Example
<form class="form-inline">
  <label for="username">Username:</label>
  <input type="username" id="username" class="form-control">
  <label for="pass">Password:</label>
  <input type="password" id="pass" class="form-control">
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input"> Stay logged in
    </label>
  </div>
  <button type="submit" class="btn btn-success">Log in</button>
</form>

Note: this class only works when the screen is wider that 576px. If it's smaller, the input fields will be displayed in a stacked layout anyway.

With Utilities

In the code example we have below, a Bootstrap inline form has been created with spacing utilities. Review different attributes applied to .form-control and try changing them using a code editor. Play around a little to see what results can be achieved:

Example
<form class="form-inline" action="/action_page.php">
  <label for="Name" class="mr-sm-2">Name:</label>
  <input type="name" class="form-control mb-2 mr-sm-2" id="name">
  <label for="Surname" class="mr-sm-2">Surname:</label>
  <input type="surname" class="form-control mb-2 mr-sm-2" id="surname">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Stay logged in
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Log in</button>
</form>

Bootstrap Form: Summary

  • HTML forms are supported and can be created in Bootstrap.
  • They are a convenient way to gather data your users input.
  • There are two types of Bootstrap 4 forms: inline and stacked.
Learn Bootstrap
Tutorial
Fonts
Tables
Images
Jumbotron
Alerts
Colors
Button Class
Button Groups
Badges
Progress Bars
Pagination
List Groups
Cards
Dropdown
Accordion
Tabs
Navbar
Forms
Input
Carousel
Modal
Tooltip
Popover
Scrollspy
Utility Classes
Grid: Introduction
Grid System
Horizontal Grid
Extra Small Grid
Small Grid
Medium Grid
Large Grid
Extra Large Grid
Grid Example