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