14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

How to create a Bootstrap inline form

June 14th, 2020

3 min read

Generic form with several controls positioned inline.

Written by

Ben Long

Category

How-to Use TinyMCE

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 configure Bootstrap WYSIWYG editor.

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
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. 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

  • How-to Use TinyMCEMar 28th, 2024

    How to view and restore document version history in TinyMCE

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.