You are viewing the deprecated 0.9.0 version of the website. Click here to view the latest version

Image

A container for responsive images

Colors No
Sizes No
Variables Yes

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.

<figure class="image is-128x128">
  <img src="https://versions.bulma.io/0.9.0/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:

<figure class="image is-128x128">
  <img class="is-rounded" src="https://versions.bulma.io/0.9.0/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.

<figure class="image is-128x128">
  <img src="https://versions.bulma.io/0.9.0/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 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 #

Since 0.7.4

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.

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

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Type Default value Computed value
Name Type Default value Computed value
$dimensions string 16 24 32 48 64 96 128

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!