Worried about creating a form from scratch? Here is the simple way to create a form using bootstrap.
Bootstrap is the open source framework for building responsive sites for mobile, tablet and desktop. Bootstrap provides set of classes which you can use directly in your HTML markup. It saves your lot of efforts of writing CSS for each and every HTML tag. No need to think a lot just use the classes and templates provided by bootstrap.
Here is the official site of bootstrap.
Using bootstrap in your project.
Download the bootstrap CSS from CDN
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Put the above code in the head tag to import the bootstrap CSS in your project or you can download the minified CSS and put it in your local project. Once you include above CSS and run the page bootstrap will automatically import all the necessary font’s.
<link rel="stylesheet" href="../css/bootstrap.min.css">
To create a form template in bootstrap you need to remember two important classes i.e. form-group and form-control.
form-group is the container to hold and style the form field i.e. text field in this case.
<div class="form-group"> <input type="email" class="form-control" id="name"/> </div>
form-control class is used by bootstrap to style the form fields.
Here is the sample code to create a login form using bootstrap.
<form action="/action_page.php"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
Click here to see the output.