Bootstrap4 Form Controls Bootstrap4 Breadcrumbs Navigation

Bootstrap4 Forms

HTML forms are an inseparable part of web pages and applications, but manually creating form layouts or setting the styles of form controls one by one using CSS is usually tedious. Bootstrap greatly simplifies the styling and alignment process of form controls (such as labels, input fields, select boxes, text areas, buttons, etc.) through a predefined set of classes.

In this chapter, we will learn how to create forms using Bootstrap. Bootstrap can create forms of different styles simply by using some simple HTML tags and extended classes.

Form elements <input>, <textarea>, and <select> elements When using .form-control class, the width is set to 100%.

Bootstrap4 Form Layout

Stacked Form (Full screen width): Vertical direction
Inline Form: Horizontal direction

Bootstrap provides two types of form layouts:

Stacked Form

The following example uses two input fields, a checkbox, and a submit button to create a stacked form:

Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body>
<div class="container">
　　<h2>Stacked Form</h2>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="email">Email:/label>
　　　　　　<input type="email" class="form-control" id="email" placeholder="Enter email">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Password:</label>/label>
　　　　　　<input type="password" class="form-control" id="pwd" placeholder="Enter password">
　　　　</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>
</div>
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Inline Form

All elements in all inline forms are left-aligned.

Note: When the screen width is less than 576px are vertically stacked. If the screen width is greater than or equal to576px, the form elements will be displayed on the same horizontal line.

An inline form needs to add .form-inline class.

The following example uses two input fields, a checkbox, and a submit button to create an inline form: