Hit enter after type your search item

What is Bulma Box?

A box is an element in Bulma framework that is used to contain other elements e.g. text, images, buttons, etc.

Bulma box is simply a container with the following properties:

  • A border
  • Radius
  • Some padding
  • A shadow

How to create a box in Bulma?

A Bulma box can be created by using the box modifier in the main container (a div element etc.). Then you may use various content elements like a paragraph, span, images, etc.

The example below shows a simple box with a paragraph, tags in Bulma, a few font-awesome icons:

bulma box

See online demo and code

Another example with three boxes

Now see the example below with three boxes with different elements for contents.

See online demo and code

Customizing the box

You may customize the look of the box by using Saas variables. The following variables are available for box element:

  • $box-background-color
  • $box-color
  • $box-radius
  • $box-shadow
  • $box-padding
  • $box-link-hover-shadow
  • $box-link-active-shadow

To learn how to customize box and other Bulma elements, go to this section here.

This div height required for enabling the sticky sidebar