This chapter discusses about the aspect ratio. In Bootstrap, aspect ratio is used to maintain the proportions of a responsive element, such as an image or video, relative to its parent container. It is specified using the .ratio class along with a modifier class that represents the desired aspect ratio.
- To manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s, use the ratio-* class.
- The ratio helper can also be used on standard HTML child element, such as a <div> or <img>
- The styles are applied from the parent .ratio class directly to the child element.
- The * in the aspect ratio modifier class can be replaceable with:
- ratio-21×9: creates a responsive element with a 21:9 aspect ratio
- ratio-16×9: creates a responsive element with a 16:9 aspect ratio
- ratio-4×3: creates a responsive element with a 4:3 aspect ratio
- ratio-1×1: creates a responsive element with a 1:1 aspect ratio
Here’s an example of how aspect ratios are used with the <iframe> element. Here we are using the 16×9 aspect ratio:https://www.tutorialspoint.com/bootstrap/examples/ratio_16x9.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Ratio</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-success text-center">Aspect Ratio 16x9 </h2><hr><div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/4PWVFBiFVVU" title="YouTube video" allowfullscreen></iframe></div></body></html></pre>Here's an example of how aspect ratios are used with the <iframe> element. Here we are using the 21x9 aspect ratio:https://www.tutorialspoint.com/bootstrap/examples/ratio_21x9.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Ratio</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h2 class="text-success text-center">Aspect Ratio - 21x9 </h2><hr><div class="ratio ratio-21x9"><iframe src="https://www.youtube.com/embed/4PWVFBiFVVU" title="YouTube video" allowfullscreen></iframe></div></body></html></pre>Custom Ratios
In Bootstrap, a custom ratio allows you to define your own aspect ratio for a responsive element using a combination of CSS and JavaScript.
This can be useful if you have a specific aspect ratio that is not covered by the built-in aspect ratio modifier classes. Following example demonstrates by setting --bs-aspect-ratio: 50% on the .ratio.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Ratio</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h1 class="text-success text-center"></h1><hr><div class="text-center"><h2 class="text-success">Bootstrap 5 Custom ratios</h2></div><br><div class="ratio" style="--bs-aspect-ratio: 10%;"><div class="bg-success"><h1>success</h1></div></div><div class="ratio" style="--bs-aspect-ratio: 30%;"><div class="bg-secondary"><h1>secondary</h1></div></div></body></html>Ratio
Leave a Reply