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”>
<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.