Bootstrap 5 Layout Auto-sizing
Bootstrap5 layout Auto-sizing dynamically calculates the size height, width, and positions of the elements can be adjusted automatically. It uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed.
Bootstrap5 Layout Auto-sizing Class:
- col-auto: This class is used to adjust the height, width, and position automatically in the column on the small screen sizes.
Syntax:
<form class="row gy-* gx-*"> <div class="col-auto"> <input type="text" class="form-control" placeholder="..."> </div> </form>
Example 1: In this example, we set the layout of the elements at column-wise to different screen sizes using .col-auto class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body class = "m-3" > < div class = "container text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h5 >Bootstrap5 Layout Auto-sizing</ h5 > </ div > < form class="p-3 mt-4 row gy-2 gx-2 align-items-center border bg-light "> < div class = "col-auto" > < input type = "text" class = "form-control" placeholder = "First Name " > </ div > < div class = "col-auto" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "Middle Name" > </ div > </ div > < div class = "col-auto" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "Last Name" > </ div > </ div > < div class = "col-auto" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "Email id" > </ div > </ div > < div class = "col-auto" > < button type = "submit" class = "btn btn-success" > Confirm</ button > </ div > </ form > </ body > </ html > |
Output:
Example 2: In this example, we set the layout of elements at row-wise to different screen sizes using .col-auto class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body class = "m-3" > < div class = "container text-center " > < h1 class = "text-success" >w3wiki</ h1 > < h5 >Bootstrap5 Layout Auto-sizing</ h5 > </ div > < form class="p-3 mt-4 col gy-4 gx-4 align-items-center border bg-light "> < div class = "col-auto" > < input type = "text" class = "form-control" placeholder = "Name" > </ div > < div class = "col-auto mt-3" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "Gender" > </ div > </ div > < div class = "col-auto mt-3" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "Date of birth" > </ div > </ div > < div class = "col-auto mt-3" > < div class = "input-group" > < input type = "text" class = "form-control" placeholder = "Recovery account" > </ div > </ div > < div class = "col-auto mt-3" > < button type = "submit" class = "btn btn-primary" > Done </ button > </ div > </ form > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/layout/#auto-sizing