Bootstrap Ratio
The Aspect Ratio describes the ratio between the width and height of an element along with the screen. For example, the 1x1 aspect ratio describes a square element where the first number refers to the width and the second number refers to the height of the element. if we embed any image with some different aspect ratio than the ratio screen, we may not able to see the whole image. There are various sizes of devices available like tab, mobile, laptop, desktop, etc. so we need to adjust the aspect ratio of the elements on the webpage accordingly.
Bootstrap 5 uses the ratio helper to manage the ratio of the external contents like <iframe>, <embed>, and <video>. These helpers can also be used with HTML elements like <div>, and <img>.
Bootstrap modifier classes
You can add an aspect ratio to a <image> using .ratio class and an aspect ratio class. The aspect ratio can be customized using modifier classes.
Example: Using modifier class to set the aspect ratio of the image
Here we have used the modifier classes to set the aspect ratio of the image in the grid system. Use .ratio-21x9 to set the aspect ratio of 21x9. Use .ratio-1x1 to set the aspect ratio of 1x1. similarly use .ratio-4x3 for setting aspect ratio of image to 4x3 and .ratio-16x9 to set the aspect ratio of 16x9.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
21x9
<div class="ratio ratio-21x9" >
<img src="pic1.png" alt="study tonight">
</div>
</div>
<div class="col-6">
1x1
<div class="ratio ratio-1x1" >
<img src="pic1.png" alt="study tonight">
</div>
</div>
</div>
<div class="row">
<div class="col-6">
4x3
<div class="ratio ratio-4x3" >
<img src="pic1.png" alt="study tonight">
</div>
</div>
<div class="col-6 mt-3">
16x9
<div class="ratio ratio-16x9" >
<img src="pic1.png" alt="study tonight">
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program
Custom Ratios
We can set the aspect ratio using the CSS custom property. Just replace the modifier class with a CSS variable to create a custom aspect ratio to the HTML elements.
Example: Using a CSS variable to set the custom aspect ratio of an image
Here in the example, we have used --bs-aspect-ratio: 50%; to set the custom aspect ratio of the image.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container mt-3">
<div class="col-6">
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<img src="pic1.png" alt="study tonight">
</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So in this tutorial, we have learned to set the aspect ratio to the elements using Bootstrap 5. The aspect ratio can be set using either the modifier classes or custom CSS to the parent element. The aspect ratio helps to properly display the element based on the parent element.
