Logo

Bootstrap 4 Form

Bootstrap 4 Forms

Bootstrap 4 provides forms, which are one of the essential components for web pages and web applications. It is an input-based component, used to collect user data with the help of input fields, checkboxes, etc.

Bootstrap 4 provides some classes with the help of which we can easily customize forms. We can also make changes in styling and alignment of the form controls (such as labels, inputs, select boxes, text areas, etc.) with the help of bootstrap utilities.

How to create forms

  • To create a form, you have to place all the elements within the <form> element.
  • Add the class .form-group class each <div> element for providing structure. The .form-group class helps in maintaining the sequence of elements and also provides margin-bottom to the group.
  • Add the .form-control class to the <input> element. This class covers the whole width of its parent.

Example

This example shows how to create the basic bootstrap form.

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form 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.4.1/css/bootstrap.min.css">
 </head>
 <div class="container"> 
   <h2>Forms</h2>
   <form action="/action_page.php">
     <div class="form-group">
       <label for="email"><strong>Email:</strong></label>
       <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
     </div>
     <div class="form-group">
       <label for="pwd"><strong>Password:</strong></label>
       <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
     </div>
     <div class="form-group form-check"> 
       <label class="form-check-label">
         <input class="form-check-input" type="checkbox" name="remember"> Remember me
       </label>
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 
 </body>
 </html>

Output

Bootstrap Form

Inline Forms - Bootstrap 4 offers some predefined class that helps you to create forms in a single row. In the inline forms, all the labels and input fields are in a single row and left-aligned. To create an inline form, you have to add .form-inline class to the <form> element.

Note: You can only create inline forms on screens that have a screen size of 576px or more. Otherwise, this will look like a basic form.

Example

This example shows how to create inline form.

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form 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.4.1/css/bootstrap.min.css">
 </head>
 <div class="container">
   <h2>Inline form</h2>
   <p>You can only create inline forms on screens that have a screen size of 576px or more to see that all of the form elements are inline and left-aligned. On small screens, the form groups will stack horizontally.</p>
   <form class="form-inline" action="/action_page.php">
     <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" name="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" name="pswd">
     <div class="form-check mb-2 mr-sm-2">
       <label class="form-check-label">
         <input type="checkbox" class="form-check-input" name="remember"> Remember me
       </label>
     </div>    
     <button type="submit" class="btn btn-primary mb-2">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Form

Inline Forms with Utilities – In the inline forms, there is no default spacing. So, bootstrap 4 provides some utilities that are used for spacing the elements within the form.

  • Add the .mr-sm-2 class to give the right margin to each input and to every screen size.
  • Add the .mb2 class to give the margin-bottom to each input field.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form 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.4.1/css/bootstrap.min.css">
 </head>
 <div class="container">
   <h2>Inline form</h2>
   <form class="form-inline" action="/action_page.php">
     <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" name="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" name="pswd">
     <div class="form-check mb-2 mr-sm-2">
       <label class="form-check-label">
         <input type="checkbox" class="form-check-input" name="remember"> Remember me
       </label>
     </div>    
     <button type="submit" class="btn btn-primary mb-2">Submit</button>
   </form>
 </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Form

Form Grid with row – Bootstrap 4 offers some predefined classes that are used to design form grid or complex forms. The complex forms are those whose layout consists of several columns, such that each column has a different width and different alignment.

To create a form group,

  • You have to add the .row class to the <div> element.
  • Add the .col class to the <div> element inside the .row class.

The .col class is used to control the form width and alignment of form inputs without using spacing utilities.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form 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.4.1/css/bootstrap.min.css">
 </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>Uttar Pradesh</option>
                      <option>Uttrakhand</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>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Form

Form Validation – You can easily validate the form on the client-side. Form validation is used to give valuable feedback or implement custom messages to the users. 

Steps to implement the form validation using bootstrap are given below:

Add the .was-validated class to the <form> element if you want to provide feedback notification before form submission.

Or

Add the .needs-validation class to the <form> element if you want to provide feedback notification after the form submission.

If there are some fields that are necessary to be filled by the user before form submission. In that case, you can use the .valid-feedback class or .invalid-feedback class. These classes provide a message to the user about the fields that are necessary to be filled. The valid fields appear green, or the invalid or empty fields appear red.

Example

This example shows form validation using .was-validated class.

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form 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.4.1/css/bootstrap.min.css">
 </head>
 <body>
      <div class="container">
   <h2>Form Validation</h2>
   <form action="/action_page.php" class="was-validated">
     <div class="form-group">
       <label for="uname">Username:</label>
       <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
       <div class="valid-feedback">Valid.</div> 
       <div class="invalid-feedback">Please fill out this field.</div>
     </div>
     <div class="form-group">
       <label for="pwd">Password:</label>
       <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
       <div class="valid-feedback">Valid.</div> 
       <div class="invalid-feedback">Please fill out this field.</div>
     </div>
     <div class="form-group form-check">
       <label class="form-check-label">
         <input class="form-check-input" type="checkbox" name="remember" required> I Agree on Terms and Conditions.
         <div class="valid-feedback">Valid.</div>
         <div class="invalid-feedback">Check this checkbox to continue.</div>
       </label>
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Form

Related Topics

Bootstrap 4 Modal

Bootstrap 4 Modal The Modal is a component of Bootstrap 4, which is a dialog box or pop-up window. The modals are used to provide information or warning to the user, such as...

18 minutes read.

Bootstrap 4 Progress Bar

Bootstrap Progress Bar Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the...

9 minutes read.

Environment Setup

How to use Bootstrap? We can use bootstrap in our project either by downloading or by providing link of the library files. 1) Download Bootstrap files To download files, visit official site of bootstrap www.getbootstrap.com/download/ and...

1 minute read.

Difference between bootstrap.css and bootstrap-theme.css

The "bootstrap.css" uses to create a website with pre-existing designs and context. It uses basic Bootstrap classes like rows and columns with a CSS styling tool. The website is styled...

5 minutes read.

Bootstrap 4 Pagination

Bootstrap 4 Pagination Bootstrap pagination is used to show the existence of a series of web pages of the website. It allows navigation on multiple pages of a website. In pagination, there is a block...

9 minutes read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Bootstrap Grid System Example

Bootstrap Grid System Example Stacked to horizontal – In stacked to the horizontal grid system, the grid columns are stacked on top of each other on extra small devices and becomes...

7 minutes read.

Bootstrap 4 Colors

Bootstrap 4 Colors Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read...

2 minutes read.

Bootstrap Input groups

Bootstrap 4 Input groups The input group is a component of Bootstrap 4, which is used to create interactive and stylish form controls. With the help of input groups, you can easily customize the input...

8 minutes read.

Bootstrap Wells

In Bootstrap, well are used to add a rounded border around an element. It is default some padding and gray background color. It is like a container that displays the content....

1 minute read.

Bootstrap 4 Icons

Bootstrap 4 Icons Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such...

2 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.

Bootstrap 4 List Groups

Bootstrap 4 List Groups Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered...

13 minutes read.

Bootstrap 4 Grid System

Bootstrap 4 Grid Systems Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes...

4 minutes read.

Bootstrap Tabs and Pills

Bootstrap Menus Bootstrap menu is used to create different types of menu. It can created horizontal with its .list-inlineclass. <div class="container">       <h3>Example of Bootstrap Menu</h3>       <ul class="list-inline">         <li><a href="#">Home</a></li>         <li><a href="#">About</a></li>         <li><a href="#">Contact</a></li>         <li><a href="#">services</a></li>       </ul>     </div> Try Now Bootstrap Tabs Bootstrap tabl is look like is menu but there is some difference....

4 minutes read.

Bootstrap Typography

Bootstrap provides simple and easily customized typography for headings, body text, lists, and many more. Headline <h1> to <h6> By default, Bootstrap has HTML headings (<h1> to <h6>) that are given below: Example <h1>h1. Bootstrap heading</h1>   <h2>h2. Bootstrap heading</h2>   <h3>h3. Bootstrap heading</h3>   <h4>h4. Bootstrap heading</h4>   <h5>h5. Bootstrap heading</h5>   <h6>h6. Bootstrap heading</h6> Try Now ←...

1 minute read.

Bootstrap List group

Bootstrap list group provides a group of a list of items. The most basic list is an unordered list. We can use <ul> element with .list-group class and <li> element with .lsit-group-item. Let us see...

3 minutes read.

Bootstrap First Example

1) Add HTML5 doctype Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties. <!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8">      </head>   </html> 2) Bootstrap...

2 minutes read.

Bootstrap 4 Content

Typography Typography is used for styling and formatting the content. It also helps in creating customized headings, sub-headings, lists, paragraphs, etc. Headings Bootstrap 4 offers HTML heading <h1> to <h6> that has bolder...

8 minutes read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.