Learn CSS with πŸŽ“ online interactive courses,πŸ“Ί educational videos, and πŸ§‘πŸ»β€πŸ’»project-building tutorials.
Download

Sponsor

Route Planner and Route Optimizer

Image


A container for responsive images

Because images can take a few seconds to load (or not at all), use the image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

Example

HTML

<figure class="image is-128x128">
  <img src="https://bulma.io/assets/images/placeholders/128x128.png" />
</figure>

Fixed square images #

There are 7 dimensions to choose from, useful for avatars:

image is-16x16
16x16px
image is-24x24
24x24px
image is-32x32
32x32px
image is-48x48
48x48px
image is-64x64
64x64px
image is-96x96
96x96px
image is-128x128
128x128px

Rounded images #

You can also make rounded images, using is-rounded class:

Example

HTML

<figure class="image is-128x128">
  <img class="is-rounded" src="https://bulma.io/assets/images/placeholders/128x128.png" />
</figure>

Retina images #

Because the image is fixed in size, you can use an image that is four times as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

Example

HTML

<figure class="image is-128x128">
  <img src="https://bulma.io/assets/images/placeholders/256x256.png" />
</figure>

Responsive images with ratios #

If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include common aspect ratios in still photography:

image is-square
Square (or 1 by 1)
image is-1by1
1 by 1
image is-5by4
5 by 4
image is-4by3
4 by 3
image is-3by2
3 by 2
image is-5by3
5 by 3
image is-16by9
16 by 9
image is-2by1
2 by 1
image is-3by1
3 by 1
image is-4by5
4 by 5
image is-3by4
3 by 4
image is-2by3
2 by 3
image is-3by5
3 by 5
image is-9by16
9 by 16
image is-1by2
1 by 2
image is-1by3
1 by 3

The only requirement is for the parent element to already have a specific width.

The image container will usually take up the whole width while maintaining the perfect ratio.
If it doesn't, you can force it by appending the is-fullwidth modifier.

Arbitrary ratios with any element #

You can apply a specific ratio on any element other than an img, simply by applying the has-ratio modifier to a resizable element.

For example, you can apply a 16by9 ratio on an iframe. Resize the browser, and you'll see how the ratio is maintained.

Example

HTML

<figure class="image is-16by9">
  <iframe
    class="has-ratio"
    width="640"
    height="360"
    src="https://www.youtube.com/embed/YE7VzlLtp-4"
    frameborder="0"
    allowfullscreen
  ></iframe>
</figure>

Sass and CSS variables #

Sass Variable
Value
$dimensions
16 24 32 48 64 96 128

How to support Bulma

#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free