How to write a form in different line using Bootstrap ? Last Updated : 22 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Comment More infoAdvertise with us Next Article How to create forms using Twitter Bootstrap ? G guptaayushh Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to create a form within dropdown menu using Bootstrap ? A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some use 3 min read How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for 6 min read How to create a vertical or basic form using Bootstrap ? Forms are used on almost every website that you visit. It is generally used to collect data from the users. It consists of various interactive controls that enable users to input the data. These controls are wrapped in the <form> tag and also can be designed or styled according to the need by 4 min read How to create forms using Twitter Bootstrap ? Every website that you visit will have some sort of form in it to collect data from the users. A Form consists of input fields that allow the user to enter the data. Bootstrap provides us with a very easy way to add customizable & responsive forms to our web pages. In this article, we will learn 4 min read How to Create Form Layouts with Bootstrap ? Form Layouts in Bootstrap refer to the arrangement and presentation of form elements within a web page. To create Form Layouts with Bootstrap, utilize grid system classes to structure forms horizontally or vertically, and enhance them with input groups, inline forms, and responsive designs for impro 5 min read How to Create a Bootstrap Form Validation ? A Bootstrap Form Validation ensures that user input complies with established standards before submission, improves the user experience, and minimizes server-side processing for incorrect inputs. We can add client-side validation to their forms by using two different methods including Bootstrap buil 3 min read Like