Bootstrap 4 Forms Tutorial With Example

In Bootstrap 4 Forms Tutorial With Example, you will learn how to create elegant forms with Bootstrap. Bootstrap 4 uses the standard HTML5 form elements to add the variety of elements within a form. You can create responsive and consistently styled forms using Bootstrap 4 form classes. A couple of classes are new in Bootstrap 4.

Bootstrap 4 Forms Tutorial With Example

HTML forms are an integral part of the web pages and applications. Bootstrap 4 provides the default style that is applied across most form controls. It also provides classes for the specific purpose.

#1: Bootstrap 4 Forms

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 provides two types of form layouts:

  • Stacked (full-width) form
  • Inline form

#2: Bootstrap 4 Stacked Form

The stacked layout type is a default type for Bootstrap forms. Forms can include different types of elements like text input, password, multiple select, textarea, file upload, checkbox, radio buttons and submit button. Each element is grouped inside a <div> with .form-group class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Forms Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<form>
  <h2>Form</h2>
<div class="form-group">
  <label for="username">Enter Username</label>
  <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username">
  <small id="Username" class="form-text text-muted">Enter username to login.</small>
</div>
<div class="form-group">
  <label for="password">Enter Password</label>
  <input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
  <label for="singleselect">Single Select from the Dropdown</label>
  <select class="form-control" id="singleselect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>
<div class="form-group">
  <label for="multipleselect">Multiple Select from List</label>
  <select multiple class="form-control" id="multipleselect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>
<div class="form-group">
  <label for="textarea">Textarea Input</label>
  <textarea class="form-control" id="textarea" rows="5"></textarea>
</div>
<div class="form-group">
  <label for="fileupload">Upload File</label>
  <input type="file" class="form-control-file" id="fileupload" aria-describedby="fileupload">
</div>
<fieldset class="form-group">
  <legend>Radio Buttons</legend>
  <div class="form-check">
  <label class="form-check-label">
  <input type="radio" class="form-check-input" name="radio" id="radio1" value="Option 1" checked>
  A</label>
</div>
<div class="form-check">
  <label class="form-check-label">
  <input type="radio" class="form-check-input" name="radio" id="radio2" value="Option 2">
  B </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
  <input type="radio" class="form-check-input" name="radio" id="radio3" value="Option 3" disabled>
  C</label>
</div>
</fieldset>
<fieldset class="form-group">
<div class="form-check">
  <label class="form-check-label">
  <input type="checkbox" class="form-check-input">
  A
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
  <input type="checkbox" class="form-check-input">
 B
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
  <input type="checkbox" class="form-check-input">
  C
  </label>
</div>
</fieldset>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</body>
</html>

The example of a Bootstrap form will look like below screenshot.

bootstrap 4 form example

#3: Bootstrap 4 Inline Form

Inline forms are created by applying a .form-inline class to the <form> element. In an inline form, all of the elements are left-aligned and inline.

The other thing is that should be noted that these class only works when the screen width is above 576px. If a screen is smaller, the input fields will display in the stacked layout anyway.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Forms Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Inline Form</h2>
<form class="form-inline" action="">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    <button type="submit" class="btn btn-success">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap inline form will look like below screenshot.

bootstrap 4 Inline Form example

#4: Bootstrap 4 Inline Form with Utilities

The inline form above feels compressed and will look much better with Bootstrap’s spacing utilities. The following example adds the right margin (.mr-sm-2) to each input on all devices (small and up). A  margin bottom class .mb-2 is used to style the input field when it breaks.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Forms Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Inline Form with Utilities</h2>
<form class="form-inline">
    <label for="email2" class="mb-2 mr-sm-2">Email:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="email2" placeholder="Enter email">
    <label for="pwd2" class="mb-2 mr-sm-2">Password:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="pwd2" placeholder="Enter password">
    <button type="button" class="btn btn-success mb-2">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap inline form with utilities will look like below screenshot.

bootstrap 4 Inline Form with Utilities example

At last, our Bootstrap 4 Forms Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.