How to useForms in Bootstrap

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/bootstrap@5.3.0-alpha1/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>w3wiki</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

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

Using Grid System
Using Flexbox
Using Forms

Tags:

#Bootstrap-Questions #Bootstrap #Web Technologies

Approach 2: Using Flexbox

How to useForms in Bootstrap

HTML

How to make Form Responsive using Bootstrap ?

Similar Reads