We are going to create a responsive form by using Bootstrap 5. responsiveness is a feature that allows users to interact with the web app on any device easily. It helps to create better UI interactions and a better user experience that can be a reason to have great traffic on the respective website.
These are the following methods to make a form responsive:
Table of Content
Approach 1: Using Grid System
- Bootstrap’s grid system allows you to control the layout and sizing of elements responsively using a 12-column grid, breakpoints, and column width classes.
- To control their widths, you can wrap form elements in .row and .col classes.
- You can use the predefined grid classes such as “col-sm“, “col-md“, “col-lg“, and “col-xl” to make a form responsive.
- In Bootstrap 5, Each column will automatically adjust its width based on the screen size.
Example: This example shows the use of grid in Bootstrap for creation of responsive form.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Form with Bootstrap Grid System</title>
<!-- Bootstrap CSS -->
<link href=
rel="stylesheet">
<style>
/* Additional styles */
.form-control {
margin-bottom: 10px;
}
.header {
text-align: center;
margin-bottom: 30px;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h3>GeeksForGeeks</h3>
</div>
<div class="row">
<div class="col-md-6">
<form>
<div class="mb-3">
<input type="text"
class="form-control"
placeholder="First Name">
</div>
<div class="mb-3">
<input type="text"
class="form-control"
placeholder="Last Name">
</div>
<div class="mb-3">
<input type="email"
class="form-control"
placeholder="Email">
</div>
</form>
</div>
<div class="col-md-6">
<form>
<div class="mb-3">
<input type="password"
class="form-control"
placeholder="Password">
</div>
<div class="mb-3">
<select class="form-control">
<option selected>Select Course</option>
<option>Course 1</option>
<option>Course 2</option>
<option>Course 3</option>
</select>
</div>
<button type="submit"
class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
|
Output:
form
Approach 2: Using Flexbox
- To make a form responsive using flexbox, you can use the “d-flex” and “flex-column” classes to create a flex container and stack the form elements vertically.
- In Bootstrap 5 you can Add “d-flex` class to form a container to enable flexbox and Direction can be set using “flex-column” or “flex-row” classes
- Flex items will automatically wrap and resize across screen sizes
- We are using the “d-flex” class to make a form row a flex container and the “flex-column” class to make the form columns stack vertically on smaller screens. Additionally, and the `order` class to change the order of the form elements on different screen sizes.
Example: This example shows the use of Flexbox in Bootstrap for creation of responsive form.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Form with Bootstrap Grid System</title>
<!-- Bootstrap CSS -->
<link href=
rel="stylesheet">
<style>
/* Additional styles */
.form-control {
margin-bottom: 10px;
}
.header {
text-align: center;
margin-bottom: 30px;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h3>GeeksForGeeks</h3>
</div>
<div class="row">
<div class="col-md-6">
<form class="d-flex flex-column">
<input type="text"
class="form-control mb-3"
placeholder="First Name">
<input type="text"
class="form-control mb-3"
placeholder="Last Name">
<input type="email"
class="form-control mb-3"
placeholder="Email">
</form>
</div>
<div class="col-md-6">
<form class="d-flex flex-column">
<input type="password"
class="form-control mb-3"
placeholder="Password">
<select class="form-control mb-3">
<option selected>Select Course</option>
<option>Course 1</option>
<option>Course 2</option>
<option>Course 3</option>
</select>
<button type="submit"
class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
|
Output:
form
Approach 3: Using Forms
- In this approach, we are using Form that is inbuild component in bootstrap.
- The in build Form is already responsive but if we want any other extra features or color we can use custom CSS to do that.
Example: This example shows the use of Forms in Bootstrap for creation of responsive form.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Form with Bootstrap Grid System</title>
<!-- Bootstrap CSS -->
<link href=
rel="stylesheet">
<style>
/* Additional styles */
.form-control {
margin-bottom: 10px;
}
.header {
text-align: center;
margin-bottom: 30px;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h3>GeeksForGeeks</h3>
</div>
<form>
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<input type="text"
class="form-control
custom-margin"
placeholder="First Name">
</div>
<div class="mb-3">
<input type="text"
class="form-control
custom-margin"
placeholder="Last Name">
</div>
</div>
<div class="col-lg-6">
<div class="mb-3">
<input type="email"
class="form-control
custom-margin"
placeholder="Email">
</div>
<div class="mb-3">
<input type="password"
class="form-control
custom-margin"
placeholder="Password">
</div>
<div class="mb-3">
<select class="form-control
custom-margin">
<option selected>Select Course</option>
<option>Course 1</option>
<option>Course 2</option>
<option>Course 3</option>
</select>
</div>
<button type="submit"
class="btn btn-primary">
Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
form