- Three types of forms layout
- Vertical (Default)
- Inline
- Class name form-inline and it adds online the form controls in online line
- Horizontal
- Class name “form-horizontal” has to be used in <form> tag to create a horizontal form layout.
- We need to add col-md-x and control-label(control label for label and text box alignment) class to the <label> tag
- We need to add form control like input into a div tag and add col-md-x class as well for that div tag
- form-group class can be added into a div tag and that div tag which can have 2 tags a label and a form element tag.
- form-control is a class which can be applied to form elements like input type text or select of any other form elements, this class gives them a bootstrap look.
Example :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1>Bootstrap Form Designing</h1>
</div>
<form class="">
<div class="form-group">
<label for="UserName">User Name</label>
<input class="form-control" type="text" name="UserName" id="UserName">
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input class="form-control" type="password" name="confirmPassword" id="confirmPassword">
</div>
</form>
<div class="page-header">
<h4>Bootstrap inline Form Designing</h4>
</div>
<form class="form-inline">
<div class="form-group">
<label for="UserName">User Name</label>
<input class="form-control" type="text" name="UserName" id="UserName">
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input class="form-control" type="password" name="confirmPassword" id="confirmPassword">
</div>
</form>
<div class="page-header">
<h4>Bootstrap Horizonal Form Designing</h4>
</div>
<form class="form-horizontal">
<div class="container">
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="first_name" class="col-sm-3 col-form-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="last_name" class="col-sm-3 col-form-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="Street" class="col-sm-3 col-form-label">Street</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Street" name="Street">
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="City" class="col-sm-3 col-form-label">City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="City" name="City">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Output :
