Bootstrap Forms
Bootstrap provides three different types of form layouts:
-
Vertical Form (default form layout)
-
Horizontal Form
-
Inline Form
​
Vertical Form
This is the default Bootstrap form layout in which styles are applied to form controls without adding any base class to the <form> element or any large changes in the markup.
​
Ex.
<!-- add here bootstrap header link file which is in second tutorial, copy and paste here -->
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/examples/actions/confirmation.php" method="post">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
Horizontal Form
To create a horizontal form layout add the class .row on form groups and use the .col-*-* grid classes to specify the width of your labels and controls.
apply the class .col-form-label on the <label> elements, so that they're vertically centered with their associated form controls. Let's check out an example:
Ex.
<!-- add here bootstrap header link file -->
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/examples/actions/index.php" method="post">
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<label class="form-check-label"><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
</body>
Inline Form
You can do this easily by adding the class .form-inline to the <form> element. However, form controls only appear inline in viewports that are at least 576px wide.
Ex.
<!-- add here bootstrap header link file -->
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form class="form-inline" action="/examples/actions/index.php" method="post">
<div class="form-group mr-2">
<label class="sr-only" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
<div class="form-group mr-2">
<label class="sr-only" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
<div class="form-group mr-2">
<label><input type="checkbox" class="mr-1"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</body>