Bootstrap Forms Alignment Types
Last Updated :
08 May, 2024
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 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.
HTML
<!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 Vertical Forms Example Output
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.
HTML
<!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 Horizontal Forms Example Output
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.
HTML
<!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:
Bootstrap Inline Forms Example Output
Similar Reads
BootStrap Introduction and Installation
To begin Web development you may go through this article first. Grid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and JumbotronBootstrap is a free and open-source collection of tools for creating websites and web application
4 min read
Bootstrap Grid System
Introduction and Installation Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar and Jumbotron Prerequisites: Web Development Basics and  BootStrap (Part-1) Grid System: In the previous article we had learnt about Bootstrap and its I
7 min read
Bootstrap Buttons, Glyphicons, Tables
After the previous article, one should be familiar with the Grid System of Bootstrap. Now, we'll learn about making Buttons, the all-new Glyphicons and Tables. Let's get started.Bootstrap ButtonsBootstrap buttons provide a quick way to create consistent and responsive buttons using predefined classe
3 min read
Bootstrap Forms Alignment Types
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 Fo
3 min read
Bootstrap DropDowns and Responsive Tabs
Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsProgress Bar and Jumbotron Dropdown Menu Using Bootstrap: In bootstrap, dropdowns are created using the class="dropdown". What we will do is create a button and then convert the button in
3 min read
Bootstrap Progress Bar and Jumbotron
BootStrap articles : Introduction and Installation Grid System Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the proc
2 min read
Bootstrap Alerts , Wells, Pagination and Pager
Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Alerts: We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted tex
4 min read
Bootstrap Badges, Labels, Page Headers
Introduction and InstallationButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Badges: We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many
3 min read
Bootstrap Tooltips
In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positionin
4 min read
Bootstrap Navigation Bar
Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl
6 min read