Bootstrap 4 Forms
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap 4 Forms
❮ Previous
Next ❯
Bootstrap 4's Default Settings
Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and <select> elements
with class .form-control have a width of 100%.
Bootstrap 4 Form Layouts
Bootstrap provides two types of form layouts:
- Stacked (full-width) form
- Inline form
Bootstrap 4 Stacked Form
The following example creates a stacked form with two input fields, one checkbox, and a submit button.
Add a wrapper element with .form-group, around each form control, to ensure proper margins:
Example
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Try it Yourself »
Bootstrap Inline Form
In an inline form, all of the elements are inline and left-aligned.
Note: This only applies to forms within viewports that are at least
576px wide. On screens smaller than 576px, it will stack horizontally.
Additional rule for an inline form:
- Add class
.form-inlineto the<form>element
The following example creates an inline form with two input fields, one checkbox, and one submit button:
Example
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Try it Yourself »
Inline Form with Utilities
The inline form above feels "compressed", and will look much better with Bootstrap's spacing utilities. The following example adds a right margin (.mr-sm-2) to each input on all devices (small and up). And a margin bottom class (.mb-2) is used to style the input field when it breaks (goes from horizontal to vertical due to not enough space/width):
Example
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>Try it Yourself »
You will learn more about spacing and other "helper" classes in our Bootstrap 4 Utilities Chapter.
<!--
Tip: If you don't include a label for every input, screen readers will have trouble with your forms.
You can hide the labels for all devices, except screen readers, by using the .sr-only class:
Example
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Try it Yourself »
-->
❮ Previous
Next ❯