<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Vertical Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<div class="form-group">
<label for="email">User Name :</label>
<input type="text" class="form-control" id="user_name" placeholder="User Name" name="user_name">
</div>
<div class="form-group">
<label for="pwd">Password :</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password" name="password">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</body>
</html>
Horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls. The horizontal form layout requires the various markup changes from a default form layout.
1. Add class .form-horizontal to the <form> element
2. Wrap labels and form controls in a <div> element and apply the class .form-group.
3. Add class .control-label to all <label> elements
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Horizontal Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-3" for="email">Email ID:</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="example@gmail.com" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Password:</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Inline Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline" action="" method="post">
<div class="form-group">
<label class="sr-only" for="inputEmail">Email Id :</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">Password :</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Inputs, Textareas, Select Boxes</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<div class="row">
<div class="col-sm-6">
<h4>Input Forms</h4>
<input type="text" class="form-control input-lg" placeholder="Large input"><br>
<input type="text" class="form-control" placeholder="Default input"><br>
<input type="text" class="form-control input-sm" placeholder="small input"><br>
<div class="clearfix"></div>
<h4>Disabled Form</h4>
<input type="text" class="form-control" placeholder="Disabled input" disabled><br>
<div class="clearfix"></div>
<h4>Readonly Form</h4>
<input type="text" class="form-control" placeholder="Readonly Form" readonly="readonly"><br>
<div class="clearfix"></div>
<h4>Textarea</h4>
<textarea class="form-control" cols="" rows="4" placeholder="Sample Message"></textarea>
</div>
<div class="col-sm-6">
<h4>Select Boxes</h4>
<select class="form-control input-lg">
<option value="">Please Select One</option>
<option value="Sample-1">Sample-1</option>
<option value="Sample-2">Sample-2</option>
<option value="Sample-3">Sample-3</option>
</select><br>
<select class="form-control">
<option value="">Default select</option>
<option value="">Please Select One</option>
<option value="Sample-1">Sample-1</option>
<option value="Sample-2">Sample-2</option>
<option value="Sample-3">Sample-3</option>
</select><br>
<select class="form-control input-sm">
<option value="">Please Select One</option>
<option value="Sample-1">Sample-1</option>
<option value="Sample-2">Sample-2</option>
<option value="Sample-3">Sample-3</option>
</select><br>
<div class="clearfix"></div>
<h4>Disabled Select Box</h4>
<select class="form-control" disabled>
<option value="">Default select</option>
<option value="">Please Select One</option>
<option value="Sample-1">Sample-1</option>
<option value="Sample-2">Sample-2</option>
<option value="Sample-3">Sample-3</option>
</select><br>
<div class="clearfix"></div>
<h4>Mutiple Select list</h4>
<select multiple class = "form-control">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Bootstrap</option>
<option>PHP</option>
</select><br>
<div class="clearfix"></div>
<h4>Input with help text</h4>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">This is a sample helping text paragraph.</span>
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Checkboxes and Radio buttons</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<label class="checkbox-inline">
<input type="checkbox" name="one" value="One"> One
</label>
<label class="checkbox-inline">
<input type="checkbox" name="two" value="Two"> Two
</label>
<label class="checkbox-inline">
<input type="checkbox" name="three" value="Three"> Three
</label>
<br /><br />
<label class="radio-inline">
<input type="radio" name="radio" value="One"> One
</label>
<label class="radio-inline">
<input type="radio" name="radio" value="Two"> Two
</label>
<label class="radio-inline">
<input type="radio" name="radio" value="Three"> Three
</label>
</form>
</body>
</html>