Bootstrap 5 Ratio Custom Ratios

Last Updated : 29 Nov, 2022

Bootstrap 5 Custom ratios allow us to set the aspect ratio using a CSS custom property. You can create custom aspect ratios for HTML elements by simply replacing modifier classes with CSS variables. Each ratio-* class contains a CSS custom property or variable in the selector.

ratio-1x1: 1080x1080 pixels
ratio-4x3: 1024x768 pixels
ratio-16x9: 1920x1080 pixels
ratio-21x9: 2560x1080 pixels

Bootstrap 5 Ratio Custom Ratios Class: There is no class for custom ratio, it depends on the developer how he/she wants the ratio.

Syntax:

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>. . .</div>
</div>
<div class="ratio ratio-4x3">
  <div>. . .</div>
</div>

Below example illustrate the Bootstrap 5 Ratio Custom Ratios:

Example 1: Set --bs-aspect-ratio: 50% on the ratio to produce a 2x1 aspect ratio.

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/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h2>Bootstrap 5 Custom ratios</h2>
    </div>
    <br>
    <div class="ratio" 
         style="--bs-aspect-ratio: 10%;">
        <div class="bg-success">10%</div>
    </div>
    <div class="ratio" 
         style="--bs-aspect-ratio: 40%;">
        <div class="bg-secondary">40%</div>
    </div>
</body>
</html>

Output:

Example 2: The aspect ratio can be easily changed between breakpoints thanks to this CSS variable. The following starts out as 4x3, but at the medium breakpoint, it switches to 2x1.

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/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous">
    </script>
</head>

<body>
  <div class="text-center">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h2>Bootstrap 5 Custom ratios</h2>
  </div>
  <br>
  <div class="ratio ratio-4x3">
    <div class="bg-success">4x3, then 2x1</div>
  </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/helpers/ratio/#custom-ratios

How to Customize Bootstrap 5?

harshil123

Improve

Article Tags :

Bootstrap 5 Ratio Custom Ratios

Similar Reads

Thank You!

What kind of Experience do you want to share?