Bootstrap Forms

April 16th, 2020

Prerana Kasar

Bootstrap Forms

Bootstrap provides more styling to the form elements such are <input>, <textare>, <select>. The class .form-control is used to apply the textual elements.

Bootstrap Forms Layout

Bootstrap have 3 types of the forms layouts.

Vertical Forms
Horizontal Forms
Inline Forms

Bootstrap Vertical Forms Layout

Bootstrap vertical forms layout create by the form elements <input> <button> tag. Apply the class .form-group to <div> tag and .control-form to <input> tag.

Example: 1 Bootstrap Vertical Forms Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Navbar Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Vertical Form Example</h2>
		<form action="#">
			<div class="form-group">
				<label for="email">Email Id:</label>
				<input type="email" class="form-control" placeholder="Enter your mail id">
			</div>
			<div class="form-group">
				<label for="password">Password:</label>
				<input type="password" class="form-control" placeholder="Enter your password">
			</div>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
</body>
</html>

On the above code we use the <form> tag. The class .form-control is applied to the <input> tag.

Fig.1 – Bootstrap Vertical Form Example.

Bootstrap Horizontal Forms Layout

Bootstrap horizontal forms layout menas that the form elements are arranged in horizontally or not have line break between the form elements.

Example: 2 Bootstrap Horizontal Forms Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Forms Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Horizontal Form Example</h2>
		<form class="form-horizontal" action="#">
			<div class="form-group">
				<label class="control-lable col-sm-2" for="email">Email Id:</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" placeholder="Enter your mail id">
				</div>
			</div>
			<div class="form-group">
				<label class="control-lable col-sm-2" for="password">Password:</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" placeholder="Enter your password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-primary">Submit</button>
				</div>
			</div>
		</form>
	</div>
</body>
</html>

On the above code we use the <form> tag with class .form-horizontal. The class .control-lable and .col-sm-2 or col-sm-10 is applied to the <input> and &lable> tag.

Fig.2 – Bootstrap Horizontal Form Example.

Bootstrap Inline Forms Layout

Bootstrap inline forms have all form elements are in one line or linear to each other. The class .form-inline is applied to the <form> tag.

Example: 3 Bootstrap Inline Forms Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Forms Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Inline Form Example</h2>
		<form class="form-inline" action="#">
			<div class="form-group">
				<label for="email">Email Id:</label>
				<input type="email" class="form-control" placeholder="Enter your mail id">
			</div>
			<div class="form-group">
				<label for="password">Password:</label>
				<input type="password" class="form-control" placeholder="Enter your password">
			</div>
			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
</body>
</html>

On the above code we use the <form> tag with class .form-inline.