Box

import {Box} from 'bulma-ui'

Checkout Bulma documentation.

Basic Usage

The Box component is simply a container with a shadow, a border, a radius, and some padding.

Button

import {Button} from 'bulma-ui'

Checkout Bulma documentation.

Basic Usage

Color

Size

Outlined

Inverted

Rounded

State

Static

Disabled

Card

import {Card} from 'bulma-ui'

Checkout Bulma documentation.

An all-around flexible and composable component.

Basic Usage

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

11:09 PM - 1 Jan 2016

Component

x

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

11:09 PM - 1 Jan 2016

Centered title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

Content

import {Content} from 'bulma-ui'

import {Footer} from 'bulma-ui'

import {Header} from 'bulma-ui'

Column

import {Column} from 'bulma-ui'

Checkout Bulma documentation.

Basic Usage

Each column will have an equal width, no matter the number of columns.

First column

Second column

Third column

Changing sizes

If you want to change the size of a single column, you can use one of the following modifiers:

narrow - will only take the space it needs
full - will take the entire row
1/2 - half
1/3 - one third
2/3 - two thirds
1/4 - one quarter
3/4 - three quarters
1/5 - one fifth
2/5 - two fifths
3/5 - three fifths
4/5 - four fifths
1 - one column of 12
2 - two columns of 12
3 - three columns of 12
4 - fours columns of 12
5 - five columns of 12
6 - six columns of 12
7 - seven columns of 12
8 - eight columns of 12
9 - nine columns of 12
10 - ten columns of 12
11 - eleven columns of 12

The other columns will fill up the remaining space automatically.

will only take the space it needs

Auto

will take the entire row

half

one quarter

one third

two thirds

three quarters

one quarter

one fifth

two fifths

four fifths

one fifth

one column of 12

eleven columns of 12

two columns of 12

ten columns of 12

three columns of 12

nine columns of 12

fours columns of 12

eight columns of 12

five columns of 12

seven columns of 12

six columns of 12

Offset

You can use offset to create empty column, you can use the same size from size props.

half

offset one quarter

three fifth

offset one fifth

fours columns of 12

offset eight columns

eleven columns of 12

offset one column

Responsiveness

You can define a column size and a offset for each viewport size: mobile, tablet, touch, desktop, widescreen and fullhd. You can see here a detailed comparison between the breakpoints.

Size: one half

Offset: one quarter

Mobile Size: 6 columns

Mobile Offset: 4 columns

Tablet Size: 7 columns

Tablet Offset: 5 columns

Touch Size: 11 columns

Touch Offset: 1 columns

Desktop Size: 10 columns

Desktop Offset: 2 columns

Widescreen Size: three fifths

Widescreen Offset: two fifths

Fullhd Size: one half

Fullhd Offset: one half

Columns

import {Columns} from 'bulma-ui'

Checkout Bulma documentation.

Basic Usage

First column

Second column

Third column

Centered

Single column

Mobile

By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile. If you want columns to work on mobile too, just add the isMobile prop on the Columns component.

First column

Second column

Third column

Desktop

If you only want columns on desktop upwards, just use the isDesktop prop on the Columns component.

First column

Second column

Third column

Multiline

First column

Second column

Third column

Gapless

If you want to remove the space between the columns, add the isGapless prop on the Columns component.

First column

Second column

Third column

You can combine it with the multiline columns.

First column

Second column

Third column

Variable gap

Experimental feature from Bulma only available on browsers that support CSS variables. Checkout the Bulma official documentation for more information. You can specify a custom gap from 0 to 8. 0 will remove any gap. 3 is the default value, equivalent to the 0.75rem value. 8 is the maximum gap of 2rem.

First column

Second column

Third column

First column

Second column

Third column

Container

import {Container} from 'bulma-ui'

Checkout Bulma documentation.

Basic Usage

some content

Fluid

If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the isFluid prop.

some content

Widescreen

This container is fullwidth until the $widescreen breakpoint.

some content

Fullhd

This container is fullwidth until the $fullhd breakpoint.

some content

Content

import {Content} from 'bulma-ui'

Checkout Bulma documentation.

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

<p> paragraphs
<ul> <ol> <dl> lists
<h1> to <h6> headings
<blockquote> quotes
<em> and <strong>
<table> <tr> <th> <td> tables

This content class can be used in any context where you just want to (or can only) write some text.

Hello World

Lorem ipsum^[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub_script works as well!

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

In fermentum leo eu lectus mollis, quis dictum mi aliquet.
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
Ut non enim metus.

Third level

Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

Donec blandit a lorem id convallis.
Cras gravida arcu at diam gravida gravida.
Integer in volutpat libero.
Donec a diam tellus.
Aenean nec tortor orci.
Quisque aliquam cursus urna, non bibendum massa viverra eget.
Vivamus maximus ultricies pulvinar.

Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.

Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.

Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.

Web: The part of the Internet that contains websites and web pages
HTML: A markup language for creating web pages
CSS: A technology to make HTML look better

Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.

Fourth level

Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.

 <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p> </body> </html>

Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.

One	Two
Three	Four
Five	Six
Seven	Eight
Nine	Ten
Eleven	Twelve

Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.

Fifth level

Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.

Sixth level

Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.

Sizes

Content the size prop to change the font-size.

Small Content

Lorem ipsum^[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub_script works as well!

Medium Content

Lorem ipsum^[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub_script works as well!

Large Content

Lorem ipsum^[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub_script works as well!

Delete

import {Delete} from 'bulma-ui'

Checkout Bulma documentation.

Basic Usage

Small

Medium

Large

import {Footer} from 'bulma-ui'

Checkout Bulma documentation.

Basic Usage

Body

import {Body} from 'bulma-ui'

Foot

import {Foot} from 'bulma-ui'

Head

import {Head} from 'bulma-ui'

Hero

import {Hero} from 'bulma-ui'

Checkout Bulma documentation.

An imposing hero banner to showcase something.

Basic Usage

Hero title

Hero subtitle

Colors

You can choose one of the 7 different colors:

Primary title

Primary subtitle

Info title

Info subtitle

Success title

Success subtitle

Warning title

Warning subtitle

Danger title

Danger subtitle

Light title

Light subtitle

Dark title

Dark subtitle

Gradients

By adding the isBold prop, you can generate a subtle gradient:

Primary title

Primary subtitle

Info title

Info subtitle

Success title

Success subtitle

Warning title

Warning subtitle

Danger title

Danger subtitle

Light title

Light subtitle

Dark title

Dark subtitle

Sizes

You can have even more imposing banners by using one of 3 different sizes:

Medium title

Medium subtitle

Large title

Large subtitle

Fullheight title

Fullheight subtitle

Head and Foot

You can split the hero in 3 vertical parts:

Hero.Head always at the top
Hero.Body always vertically centered
Hero.Foot always at the bottom

Head

Body

Foot

FA

import {Fa} from 'bulma-ui'

Icon

import {Icon} from 'bulma-ui'

Image

import {Image} from 'bulma-ui'

Checkout Bulma documentation.

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

Basic Usage

Images with fixed size

Images with fixed ratio

square

1by1

5by4

4by3

3by2

5by3

16by9

2by1

3by1

4by5

3by4

2by3

3by5

9by16

1by2

1by3

Input

import {Input} from 'bulma-ui'

Label

import {Label} from 'bulma-ui'

Item

import {Item} from 'bulma-ui'

Left

import {Left} from 'bulma-ui'

Level

import {Level} from 'bulma-ui'

Checkout Bulma documentation.

A multi-purpose horizontal level, which can contain almost any other element.

Basic Usage

item

Centered level

If you want a centered level, you can use as many Level.Item as you want, as long as they are direct children of the Level component.

Tweets

3,456

Following

123

Followers

456K

Likes

789

Mobile level

By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the isMobile prop on the Level component.

Tweets

3,456

Following

123

Followers

456K

Likes

789

Right

import {Right} from 'bulma-ui'

Content

import {Content} from 'bulma-ui'

Left

import {Left} from 'bulma-ui'

Media

import {Media} from 'bulma-ui'

Checkout Bulma documentation.

The famous media object prevalent in social media interfaces, but useful in any context.

Basic Usage

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

like

reply

Right

import {Right} from 'bulma-ui'

Body

import {Body} from 'bulma-ui'

Header

import {Header} from 'bulma-ui'

Message

import {Message} from 'bulma-ui'

Checkout Bulma documentation.