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.
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:
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;
}
}
Using placeholder text in Bootstrap inline forms
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
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.
