How to useGrid System in Bootstrap
- 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/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 > < 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:
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