Bootstrap Forms are pre-styled HTML forms provided by the Bootstrap framework. They streamline the process of creating aesthetically pleasing and responsive forms by offering a range of ready-to-use components, layouts, and styles, ensuring consistency and efficiency in web development.
Bootstrap Forms Types:
Bootstrap provides 3 types of form Alignment layouts, namely:
We’ll look into each of them separately:
Bootstrap Vertical Forms:
Bootstrap Vertical Forms organize form elements vertically, stacking them on top of each other. This layout is ideal for forms with fewer fields or when vertical alignment is preferred for a cleaner, more organized appearance.
Example: In this example we creates a Bootstrap-styled container with a green "GeeksforGeeks" heading, followed by a vertical form with input fields for username and password, and buttons for login and registration.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Vertical Forms</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h4>Bootstrap Vertical Forms</h4>
<form action="">
<div class="form-group">
<label for="id1">User Name</label>
<input class="form-control"
type="text"
id="id1"
placeholder="Enter your User Name">
</div>
<div class="form-group">
<label for="id2">Password</label>
<input class="form-control"
type="password"
id="id2"
placeholder="Enter your password">
</div>
<div class="container">
<button type="button"
class="btn btn-success">
Login
</button>
<button type="button"
class="btn btn-secondary">
Register
</button>
</div>
</form>
</div>
</body>
</html>
Output:
Bootstrap Horizontal Forms:
Bootstrap Horizontal Forms arrange form elements horizontally, making efficient use of horizontal space. This layout is suitable for forms with shorter input fields, labels, and inline elements, providing a more compact and organized appearance.
Example: In this example we creates a Bootstrap container with a horizontal form containing input fields for username and password, buttons for login and registration, and a checkbox for remembering login.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Horizontal Form</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h4>Bootstrap Horizontal Form</h4>
<form action="" class="form-horizontal">
<div class="form-group has-success">
<label class="control-label col-sm-2" for="id1">
Username
</label>
<div class="col-sm-6">
<input class="form-control"
type="text"
id="id1"
placeholder="Enter your User Name">
</div>
</div>
<div class="form-group has-success">
<label class="control-label col-sm-2" for="id2">
Password
</label>
<div class="col-sm-6">
<input class="form-control"
type="password"
id="id2"
placeholder="Enter your password">
</div>
</div>
<div class="container">
<button type="button" class="btn btn-success">
Login
</button>
<button type="button" class="btn btn-secondary">
Register
</button>
<label>
<input type="checkbox">
Remember me
</label>
</div>
</form>
</div>
</body>
</html>
Output:
Bootstrap Inline Forms:
Bootstrap Inline Forms display form elements horizontally on a single line, enhancing readability and compactness. This layout is ideal for forms with minimal input fields and labels, maintaining a clean and concise design.
Example: In this example we creates a Bootstrap container with an inline form consisting of input fields for username and password, along with login and registration buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Inline Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h4>Bootstrap Inline Form</h4>
<br>
<form class="form-inline" action="/action_page.php">
<label for="email">Username:</label>
<input type="email"
class="form-control"
id="email"
placeholder="Enter Username"
name="email">
<label for="pwd">Password:</label>
<input type="password"
class="form-control"
id="pwd"
placeholder="Enter password"
name="pswd">
<button type="button"
class="btn btn-danger">
Login
</button>
<button type="button"
class="btn btn-secondary">
Register
</button>
</form>
</div>
</body>
</html>
Output:
