is now part of
Shuffle™
. The new editor includes templates for Bulma, Bootstrap, Material-UI, and Tailwind CSS.
Switch to Shuffle →
How it works
Features
Components
Pricing
Log in
Try Demo
All Bulma CSS classes
Search
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
Bulma Editor
Bulma Components
Bulma Templates