Custom components

Ratio

Basic example

Default (1:1)

<div class="ratio">
  <div>
    <img src="…" alt="…" />
  </div>
</div>

Proportions

Ratio Class Orientation
5:1 ratio-5-1 Horizontal
3:1 ratio-3-1
5:2 ratio-5-2
2:1 ratio-2-1
16:9 ratio-16-9
3:2 ratio-3-2
4:3 ratio-4-3
5:4 ratio-5-4
1:1 ratio-1-1 Proportional (square)
4:5 ratio-4-5 Vertical
3:4 ratio-3-4
2:3 ratio-2-3
1:2 ratio-1-2
4:3
3:2
16:9
<div class="ratio ratio-4-3">
  <div>
    <img src="…" alt="…" />
  </div>
</div>

<div class="ratio ratio-3-2">
  <div>
    <img src="…" alt="…" />
  </div>
</div>

<div class="ratio ratio-16-9">
  <div>
    <img src="…" alt="…" />
  </div>
</div>

Breakpoints

Breakpoint XSand above SMand above MDand above LGand above XLand above XXLand above
Main class ratio ratio-sm ratio-md ratio-lg ratio-xl ratio-xxl
Ratio 5:1 ratio-5-1 ratio-sm-5-1 ratio-md-5-1 ratio-lg-5-1 ratio-xl-5-1 ratio-xxl-5-1
3:1 ratio-3-1 ratio-sm-3-1 ratio-md-3-1 ratio-lg-3-1 ratio-xl-3-1 ratio-xxl-3-1
5:2 ratio-5-2 ratio-sm-5-2 ratio-md-5-2 ratio-lg-5-2 ratio-xl-5-2 ratio-xxl-5-2
2:1 ratio-2-1 ratio-sm-2-1 ratio-md-2-1 ratio-lg-2-1 ratio-xl-2-1 ratio-xxl-2-1
16:9 ratio-16-9 ratio-sm-16-9 ratio-md-16-9 ratio-lg-16-9 ratio-xl-16-9 ratio-xxl-16-9
3:2 ratio-3-2 ratio-sm-3-2 ratio-md-3-2 ratio-lg-3-2 ratio-xl-3-2 ratio-xxl-3-2
4:3 ratio-4-3 ratio-sm-4-3 ratio-md-4-3 ratio-lg-4-3 ratio-xl-4-3 ratio-xxl-4-3
5:4 ratio-5-4 ratio-sm-5-4 ratio-md-5-4 ratio-lg-5-4 ratio-xl-5-4 ratio-xxl-5-4
1:1 ratio-1-1 ratio-sm-1-1 ratio-md-1-1 ratio-lg-1-1 ratio-xl-1-1 ratio-xxl-1-1
4:5 ratio-4-5 ratio-sm-4-5 ratio-md-4-5 ratio-lg-4-5 ratio-xl-4-5 ratio-xxl-4-5
3:4 ratio-3-4 ratio-sm-3-4 ratio-md-3-4 ratio-lg-3-4 ratio-xl-3-4 ratio-xxl-3-4
2:3 ratio-2-3 ratio-sm-2-3 ratio-md-2-3 ratio-lg-2-3 ratio-xl-2-3 ratio-xxl-2-3
1:2 ratio-1-2 ratio-sm-1-2 ratio-md-1-2 ratio-lg-1-2 ratio-xl-1-2 ratio-xxl-1-2

How to use?

Breakpoint XS SM MD LG XL XXL
Ratio 4:5 1:1 1:1from SM 1:1from SM 3:2 5:2
Main class ratio
Classes ratio-4-5 ratio-sm-1-1 none none ratio-xl-3-2 ratio-xxl-5-2
<div class="ratio ratio-4-5 ratio-sm-1-1 ratio-xl-3-2 ratio-xxl-5-2">
  <div>
    <img src="…" alt="…" />
  </div>
</div>

Set on a specific breakpoint

Breakpoint XS SM MD LG XL XXL
Ratio n/aoriginal proportions 4:3 3:2 16:9
Main class ratio-lg
Classes ratio-lg-4-3 ratio-xl-3-2 ratio-xxl-16-9
<div class="ratio-lg ratio-lg-4-3 ratio-xl-3-2 ratio-xxl-16-9">
  <div>
    <img src="…" alt="…" />
  </div>
</div>

Youtube example(video ratio 16:9)

<div class="ratio ratio-16-9">
  <iframe
    allowfullscreen="" frameborder="0"
    src="…"
    width="1920" height="1080"
  ></iframe>
</div>

<div class="ratio ratio-16-9">
  <div>
    <div>
      <iframe
        allowfullscreen="" frameborder="0"
        src="…"
        width="1920" height="1080"
      ></iframe>
    </div>
  </div>
</div>

Proportional cards

Heading

Sed nec dolor eu nibh rhoncus convallis in in lacus. Donec efficitur purus lacus. Phasellus odio erat, volutpat sit amet viverra in, efficitur eu quam. Curabitur ac metus a lorem eleifend cursus ut eu tellus. Maecenas accumsan nibh quis neque volutpat, nec ornare enim ultrices. Maecenas et nisi id leo placerat tristique pharetra vitae nunc. Quisque id aliquam ipsum. 

Heading

Sed nec dolor eu nibh rhoncus convallis in in lacus. Donec efficitur purus lacus. Phasellus odio erat, volutpat sit amet viverra in, efficitur eu quam. Curabitur ac metus a lorem eleifend cursus ut eu tellus.

<div class="bg-white border rounded-0">
  <div class="ratio ratio-1-2 ratio-sm-4-3 ratio-md-1-2 ratio-lg-3-2 ratio-xl-2-1 ratio-xxl-4-5">
    <div>
      <div class="p-4 p-md-5 w-100">
        <h1 class="display-4 mb-3">Heading</h1>
        <p class="mb-0">…</p>
      </div>
    </div>
  </div>
</div>

Content align

Middle (default)

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Top

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Bottom

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

Between

Heading

Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="ratio bg-white">
  <div>
    <div class="p-4 w-100">
      <h1>…</h1>
      <p>…</p>
    </div>
  </div>
</div>

<div class="ratio bg-white">
  <div class="align-items-start">
    <div class="p-4 w-100">
      <h1>…</h1>
      <p>…</p>
    </div>
  </div>
</div>

<div class="ratio bg-white">
  <div class="align-items-end">
    <div class="p-4 w-100">
      <h1>…</h1>
      <p>…</p>
    </div>
  </div>
</div>

<div class="ratio bg-white">
  <div class="flex-column justify-content-between">
    <div class="p-4 w-100">
      <h1>…</h1>
    </div>
    <div class="p-4 w-100">
      <p class="lead mb-0">…</p>
    </div>
  </div>
</div>

Proportional images

With ratio

Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Default card view

Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Horizontal cards

Card title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Last updated 3 mins ago

Card title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Last updated 3 mins ago

Card title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Last updated 3 mins ago

Card title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Last updated 3 mins ago

Videos list

Samurai Japanese Lofi HipHop Mix

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Last updated 3 mins ago

Return of the Boom Bap (Vol.3)

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Last updated 3 mins ago

Project Footer

Project Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.