Bulma CSS Classes

General

Bulma components

Bulma templates

Bulma editor

Breadcrumb

breadcrumb

breadcrumb.has-arrow-separator

breadcrumb.has-bullet-separator

breadcrumb.has-dot-separator

breadcrumb.has-succeeds-separator

breadcrumb.is-centered

breadcrumb.is-large

breadcrumb.is-medium

breadcrumb.is-right

breadcrumb.is-small

has-succeeds-separator
Button

button

button.is-black

button.is-danger

button.is-dark

button.is-fullwidth

button.is-info

button.is-large

button.is-light

button.is-link

button.is-loading

button.is-medium

button.is-normal

button.is-primary

button.is-rounded

button.is-small

button.is-static

button.is-success

button.is-text

button.is-warning

button.is-white

buttons

buttons.has-addons

buttons.is-centered

buttons.is-right

is-hovered

is-outlined
Card

card

card-content

card-footer

card-footer-item

card-header

card-header-icon

card-header-title

card-header-title.is-centered

card-image
Colors

has-background-black

has-background-black-bis

has-background-black-ter

has-background-danger

has-background-danger-dark

has-background-danger-light

has-background-dark

has-background-dark

has-background-grey

has-background-grey-dark

has-background-grey-darker

has-background-grey-light

has-background-grey-lighter

has-background-info

has-background-info-dark

has-background-info-light

has-background-light

has-background-link

has-background-link-dark

has-background-link-light

has-background-primary

has-background-primary-dark

has-background-primary-light

has-background-success

has-background-success-dark

has-background-success-light

has-background-warning

has-background-warning-dark

has-background-warning-light

has-background-white

has-background-white-bis

has-background-white-ter

has-text-black

has-text-black-bis

has-text-black-ter

has-text-danger

has-text-danger-dark

has-text-danger-light

has-text-dark

has-text-grey

has-text-grey-dark

has-text-grey-darker

has-text-grey-light

has-text-grey-lighter

has-text-info

has-text-info-dark

has-text-info-light

has-text-light

has-text-link

has-text-link-dark

has-text-link-light

has-text-primary

has-text-primary-dark

has-text-primary-light

has-text-success

has-text-success-dark

has-text-success-light

has-text-warning

has-text-warning-dark

has-text-warning-light

has-text-white

has-text-white-bis

has-text-white-ter

is-info

is-inverted

is-transparent
Column

column

columns

columns.is-centered

columns.is-gapless

columns.is-mobile

columns.is-multiline

columns.is-variable

columns.is-vcentered
Container

is-fluid
Containers

box

container

content

footer

section
Delete

delete
Display

block

is-block-desktop

is-block-desktop-only

is-block-fullhd

is-block-mobile

is-block-tablet

is-block-tablet-only

is-block-touch

is-block-widescreen

is-block-widescreen-only

is-flex-desktop

is-flex-desktop-only

is-flex-fullhd

is-flex-mobile

is-flex-tablet

is-flex-tablet-only

is-flex-touch

is-flex-widescreen

is-flex-widescreen-only

is-hidden-desktop

is-hidden-desktop-only

is-hidden-fullhd

is-hidden-mobile

is-hidden-tablet

is-hidden-tablet-only

is-hidden-touch

is-hidden-widescreen

is-hidden-widescreen-only

is-inline-block-desktop

is-inline-block-desktop-only

is-inline-block-fullhd

is-inline-block-mobile

is-inline-block-tablet

is-inline-block-tablet-only

is-inline-block-touch

is-inline-block-widescreen

is-inline-block-widescreen-only

is-inline-desktop

is-inline-desktop-only

is-inline-flex-desktop

is-inline-flex-desktop-only

is-inline-flex-fullhd

is-inline-flex-mobile

is-inline-flex-tablet

is-inline-flex-tablet-only

is-inline-flex-touch

is-inline-flex-widescreen

is-inline-flex-widescreen-only

is-inline-fullhd

is-inline-mobile

is-inline-tablet

is-inline-tablet-only

is-inline-touch

is-inline-widescreen

is-inline-widescreen-only

is-invisible-desktop

is-invisible-desktop-only

is-invisible-fullhd

is-invisible-mobile

is-invisible-tablet

is-invisible-tablet-only

is-invisible-touch

is-invisible-widescreen

is-invisible-widescreen-only
Dropdown

dropdown

dropdown-content

dropdown-divider

dropdown-item

dropdown-menu

dropdown.is-active

dropdown.is-right

dropdown.is-up

is-hoverable
Field

field

field-body

field-label

field.has-addons

field.has-addons.has-addons-centered

field.has-addons.has-addons-fullwidth

field.has-addons.has-addons-right

field.is-grouped

field.is-grouped.is-grouped-centered

field.is-grouped.is-grouped-multiline

field.is-grouped.is-grouped-right
File

file

file-cta

file-icon

file-input

file-label

file-name

file.has-name

file.has-name.is-empty

file.is-boxed

file.is-boxed.has-name

file.is-centered

file.is-fullwidth

file.is-right
Forms

checkbox

control

control.has-icons-left

control.has-icons-right

control.is-loading

has-name

input

input.is-rounded

input.is-static

is-expanded

is-focused

is-horizontal

is-left

is-multiple

is-normal

is-right

radio

select

textarea

textarea.has-fixed-size
Grid

is-0

is-0-desktop

is-0-desktop-only

is-0-fullhd

is-0-mobile

is-0-tablet

is-0-tablet-only

is-0-touch

is-0-widescreen

is-0-widescreen-only

is-desktop

is-four-fifths

is-four-fifths-desktop

is-four-fifths-fullhd

is-four-fifths-mobile

is-four-fifths-touch

is-four-fifths-widescreen

is-full

is-full-desktop

is-full-mobile

is-full-tablet

is-full-touch

is-full-widescreen

is-half

is-half-desktop

is-half-fullhd

is-half-mobile

is-half-tablet

is-half-touch

is-half-widescreen

is-narrow

is-narrow-desktop

is-narrow-fullhd

is-narrow-mobile

is-narrow-tablet

is-narrow-touch

is-narrow-widescreen

is-offset-0

is-offset-0-desktop

is-offset-0-fullhd

is-offset-0-fullhd

is-offset-0-mobile

is-offset-0-tablet

is-offset-0-touch

is-offset-0-widescreen

is-offset-1

is-offset-1-desktop

is-offset-1-mobile

is-offset-1-tablet

is-offset-1-touch

is-offset-1-widescreen

is-offset-four-fifths

is-offset-four-fifths-desktop

is-offset-four-fifths-fullhd

is-offset-four-fifths-mobile

is-offset-four-fifths-tablet

is-offset-four-fifths-touch

is-offset-four-fifths-widescreen

is-offset-half

is-offset-half-desktop

is-offset-half-fullhd

is-offset-half-mobile

is-offset-half-tablet

is-offset-half-touch

is-offset-half-widescreen

is-offset-one-fifth

is-offset-one-fifth-desktop

is-offset-one-fifth-fullhd

is-offset-one-fifth-mobile

is-offset-one-fifth-tablet

is-offset-one-fifth-touch

is-offset-one-fifth-widescreen

is-offset-one-quarter

is-offset-one-quarter-desktop

is-offset-one-quarter-fullhd

is-offset-one-quarter-mobile

is-offset-one-quarter-tablet

is-offset-one-quarter-touch

is-offset-one-quarter-widescreen

is-offset-one-third

is-offset-one-third-desktop

is-offset-one-third-fullhd

is-offset-one-third-mobile

is-offset-one-third-tablet

is-offset-one-third-touch

is-offset-one-third-widescreen

is-offset-three-fifths

is-offset-three-fifths-desktop

is-offset-three-fifths-fullhd

is-offset-three-fifths-mobile

is-offset-three-fifths-tablet

is-offset-three-fifths-touch

is-offset-three-fifths-widescreen

is-offset-three-quarters

is-offset-three-quarters-desktop

is-offset-three-quarters-fullhd

is-offset-three-quarters-mobile

is-offset-three-quarters-tablet

is-offset-three-quarters-touch

is-offset-three-quarters-widescreen

is-offset-two-fifths

is-offset-two-fifths-desktop

is-offset-two-fifths-fullhd

is-offset-two-fifths-mobile

is-offset-two-fifths-tablet

is-offset-two-fifths-touch

is-offset-two-fifths-widescreen

is-offset-two-thirds

is-offset-two-thirds-desktop

is-offset-two-thirds-desktop-mobile

is-offset-two-thirds-desktop-tablet

is-offset-two-thirds-desktop-touch

is-offset-two-thirds-desktop-widescreen

is-offset-two-thirds-fullhd

is-one-fifth

is-one-fifth-desktop

is-one-fifth-fullhd

is-one-fifth-mobile

is-one-fifth-tablet

is-one-fifth-touch

is-one-fifth-widescreen

is-one-quarter

is-one-quarter-desktop

is-one-quarter-fullhd

is-one-quarter-mobile

is-one-quarter-tablet

is-one-quarter-touch

is-one-quarter-widescreen

is-one-third

is-one-third-desktop

is-one-third-fullhd

is-one-third-mobile

is-one-third-tablet

is-one-third-touch

is-one-third-widescreen

is-three-fifths

is-three-fifths-desktop

is-three-fifths-fullhd

is-three-fifths-mobile

is-three-fifths-tablet

is-three-fifths-touch

is-three-fifths-widescreen

is-three-quarters

is-three-quarters-desktop

is-three-quarters-fullhd

is-three-quarters-mobile

is-three-quarters-tablet

is-three-quarters-touch

is-three-quarters-widescreen

is-two-fifths

is-two-fifths-desktop

is-two-fifths-fullhd

is-two-fifths-mobile

is-two-fifths-tablet

is-two-fifths-touch

is-two-fifths-widescreen

is-two-thirds

is-two-thirds-desktop

is-two-thirds-fullhd

is-two-thirds-mobile

is-two-thirds-tablet

is-two-thirds-touch

is-two-thirds-widescreen

is-variable

is-widescreen
Help

help
Helpers

is-clearfix

is-clipped

is-hidden

is-invisible

is-marginless

is-overlay

is-paddingless

is-pulled-left

is-pulled-right

is-radiusless

is-relative

is-shadowless

is-sr-only

is-unselectable
Hero

hero

hero-body

hero-foot

hero-head

hero-video

hero.is-fullheight

hero.is-fullheight-with-navbar

hero.is-halfheight

hero.is-small
Icon

has-icons-left

has-icons-right

icon
Images

has-ratio

image

image.is-128x128

image.is-16by9

image.is-16x16

image.is-1by1

image.is-1by2

image.is-1by3

image.is-24x24

image.is-2by1

image.is-2by3

image.is-32x32

image.is-3by1

image.is-3by2

image.is-3by4

image.is-3by5

image.is-48x48

image.is-4by3

image.is-4by5

image.is-5by3

image.is-5by4

image.is-64x64

image.is-96x96

image.is-9by16

image.is-square
Label

label

label.is-large

label.is-medium

label.is-small
Level

level

level-item

level-left

level-right

level.is-mobile
List

is-lower-alpha

is-lower-roman

is-upper-alpha

is-upper-roman

list

list-item

list-item.is-active
Loader

loader
Media

media

media-content

media-left

media-right

media.is-large
Menu

menu

menu-label

menu-list

menu.is-large

menu.is-medium

menu.is-small
Message

message

message-body

message-header
Modal

modal

modal-background

modal-card

modal-card-body

modal-card-foot

modal-card-head

modal-card-title

modal-close

modal-content

modal.is-active
Navbar

is-arrowless

navbar

navbar-brand

navbar-burger

navbar-divider

navbar-dropdown

navbar-end

navbar-item

navbar-link

navbar-menu

navbar-start

navbar.has-shadow

navbar.is-black

navbar.is-danger

navbar.is-dark

navbar.is-fixed-bottom

navbar.is-fixed-top

navbar.is-info

navbar.is-light

navbar.is-link

navbar.is-primary

navbar.is-success

navbar.is-warning

navbar.is-white
Notification

notification
Pagination

pagination

pagination-ellipsis

pagination-link

pagination-link.is-current

pagination-list

pagination-next

pagination-previous

pagination.is-rounded
Panel

panel

panel-block

panel-heading

panel-icon

panel-list

panel-tabs
Progress bar

progress
Responsive helpers

is-block

is-flex

is-inline

is-inline-block

is-inline-flex
Sizing

are-large

are-medium

are-small

is-fullheight

is-fullheight-with-navbar

is-fullwidth

is-small
Spacing

is-size-1

mb-0

ml-0

mr-0

mt-0

mx-0

my-0

pb-0

pl-0

pr-0

pt-0

py-0
Table

is-selected

table

table-container

table.is-bordered

table.is-fullwidth

table.is-hoverable

table.is-hoverable.is-striped

table.is-narrow

table.is-striped
Tabs

tabs

tabs.is-boxed

tabs.is-centered

tabs.is-fullwidth

tabs.is-large

tabs.is-medium

tabs.is-right

tabs.is-small

tabs.is-toggle

tabs.is-toggle.is-toggle-rounded
Tags

tag

tags

tags.are-large

tags.are-medium

tags.has-addons

tags.is-centered

tags.is-right
Text utilities

has-text-centered

has-text-centered-desktop

has-text-centered-desktop-only

has-text-centered-fullhd

has-text-centered-mobile

has-text-centered-tablet

has-text-centered-tablet-only

has-text-centered-tablet-widescreen

has-text-centered-tablet-widescreen-only

has-text-centered-touch

has-text-justified

has-text-justified-desktop

has-text-justified-desktop-only

has-text-justified-fullhd

has-text-justified-fullhd

has-text-justified-mobile

has-text-justified-mobile

has-text-justified-tablet

has-text-justified-tablet-only

has-text-justified-touch

has-text-justified-widescreen

has-text-justified-widescreen-only

has-text-left

has-text-left-desktop

has-text-left-desktop-only

has-text-left-fullhd

has-text-left-mobile

has-text-left-tablet-only

has-text-left-touch

has-text-left-widescreen

has-text-left-widescreen-only

has-text-right

has-text-right-desktop

has-text-right-desktop-only

has-text-right-fullhd

has-text-right-mobile

has-text-right-tablet

has-text-right-tablet-only

has-text-right-touch

has-text-right-widescreen

has-text-right-widescreen-only

has-text-weight-bold

has-text-weight-light

has-text-weight-medium

has-text-weight-normal

has-text-weight-semibold

heading

highlight

is-capitalized

is-family-code

is-family-monospace

is-family-primary

is-family-sans-serif

is-family-secondary

is-italic

is-lowercase

is-size-*

is-size-1-desktop

is-size-1-fullhd

is-size-1-mobile

is-size-1-tablet

is-size-1-touch

is-size-1-widescreen

is-spaced

is-uppercase

number
Tile

tile

tile.is-ancestor

tile.is-child

tile.is-parent

tile.is-vertical
Title and Subtitle

subtitle

subtitle.is-*

title

title.is-*

Bulma CSS class .image.is-3by1

                    <figure class="image is-3by1">
  <img src="https://bulma.io/images/placeholders/720x240.png">
</figure>
                

Preview

Are you tired of writing HTML by hand?

More Bulma CSS classes in Images category

.image

.image.is-16x16

.image.is-24x24

.image.is-32x32

.image.is-48x48

.image.is-64x64

.image.is-96x96

.image.is-128x128

.image.is-square

.image.is-1by1

.image.is-5by4

.image.is-4by3

.image.is-3by2

.image.is-5by3

.image.is-16by9

.image.is-2by1

.image.is-3by1

.image.is-4by5

.image.is-3by4

.image.is-2by3

.image.is-3by5

.image.is-9by16

.image.is-1by2

.image.is-1by3

.has-ratio

An online editor for busy developers.

Combine elements and styles to create an entirely new UI Library!

Supporting tools

Plans

Bulma CSS Classes

Bulma CSS class .image.is-3by1

Preview

Are you tired of writing HTML by hand?

More Bulma CSS classes in Images category

Products

UI Components

Company

Legal

Shuffle's Editors

Combine elements and styles to create an entirely new UI Library!

Supporting tools

Plans

Shuffle’s design systems

Bulma

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bulma CSS Classes

Bulma CSS class .image.is-3by1

Preview

Are you tired of writing HTML by hand?

More Bulma CSS classes in Images category

Products

UI Components

Company

Legal