Skip to content
Related Articles

Related Articles

Improve Article

How to write a form in different line using Bootstrap ?

  • Difficulty Level : Basic
  • 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 

  1. For Ideal Spacing, wrap labels and form controls in <div class=”form-group”>.
  2. 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=
      />
  
      <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.

    

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :