Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Generic form with several controls positioned inline.

How to create a Bootstrap inline form

Ben Long

June 14th, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

When designing web forms, sometimes you want to display a series of form controls inline, on a single horizontal row.

In this article, we work through a simple example, demonstrating how to create a Bootstrap inline form, including information on responsiveness, placeholders, password fields, and grid layouts. Finally, we discuss how you can enhance your Bootstrap forms with WYSIWYG editing.

For more information about Bootstrap forms, check out the Bootstrap documentation.

A simple Bootstrap inline form.

Start with the basic Bootstrap template

Start with the Bootstrap starter template to load the Bootstrap CSS and JavaScript plugins.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->

  </body>
</html>

Add a simple form to your Bootstrap project

Add a form to the body of your HTML. For our example, we'll create a simple form with two input fields, a checkbox, and a submit button.

<div class="container-fluid">
  <form>
    <label for="inlineFormEmail" class="m-2">Email</label>
    <input type="email" class="form-control m-2" id="inlineFormEmail">
    <label for="inlineFormPassword" class="m-2">Password</label>
    <input type="password" class="form-control m-2" id="inlineFormPassword">
    <div class="form-check m-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 m-2">Submit</button>
  </form>
</div>

It’s always best to specify the input type (e.g., email, password, ...) because, when you do, you get a little extra functionality for free, for example, input validation and password obfuscation. Read more about input types.

You may need to align the controls using spacing utilities. Here we’ve increased the margin on all elements with m-2.

Displaying Bootstrap forms inline

By default, form controls will be displayed one below the other. However, you can make your form labels and inputs appear inline, horizontally, by applying the form-inline class. (Note that it will appear inline only in viewports that are at least 576px wide.)

<div class="container-fluid">
  <form class="form-inline">
    <label for="inlineFormEmail" class="m-2">Email</label>
    <input type="email" class="form-control m-2" id="inlineFormEmail">
    <label for="inlineFormPassword" class="m-2">Password</label>
    <input type="password" class="form-control m-2" id="inlineFormPassword">
    <div class="form-check m-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 m-2">Submit</button>
  </form>
</div>

After applying this class to the form (as shown in the code above), the controls will be displayed inline as follows:

A simple Bootstrap inline form.

Responsiveness and Bootstrap inline forms

Bootstrap inline forms will revert back to the vertical layout when the display size is 576px. However, you’ll notice in our example, there is a range between 576px and around 830px where the form controls start wrapping. To avoid this, you can force it to revert to a vertical layout when the display size is less than 830px by adding the following CSS.

@media (max-width: 830px) {
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
A responsive Bootstrap inline form, reverted to a vertical layout.

Using placeholder text in Bootstrap inline forms

A Bootstrap inline form with placeholder text.

When form controls are displayed inline, they can use up a lot of horizontal space, so you may find this is an appropriate scenario in which to use placeholders instead of labels. You can do this with the placeholder attribute, for example, placeholder="Enter email here".

<div class="container-fluid">
  <form class="form-inline">
    <label for="inlineFormEmail" class="m-2 sr-only">Email</label>
    <input type="email" class="form-control m-2" id="inlineFormEmail" placeholder="Enter email here">
    <label for="inlineFormPassword" class="m-2 sr-only">Password</label>
    <input type="password" class="form-control m-2" id="inlineFormPassword">
    <div class="form-check m-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 m-2">Submit</button>
  </form>
</div>

Here, we've also made use of the sr-only class. Even though you might want to remove labels from the visual design, it’s always a good idea to keep them for accessibility reasons. For this reason, Bootstrap provides the sr-only class. Any content with this class applied will be visually hidden, but will remain accessible to assistive technologies such as screen readers.

Adding placeholder text to a password field

You may notice you cannot use the  placeholder attribute with a password input type. (There’s actually a bit of controversy over whether, and what, placeholder text is appropriate for password fields.) However, if you decide that it’s right for your situation, you can add placeholder text to a password input type using a bit of JavaScript.

<script>
  document.getElementById("inlineFormPassword").placeholder = "Enter password here";
</script>

Bootstrap inline forms with the grid system

As an alternative to using the form-inline class, you can try playing around with the Bootstrap grid system. For instance, a responsive layout similar to the previous example is reproduced with the following HTML:

<div class="container-fluid m-2">
  <form>
    <div class="row">
      <div class="col">
        <label for="inlineGridName" class="sr-only">Name</label>
        <input type="text" class="form-control" id="inlineGridName" placeholder="Enter name here">
      </div>
      <div class="col">
        <label for="inlineGridEmail" class="sr-only">Email</label>
        <input type="email" class="form-control" id="inlineGridEmail" placeholder="Enter email here">
      </div>
      <div class="col">
        <div class="form-check m-2">
          <input class="form-check-input" type="checkbox" id="inlineFormCheck">
          <label class="form-check-label" for="inlineFormCheck">Remember me</label>
        </div>
      </div>
      <div class="col">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

This CodePen by @wilgustavo is a good example of a bootstrap responsive form constructed with the grid system, showing off various features and alignments, including inline elements.

Enhance your Bootstrap forms with WYSIWYG editing

WYSIWYG HTML editing in the Bootstrap framework.

Check out our article on how to enhance Bootstrap forms with WYSIWYG editing. Whether you are building simple forms or a CMS, you can get started with rich text editing in your project with only a few lines of code.

BootstrapDesign
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Abstract illustration of physical servers depicting self-hosting concept.
    How-tos & Tutorials

    How to self-host TinyMCE for your website or application

    by Ben Long in How-tos & Tutorials
  • Text that reads "<!DOCTYPE HTML>".
    How-tos & Tutorials

    TinyMCE requires standards mode

    by Ben Long in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor