Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Aspect Ratio

❮ Previous

Next ❯

Bootstrap 5 introduced Aspect Ratio utilities to maintain consistent proportions for elements like images, videos, or containers.


Syntax:

ratio-{type}
  • ratio: Indicates display.
  • type : Defines the ratio type (e.g., 1x1 : 1:1, 4x3 : 4:3, 16x9 : 16:9, 21x9 : 21:9).

Class

Description

ratio-1x1

Square (1:1 aspect)

ratio-4x3

Standard (4:3 aspect)

ratio-16x9

Widescreen (16:9)

ratio-21x9

Ultra-wide (21:9)
Aspect ration 1:1
Placeholder Image
Aspect ration 4:3
Placeholder Image
Aspect ration 16:9
Placeholder Image
Aspect ration 21:9
Placeholder Image
Example
<div class="ratio ratio-4x3">
<img src="/images/assets/150.png" alt="Placeholder Image" class="img-fluid">
</div>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.