Forms

Form controls automatically receive some global styling with Bootstrap.

Bootstrap provides three types of form layouts
  • Vertical form (this is default)
  • Horizontal form
  • Inline form

Vertical form

In an Vertical form is default method of form alignment in bootstrap, all of the elements are take new line, left-aligned format.

<form action="#">
  <div class="form-group">
	<label for="name">User Name:</label>
	<input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
	<label for="pass">Password:</label>
	<input type="password" class="form-control" id="pass">
  </div>
   <div class="form-group">
	<label >City:</label>
	<select  class="form-control">
		<option value="">Select</option>
		<option value="">Salem</option>
		<option value="">Erode</option>
		<option value="">Chennai</option>
	</select>
  </div>
  <div class="checkbox">
	<label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Horizontal form

A horizontal form means that the labels are aligned next to the input field on large and medium screens. On small screens, it will transform to a vertical form.

<form class="form-horizontal" action="#">
  <div class="form-group">
	<label class="control-label col-sm-2" for="City">City:</label>
	<div class="col-sm-10">
	  <input type="text" class="form-control" id="city" placeholder="Enter City">
	</div>
  </div>
  <div class="form-group">
	<label class="control-label col-sm-2" for="pwd">Address:</label>
	<div class="col-sm-10"> 
	  <textarea type="text" class="form-control" id="addr" placeholder="Enter Address"></textarea>
	</div>
  </div>
  <div class="form-group"> 
	<div class="col-sm-offset-2 col-sm-10">
	  <button type="submit" class="btn btn-success" >Submit</button>
	</div>
  </div>
</form>

Inline form

In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.

<form action="#" class="form-inline">
  <div class="form-group">
	<label for="email">Email :</label>
	<input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
	<label for="pno">Phone Number:</label>
	<input type="password" class="form-control" id="pno">
  </div>
  <div class="radio">
	<label>Gender</label>
	<input type="radio"  name="gen"> Male
	<input type="radio"  name="gen"> Female
  </div>
  <div class="form-group">
	<button type="submit" class="btn btn-info">Submit</button>
  </div>
</form>

Source Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor Joes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
    <style>
        hr{
            margin-top: 15px;
            margin-bottom: 15px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container" style="margin-top:20px;">
		<div class="row">
			<div class="col-md-3">
				<h2 class="page-header">Vertical form</h2>
				<form action="#">
				  <div class="form-group">
					<label for="name">User Name:</label>
					<input type="text" class="form-control" id="name">
				  </div>
				  <div class="form-group">
					<label for="pass">Password:</label>
					<input type="password" class="form-control" id="pass">
				  </div>
				   <div class="form-group">
					<label >City:</label>
					<select  class="form-control">
						<option value="">Select</option>
						<option value="">Salem</option>
						<option value="">Erode</option>
						<option value="">Chennai</option>
					</select>
				  </div>
				  <div class="checkbox">
					<label><input type="checkbox"> Remember me</label>
				  </div>
				  <button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
			<div class="col-md-9">
				<h2 class="page-header">Inline form</h2>
				<form action="#" class="form-inline">
				  <div class="form-group">
					<label for="email">Email :</label>
					<input type="email" class="form-control" id="email">
				  </div>
				  <div class="form-group">
					<label for="pno">Phone Number:</label>
					<input type="password" class="form-control" id="pno">
				  </div>
				  <div class="radio">
					<label>Gender</label>
					<input type="radio"  name="gen"> Male
					<input type="radio"  name="gen"> Female
				  </div>
				  <div class="form-group">
				    <button type="submit" class="btn btn-info">Submit</button>
				  </div>
				</form>
			</div>
			<div class="col-md-12">
			<h2 class="page-header">Horizontal form</h2>
				<form class="form-horizontal" action="#">
				  <div class="form-group">
					<label class="control-label col-sm-2" for="City">City:</label>
					<div class="col-sm-10">
					  <input type="text" class="form-control" id="city" placeholder="Enter City">
					</div>
				  </div>
				  <div class="form-group">
					<label class="control-label col-sm-2" for="pwd">Address:</label>
					<div class="col-sm-10"> 
					  <textarea type="text" class="form-control" id="addr" placeholder="Enter Address"></textarea>
					</div>
				  </div>
				  <div class="form-group"> 
					<div class="col-sm-offset-2 col-sm-10">
					  <button type="submit" class="btn btn-success" >Submit</button>
					</div>
				  </div>
				</form>
			</div>
		</div>
	</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>
</html>
To download raw file Click Here

Bootstrap Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions