Open In App

Bootstrap 5 Ratios

Last Updated : 10 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 provides ratios, which can be used to create fixed-ratio containers. These containers maintain a specific aspect ratio, regardless of the size of the screen or the content within them.

Bootstrap 5 Ratios:

  • Aspect ratio: The proportionality between an element’s height and breadth is known as an aspect ratio. Aspect ratios are useful when we use videos, images, etc. The height-width relationship stays the same, as defined, regardless of the width. By default, the four aspect ratios are set in Bootstrap 5.
  • Custom Ratio: We can use bootstrap 5 custom ratios to set the aspect ratio using a CSS custom property. Components can have unique aspect ratios by simply substituting CSS variables for modifier classes. A CSS custom property or variable is present in the selector for each ratio-* class.
  • SASS map: Syntactically awesome stylesheet is used to customize the aspect ratio values. $aspect-ratios is used to customize the aspect ratio values.

Example 1: In this example, we will demonstrate bootstrap 5 aspect ratios.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8"
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link href=
        rel="stylesheet">
    <link href=
        rel="stylesheet">
    <script src=
    </script>
</head>
  
<body class="p-3 m-2 mt-4 text-center shadow 
        bd-example bd-example-ratios">
  
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap 5 Ratios</h3>
    <div class="ratio ratio-1x1 bg-primary">
        <h1 class="text-success">GFG</h1>
    </div>
    <div class="ratio ratio-4x3 bg-info">
        <h1 class="text-success">GFG</h1>
    </div>
    <div class="ratio ratio-16x9 bg-secondary">
        <h1 class="text-success">GFG</h1>
    </div>
</body>
</html>


Output:

bootstrap 5 ratios

Example 2: In this example, we will demonstrate bootstrap 5 Custom ratios.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link href=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
      
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>
  
<body class="m-3" style="width:540px">
    <center>
        <div>
            <h1 class="text-success">GeeksforGeeks</h1>
            <h2>Bootstrap 5 ratios</h2>
        </div>
        <br>
        <div class="ratio" style="--bs-aspect-ratio:30%;">
            <div class="bg-info">
                <h1>GFG</h1>
                <p>30%</p>
            </div>
        </div>
        <div class="ratio" style="--bs-aspect-ratio:50%;">
            <div class="bg-primary">
                <h1>GFG</h1>
                <p>50%</p>
            </div>
        </div>
    </center>
</body>
  
</html>


Output:

bootstrap 5 ratios

Reference: https://getbootstrap.com/docs/5.0/helpers/ratio/



Previous Article
Next Article

Similar Reads

Bootstrap 5 Aspect ratios
Bootstrap 5 Aspect ratios simply refer to the proportionality between an element's height and width. The aspect ratios are responsible and useful while handling the widths and heights of embedded items, videos, images, etc. Regardless of the width, the height-width relation remains the same as specified. In Bootstrap 5, by default, the four aspect
2 min read
Bootstrap 5 Ratio Custom Ratios
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 pixelsratio-4x3: 1024x768 pixelsratio-16x9: 1920x10
2 min read
Bootstrap 5 Ratios SASS Map
Ratios Sass map in Bootstrap 5 is a default list of aspect ratios. You can modify the aspect ratios you want to use. Bootstrap 5 Ratios Sass map variables of  Ratios: $ratio : This variable defines the percentage for 1x1, 4x3, 16x9, 21x9. Steps to override SCSS of Bootstrap: Step 1: Install bootstrap using the following command npm i bootstrap Step
2 min read
React Bootstrap Ratios Utilities
React Bootstrap provides the facility to create responsive and visually appealing layouts. One such feature is the Ratios Utilities, which allows you to easily manage aspect ratios for your components. In this article, we will learn about React Bootstrap Ratios Utilities and explore how they can be used to enhance the design and responsiveness of w
3 min read
Bulma Arbitrary ratios with any Element
In this article, we'll see Bulma Arbitrary Ratio with different elements. The Arbitrary ratios can be used on any element like iframe, etc. To use the arbitrary ratio, just use the has-ratio modifier to the class in which you want to set the ratio. Like you can apply 16by9 ratio class on an iframe or img element. By using this modifier, the user ca
3 min read
Bulma Responsive images with ratios
Bulma is a free, open-source CSS framework based on Flexbox to build beautiful responsive websites. In this article, we'll see Bulma responsive images with ratios. We can use images using the Bulma framework in our web application with specific sizes as the user wants but what if the user doesn't know much about sizes or the dimensions to use in an
4 min read
Foundation CSS Responsive Embed Aspect Ratios
Foundation CSS is an open-source &amp; responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily cus
3 min read
Include Bootstrap in AngularJS using ng-bootstrap
AngularJS can be integrated with Bootstrap CSS and Javascript and can be used to create creative forms, tables, navigation bars, etc. Steps: Make sure the Angular CLI present in your system if not then run the command in the terminal to do so. npm install -g @angular/cli Create a new project on visual studio code by running the code ng new project-
2 min read
Difference between bootstrap.css and bootstrap-theme.css
Bootstrap is an HTML, CSS and JS front-end-framework used for developing responsive and mobile-first projects on the web. It is the framework that comes up with predefined terms, thus giving you the ability to use these codes instead of having to create the codes from scratch. It is a collection of HTML, CSS and JS code that is designed to help bui
5 min read
Difference Between Bootstrap 3 and Bootstrap 4
Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used to design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript. It can create web applications with any server-side Technology like Java, PHP,
2 min read