Bootstrap 5 Layout Form Grid
Bootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes.
Form Grid Layout used Classes:
- .row: This class is used to create a row of a form layout.
- .col: This class is used to create columns of a form grid.
- .col-*: This class is used to create different sizes of columns of a form grid.
Syntax:
<div class="row"> <div class="col"> <input type="*" class="form-control" ...> </div> ... </div>
Example 1: In this example, we will create a form grid layout using .row and .col classes.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Layout Form grid</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Layout Form Grid</ h2 > < div class = "row" > < div class = "col" > < input type = "text" class = "form-control" placeholder = "First Name" > </ div > < div class = "col" > < input type = "text" class = "form-control" placeholder = "Last Name" > </ div > < div class = "col" > < input type = "email" class = "form-control" placeholder = "Email Id" > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will create different sizes of a form grid layout using .row and .col-* classes.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap 5 Layout Form grid</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "container text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Layout Form Grid</ h2 > < div class = "row" > < div class = "col-5" > < input type = "text" class = "form-control" placeholder = "Name" > </ div > < div class = "col-4" > < input type = "email" class = "form-control" placeholder = "Email Id" > </ div > < div class = "col-3" > < input type = "number" class = "form-control" placeholder = "Mobile" > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/layout/#form-grid