Ratios

Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.

About

Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s. These helpers also can be used on any standard HTML child element (e.g., a <div> or <img>). Styles are applied from the parent .ratio class directly to the child.

You don't need to include frameborder="0" in your iframes.

Example

Result

Loading...

Live Editor

import Ratio from 'react-bootstrap/Ratio'; function BasicExample() { return ( <div style={{ width: 660, height: 'auto' }}> <Ratio aspectRatio="16x9"> <embed type="image/svg+xml" src="/img/TheresaKnott_castle.svg" /> </Ratio> </div> ); } export default BasicExample;

import Ratio from 'react-bootstrap/Ratio';

function BasicExample() {
  return (
    <div style={{ width: 660, height: 'auto' }}>
      <Ratio aspectRatio="16x9">
        <embed type="image/svg+xml" src="/img/TheresaKnott_castle.svg" />
      </Ratio>
    </div>
  );
}

export default BasicExample;

Aspect ratios

Aspect ratios can be customized using aspectRatio. By default the following aspectRatio values are provided:

Result

Loading...

Live Editor

import Ratio from 'react-bootstrap/Ratio'; function DefaultExample() { return ( <> {['1x1', '4x3', '16x9', '21x9'].map((ratio) => ( <Ratio key={ratio} aspectRatio={ratio}> <div>{ratio}</div> </Ratio> ))} </> ); } export default DefaultExample;

import Ratio from 'react-bootstrap/Ratio';

function DefaultExample() {
  return (
    <>
      {['1x1', '4x3', '16x9', '21x9'].map((ratio) => (
        <Ratio key={ratio} aspectRatio={ratio}>
          <div>{ratio}</div>
        </Ratio>
      ))}
    </>
  );
}

export default DefaultExample;

Custom

Create custom aspect ratios by passing a number to aspectRatio instead of using the above pre-defined values. You can use either a fraction or percentage to define the custom ratio.

Result

Loading...

Live Editor

import Ratio from 'react-bootstrap/Ratio'; function CustomExample() { return ( <> <Ratio aspectRatio={1 / 2}> <div>2x1</div> </Ratio> <Ratio aspectRatio={50}> <div>2x1</div> </Ratio> </> ); } export default CustomExample;

import Ratio from 'react-bootstrap/Ratio';

function CustomExample() {
  return (
    <>
      <Ratio aspectRatio={1 / 2}>
        <div>2x1</div>
      </Ratio>
      <Ratio aspectRatio={50}>
        <div>2x1</div>
      </Ratio>
    </>
  );
}

export default CustomExample;

API

Ratio