Everything you need to create a website with Bulma


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.

<figure class="image is-128x128">
  <img src="">

Fixed square images

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

image is-16x16
image is-24x24
image is-32x32
image is-48x48
image is-64x64
image is-96x96
image is-128x128

Retina images

Because the image is fixed in size, you can use an image that is twice 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="">

Responsive images with ratios

If you don't know the exact dimensions but know the ratio instead, you can use one of the 5 ratio modifers:

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

The .image container will take up the whole width while maintaining the perfect ratio.

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!