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