Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like 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=””>


<DOCTYPE html>
<html lang="en">
      <link rel="stylesheet" href=
        /* 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;
      <div class="container">
          <div class="form-group">
            <label for="InputName">Name</label>
              placeholder="Enter name"
          <div class="form-group">
            <label for="InputEmail">Email</label>
              placeholder="Enter email"
          <div class="form-group">
            <label for="InputPhoneNumber">Phone Number</label>
              placeholder="Enter phone number"
          <div class="form-group">
            <label for="InputPassword">Password</label>
              placeholder="Enter password"
          <div class="form-group">
            <label for="InputSubject">Subject</label>
              placeholder="Write something...."
              style="height: 100px"
          <button type="submit" 
                  class="btn btn-primary">Submit</button>

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 :