- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Forms
Description
The form element is used to collect input from user by using fields such as checkboxes, radio buttons, or text fields etc.
Basic Form
You can wrap labels and controls in a <div> element with class .form-group and add a class of .form-control to all textual <input>, <textarea>, and <select> elements.
Example
<html lang = "en">
<head>
<!-- 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.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Form</h2>
<form>
<div class = "form-group">
<label for = "exampleInputEmail1">Email</label>
<input type = "email" class = "form-control"
id = "exampleInputEmail1" aria-describedby = "emailHelp"
placeholder = "Enter your email">
</div>
<div class = "form-group">
<label for = "exampleInputPassword1">Password</label>
<input type = "password" class = "form-control"
id = "exampleInputPassword1" placeholder = "Enter your password">
</div>
<div class = "form-group form-check">
<label class = "form-check-label" for = "exampleCheck1">
<input type = "checkbox" class = "form-check-input"
id = "exampleCheck1">Remember me
</label>
</div>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Form Controls
Bootstrap natively supports the most common form controls such as input, textarea and select.
The following example demonstrates above supported form controls specified with .form-control class −
Example
<html lang = "en">
<head>
<!-- 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.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h4>Example Input</h4>
<div class = "form-group">
<input type = "email" class = "form-control"
id = "exampleFormControlInput1" placeholder = "Enter your email">
</div>
<h4>Example Select</h4>
<div class = "form-group">
<select class = "form-control" id = "exampleFormControlSelect1">
<option>Select Option #1</option>
<option>Select Option #2</option>
<option>Select Option #3</option>
<option>Select Option #4</option>
<option>Select Option #5</option>
</select>
</div>
<h4>Example Multiple Select</h4>
<div class = "form-group">
<select multiple class = "form-control" id = "exampleFormControlSelect2">
<option>Multiple Select #1</option>
<option>Multiple Select #2</option>
<option>Multiple Select #3</option>
<option>Multiple Select #4</option>
<option>Multiple Select #5</option>
</select>
</div>
<h4>Example Textarea</h4>
<div class = "form-group">
<textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Sizing, Readonly and Range Inputs
The input field can be displayed in large and small sizes by using .form-control-lg and .form-control-sm classes respectively. The readonly attribute is a boolean attribute, which makes input field as readonly and cannot be modified. You can put range for the inputs by using the .form-control-range class.
The following example demonstrates above types −
Example
<html lang = "en">
<head>
<!-- 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.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Sizing</h2>
<input class = "form-control form-control-lg" type = "text"
placeholder = "Large Input">
<br>
<input class = "form-control" type = "text"
placeholder = "Default Input">
<br>
<input class = "form-control form-control-sm" type = "text"
placeholder = "Small Input">
<br>
<br>
<h2>Readonly</h2>
<input class = "form-control" type = "text"
placeholder = "This is readonly text" readonly>
<br>
<br>
<h2>Range Inputs</h2>
<div class = "form-group">
<input type = "range" class = "form-control-range"
id = "formControlRange">
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Form grid using Form Row
You can create complex forms which require multiple columns by using .form-row class that specify the compact layout for column. The following example demonstrates this −
Example
<html lang = "en">
<head>
<!-- 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.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Form Row</h2>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputEmail4">First Name</label>
<input type = "text" class =" form-control"
id = "inputEmail4" placeholder = "First Name">
</div>
<div class = "form-group col-md-6">
<label for = "inputPassword4">Last Name</label>
<input type = "text" class = "form-control"
id = "inputPassword4" placeholder = "Last Name">
</div>
</div>
<div class = "form-group">
<label for = "inputAddress">Address</label>
<input type = "text" class = "form-control" id = "inputAddress"
placeholder = "Address">
</div>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputCity">City</label>
<input type = "text" class = "form-control" placeholder = "City"
id = "inputCity">
</div>
<div class = "form-group col-md-4">
<label for = "inputState">State</label>
<select id = "inputState" class = "form-control">
<option selected disabled>Select State</option>
<option>State 1</option>
<option>State 1</option>
</select>
</div>
<div class = "form-group col-md-2">
<label for = "inputZip">Pin Code</label>
<input type = "text" class = "form-control" id = "inputZip"
placeholder = "Pin Code">
</div>
</div>
<div class = "form-group">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck" >
<label class = "form-check-label" for = "gridCheck">
I Agree To Terms and Conditions
</label>
</div>
</div>
<button type = "submit" class = "btn btn-primary">Submit</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Horizontal Forms
Create horizontal forms by adding the .row class to form groups. The width of labels and controls can be specified by using .col-*-* classes and add the .col-form-label class to your <label>, so that you can place form controls vertically centered.
The following example demonstrates this −
Example
<html lang = "en">
<head>
<!-- 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.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Horizontal Forms</h2>
<div class = "form-group row">
<label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputEmail3"
placeholder = "First Name">
</div>
</div>
<div class = "form-group row">
<label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputPassword3"
placeholder = "Last Name">
</div>
</div>
<fieldset class = "form-group">
<div class = "row">
<legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios1" value = "option1" checked>
<label class = "form-check-label" for = "gridRadios1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios2" value = "option2">
<label class = "form-check-label" for = "gridRadios2">
Option 2
</label>
</div>
<div class = "form-check disabled">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios3" value =" option3" disabled>
<label class = "form-check-label" for = "gridRadios3">
Option 3 (disabled)
</label>
</div>
</div>
</div>
</fieldset>
<div class = "form-group row">
<div class = "col-sm-2">Checkbox</div>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "gridCheck1">
<label class = "form-check-label" for = "gridCheck1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck2">
<label class = "form-check-label" for = "gridCheck1">
Option 2
</label>
</div>
</div>
</div>
<div class = "form-group row">
<div class = "col-sm-10">
<button type = "submit" class = "btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Inline Form
You can create a form where all of the elements are inline, left aligned and labels are alongside, by adding the class .form-inline to the <form> tag.
The following example demonstrates displaying of form controls on a single horizontal row −
Example
<html lang = "en">
<head>
<!-- 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.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Inline Forms</h2>
<form class = "form-inline" action = "/action_page.php">
<label for = "email">Email :
<input type = "email" class = "form-control" id = "email"
placeholder = "Enter email" name =" email"></label>
<label for = "pwd">Password :
<input type = "password" class = "form-control" id = "pwd"
placeholder = "Enter password" name = "pswd"></label>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
Disabled Form and Help Text
Use the disabled attribute to disable the form controls (blocks the user interactions on an input). You can enter text to the related fields by using .form-text class. The following example demonstrates this −
Example
<html lang = "en">
<head>
<!-- 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.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Disabled Form</h2>
<form>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput">Name</label>
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
</div>
<div class = "form-group">
<label for = "disabledSelect">Select your option</label>
<select id = "disabledSelect" class = "form-control">
<option>Select</option>
</select>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "disabledFieldsetCheck" disabled>
<label class = "form-check-label" for="disabledFieldsetCheck">
Remember Me
</label>
</div>
<button type = "submit" class = " btn btn-primary">Submit</button>
<br>
<br>
<h2>Help Text</h2>
<label for = "inputPassword5">Password</label>
<input type = "password" id = "inputPassword5" class = "form-control"
aria-describedby = "passwordHelpBlock">
<small id = "passwordHelpBlock" class = "form-text text-muted">
Your password must be 6-10 characters long (This is help text).
</small>
</fieldset>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>
It will produce the following result −
Output
bootstrap4_components.htm
Advertisements