How to make Form Responsive using Bootstrap ?

Last Updated : 28 Apr, 2025

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

Using Grid System
Using Flexbox
Using Forms

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          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:

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          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:

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          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:

How to align nested form rows using Bootstrap 4?

pranay0911

Improve

Article Tags :

How to make Form Responsive using Bootstrap ?

Approach 1: Using Grid System

Approach 2: Using Flexbox

Approach 3: Using Forms

Similar Reads

Thank You!

What kind of Experience do you want to share?