How to write a form in different line using Bootstrap ?

Last Updated : 22 Jul, 2021

Bootstrap is an open-source front-end framework for developing standard & decorative websites or web applications that are fast and user-friendly. Bootstrap includes templates based on HTML and CSS for tables, forms, buttons, etc. Bootstrap also uses JavaScript and helps us to create responsive designs. Forms are a crucial building block of every website. Bootstraps add styling to the forms that give a standard look & feel. This article will give you an idea about how to create a form (Bootstrap Vertical Form) using Bootstrap only.

Rules for the form layout

For Ideal Spacing, wrap labels and form controls in <div class=”form-group”>.
Add class .form-control to all textual .form-control class such as input>, <textarea>, and <select> elements.

Before we start to code, we need to include the following stylesheet in the HTML file for loading all CSS.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>

HTML

<DOCTYPE html> 
<html lang="en"> 
    <head> 
      <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      /> 
  
      <style> 
        /* Add a background color and  
           some padding around the form */ 
        .container { 
          /* Make width to 100% for  
             full screen size form*/ 
          width: 50%;  
          border-radius: 5px; 
          background-color: #f2f2f2; /*rgb(242, 242, 242) hsl(0, 0%, 95%)*/ 
          padding: 20px; 
        } 
      </style> 
    </head> 
  
    <body> 
      <div class="container"> 
        <form> 
          <div class="form-group"> 
            <label for="InputName">Name</label> 
            <input
              type="text"
              class="form-control"
              id="InputName"
              placeholder="Enter name"
            /> 
          </div> 
  
          <div class="form-group"> 
            <label for="InputEmail">Email</label> 
            <input
              type="email"
              class="form-control"
              id="InputEmail"
              placeholder="Enter email"
            /> 
          </div> 
  
          <div class="form-group"> 
            <label for="InputPhoneNumber">Phone Number</label> 
            <input
              type="tel"
              class="form-control"
              id="InputPhoneNumber"
              placeholder="Enter phone number"
            /> 
          </div> 
  
          <div class="form-group"> 
            <label for="InputPassword">Password</label> 
            <input
              type="password"
              class="form-control"
              id="InputPassword"
              placeholder="Enter password"
            /> 
          </div> 
  
          <div class="form-group"> 
            <label for="InputSubject">Subject</label> 
            <textarea
              class="form-control"
              id="InputSubject"
              placeholder="Write something...."
              style="height: 100px"
            > 
            </textarea> 
          </div> 
  
          <button type="submit" 
                  class="btn btn-primary">Submit</button> 
        </form> 
      </div> 
    </body> 
</html>

Output: Now, as you can see in the output, we have created a beautifully simple form using Bootstrap, which you can add to your website and will attract viewers to the webpage.