Bootstrap मे तीन प्रकार के Form Layouts का उपयोग करते है.
Vertical Form (default)
Horizontal Form
Inline Form
Bootstrap के साथ Basic Form Structure आता है जो Individual Form को Automatically नियंत्रण करके Global Styling को प्राप्त करता है.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Vertical Form</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Vertical Form Example</h1>
<form style="width:300px">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
</div>
</body>
</html>
Horizontal Form को बनाने के लिये आपको कुछ Additional Rules का उपयोग करना होता है जैसे कि.
Add class .form-horizontal to the <form> element
Add class .control-label to all <label> elements
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Form</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button typ="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</body>
</html>
Bootstrap मे Inline Forms के सभी Elements Inline है जो कीleft-aligned होते है और Labels के साथ मे मिले होते है.
<!DOCTYPE html>
<html>
<head>
<title>Inline Form</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">File input</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>