Bootstrap – Ratio


Bootstrap – Ratio



”;


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: