How to write a form in different line using Bootstrap ?
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= /> <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.
Please Login to comment...