Bootstrap 5 Layout Auto-sizing
Last Updated :
30 Jan, 2023
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 =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body class = "m-3" >
< div class = "container text-center" >
< h1 class = "text-success" >GeeksforGeeks</ 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:
Bootstrap 5 Layout Auto-sizing
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 =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body class = "m-3" >
< div class = "container text-center " >
< h1 class = "text-success" >GeeksforGeeks</ 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:
Bootstrap 5 Layout Auto-sizing
Reference: https://getbootstrap.com/docs/5.0/forms/layout/#auto-sizing
Share your thoughts in the comments
Please Login to comment...