Horje
How to make Form Responsive using Bootstrap ?

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=
"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:

f1

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=
"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:

f2

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=
"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:

f3

form


 


Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
How to fix Collapsing Navbar Collapse in Bootstrap ? How to fix Collapsing Navbar Collapse in Bootstrap ?
Bootstrap 5 Grid Small Bootstrap 5 Grid Small
How to Create Form Layouts with Bootstrap ? How to Create Form Layouts with Bootstrap ?
How to make iframe Responsive in Bootstrap ? How to make iframe Responsive in Bootstrap ?
How to Make an Image Rounded in Bootstrap ? How to Make an Image Rounded in Bootstrap ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje