Collect Data Using a Stacked or Inline Bootstrap Form

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:

<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:

<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:

<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.