How it works
Features
Purchase
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
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
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-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-light
.has-background-link
.has-background-primary
.has-background-success
.has-background-warning
.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-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-light
.has-text-link
.has-text-primary
.has-text-success
.has-text-warning
.has-text-white
.has-text-white-bis
.has-text-white-ter
Column
.column
.columns
.columns.is-centered
.columns.is-gapless
.columns.is-mobile
.columns.is-multiline
.columns.is-variable
.columns.is-vcentered
Containers
.box
.container
.content
.footer
.section
Delete
.delete
Dropdown
.dropdown
.dropdown-content
.dropdown-divider
.dropdown-item
.dropdown-menu
.dropdown.is-active
.dropdown.is-right
.dropdown.is-up
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
.input
.input.is-rounded
.input.is-static
.radio
.select
.textarea
.textarea.has-fixed-size
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
.icon
Images
.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
.list
.list-item
.list-item.is-active
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
.navbar
.navbar-brand
.navbar-burger
.navbar-divider
.navbar-dropdown
.navbar-item
.navbar-link
.navbar-menu
.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
Table
.table
.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-justified
.has-text-left
.has-text-right
.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-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-*
Create Bulma templates in minutes.
Try Demo