CSS reference

This is the CSS reference section. You will find here the most important element classes and their related modifiers.

Layout

Grid system

Columns

Main class	Modifier	Effects
`.columns`	`is-vcentered`	Centers nested `column` elements vertically using flexbox
	`is-multiline`	Makes the nested columns wrap into a new row when the end of the current row is reached
	`is-mobile`	Prevents columns from stacking on mobile devices
	`is-gapless`	Removes padding from children columns

Column

Main class	Modifier	Effects
`.column`	`is-half`	Makes the column take half of the available space
	`is-one-third`	Makes the column take 1/3 of the available space
	`is-two-thirds`	Makes the column take 2/3 of the available space
	`is-one-quarter`	Makes the column take 1/4 of the available space
	`is-*1-12`	Makes the column take an amount of space corresponding to the specified number between 1 and 12

Responsive helpers

Display helpers

Main class	Modifier	Effects
`.*`	`is-flex-mobile`	Sets display to flex for the target element when device width is < 768px
	`is-flex-tablet-only`	Sets display to flex for the target element when device width is between 769px and 1023px
	`is-flex-desktop-only`	Sets display to flex for the target element when device width is between 1024px and 1215px
	`is-flex-widescreen-only`	Sets display to flex for the target element when device width is between 1216px and 1407px
	`is-flex-touch`	Sets display to flex for the target element when device width is > 1408px
	`is-flex-tablet`	Sets display to flex for the target element when device width is > 768px
	`is-flex-desktop`	Sets display to flex for the target element when device width is > 1024px
	`is-flex-widescreen`	Sets display to flex for the target element when device width is > 1216px
	`is-flex-fullhd`	Sets display to flex for the target element when device width is > 1216px

You can replace the keyword flex with the following parameters

block
inline
inline-block
inline-flex

Hide helpers

Main class	Modifier	Effects
`.*`	`is-hidden-mobile`	Hides the target element when device width is < 768px
	`is-hidden-tablet-only`	Hides the target element when device width is between 769px and 1023px
	`is-hidden-desktop-only`	Hides the target element when device width is between 1024px and 1215px
	`is-hidden-widescreen-only`	Hides the target element when device width is between 1216px and 1407px
	`is-hidden-touch`	Hides the target element when device width is > 1408px
	`is-hidden-tablet`	Hides the target element when device width is > 768px
	`is-hidden-desktop`	Hides the target element when device width is > 1024px
	`is-hidden-widescreen`	Hides the target element when device width is > 1216px
	`is-hidden-fullhd`	Hides the target element when device width is > 1216px

General helpers

Heading helpers

Main class	Modifier	Effects
`.title`	`is-*1-6`	Sets the title size on a scale of 1 to 6
`.subtitle`	`is-*1-6`	Sets the subtitle size on a scale of 1 to 6

Text helpers

Main class	Modifier	Effects
`*`	`is-size-*1-6`	Sets the target text size on a scale of 1 to 6
	`primary-text`	Sets the target text color to $primary
	`secondary-text`	Sets the target text color to $secondary
	`accent-text`	Sets the target text color to $accent
	`info-text`	Sets the target text color to $blue
	`success-text`	Sets the target text color to $green
	`warning-text`	Sets the target text color to $orange
	`danger-text`	Sets the target text color to $red
	`dark-text`	Sets the target text color to $blue-grey
	`light-text`	Sets the target text color to $white
	`font-w-400`	Sets the target text font weight to 400
	`font-w-500`	Sets the target text font weight to 500
	`font-w-600`	Sets the target text font weight to 600
	`text-bolder`	Sets the target text font weight to 700
	`text-decoration-none`	Sets the `text-decoration` property to none

Padding helpers

Main class	Modifier	Effects
`*`	`no-padding`	Sets the target element padding to 0
	`no-padding-left`	Sets the target element left padding to 0
	`no-padding-right`	Sets the target element right padding to 0
	`no-padding-top`	Sets the target element top padding to 0
	`no-padding-bottom`	Sets the target element bottom padding to 0
	`padding*10-100`	Sets the target element padding to the specified number
	`pl*10-80`	Sets the target element left padding to the specified number
	`pr*10-80`	Sets the target element right padding to the specified number
	`pt*10-80`	Sets the target element top padding to the specified number
	`pb*10-80`	Sets the target element bottom padding to the specified number
	`huge-pt`	Sets the target element top padding to 100px
	`huge-pb`	Sets the target element bottom padding to 100px
	`giant-pb`	Sets the target element bottom padding to 150px

Margin helpers

Main class	Modifier	Effects
`*`	`no-margin`	Sets the target element margin to 0
	`no-margin-left`	Sets the target element left margin to 0
	`no-margin-right`	Sets the target element right margin to 0
	`no-margin-top`	Sets the target element top margin to 0
	`no-margin-bottom`	Sets the target element bottom margin to 0
	`margin-x-auto`	Sets the target element margin to 0 auto
	`ml-auto`	Sets the target element left margin to auto
	`mr-auto`	Sets the target element right margin to auto
	`margin-*10-100`	Sets the target element margin to the number value
	`ml*10-80`	Sets the target element left margin to the specified number
	`mr*10-80`	Sets the target element right margin to the specified number
	`mt*10-80`	Sets the target element top margin to the specified number
	`mb*10-80`	Sets the target element bottom margin to the specified number

States helpers

Main class	Modifier	Effects
`*`	`pull-right`	Adds `float: right` to target element
	`pull-left`	Adds `float: left` to target element
	`is-hidden`	Sets the target element to`display: none`
	`is-vhidden`	Sets the target element to`visibility: hidden`
	`is-disabled`	Disabled click events on target element

Main class	Modifier	Effects
`.navbar-wrapper`	`navbar-minimal`	Makes the navbar transparent and static (dark version)
	`navbar-minimal` + `navbar-light`	Makes the navbar transparent and static (light version)
	`navbar-fade`	Makes the navbar fixed on scroll (dark version)
	`navbar-fade` + `navbar-light`	Makes the navbar fixed on scroll (light version)
	`nav-reverse`	Gives access to navbar color classes (must be used with one of the following classes)
	`nav-reverse` + `nav-primary`	Makes the navbar background primary
	`nav-reverse` + `nav-secondary`	Makes the navbar background secondary
	`nav-reverse` + `nav-dark`	Makes the navbar background dark
	`nav-reverse` + `nav-blue`	Makes the navbar background blue
	`nav-reverse` + `nav-green`	Makes the navbar background green
	`nav-reverse` + `nav-orange`	Makes the navbar background orange
	`nav-reverse` + `nav-red`	Makes the navbar background red

Hero

Main class	Modifier	Effects
`.hero`	`is-medium`	Sets the hero header to medium size
	`is-large`	Sets the hero header to large size
	`is-fullheight`	Sets the hero header to full height size
	`is-relative`	Sets the hero position to relative
	`is-cover`	Sets the hero `background-size` property to `cover`
	`is-theme-primary`	Sets the hero background color to `$primary`
	`is-theme-secondary`	Sets the hero background color to `$secondary`
	`is-theme-accent`	Sets the hero background color to `$accent`
	`is-theme-info`	Sets the hero background color to `$info`
	`is-theme-success`	Sets the hero background color to `$success`
	`is-theme-warning`	Sets the hero background color to `$warning`
	`is-theme-danger`	Sets the hero background color to `$danger`
	`is-feature-grey`	Sets the hero background color to `$section-grey`
	`is-light-grey`	Sets the hero background color to `$light-grey`
	`is-coal`	Sets the hero background color to `$coal`

Sections

Main class	Modifier	Effects
`.section`	`is-medium`	Changes the section size to medium
	`is-large`	Changes the section size to large
	`is-relative`	Sets the element position to relative
	`is-cover`	Sets the hero `background-size` property to `cover`
	`has-border-top`	Gives the element a top border
	`has-bottom-top`	Gives the element a bottom border
	`section-light-grey`	Sets the element background color to `$light-grey`
	`section-feature-grey`	Sets the element background color to `$section-grey`
	`section-header-grey`	Sets the element background color to `$header-grey`
	`section-feature-grey-accent`	Sets the element background color to `$section-grey-accent`
	`section-primary`	Sets the element background color to `$primary`
	`section-secondary`	Sets the element background color to `$secondary`

Main class	Modifier	Effects
`.footer`	`footer-dark`	Changes the footer to use dark colors
	`footer-light`	Changes the footer to use light colors
	`footer-dark-left`	Changes left footer to use dark styles
	`footer-light-left`	Changes left footer to use light styles
	`footer-centered-dark`	Changes centered footer to use dark styles
	`footer-centered`	Changes centered footer to use light styles

Components

Simple accordion

Main class	Modifier	Effects
`.simple-accordion-wrapper`	`is-primary`	Sets the element header background to `$primary`
	`is-secondary`	Sets the element header background to `$secondary`
	`is-accent`	Sets the element header background to `$accent`
	`is-info`	Sets the element header background to `$blue`
	`is-success`	Sets the element header background to `$green`

Boxes

Icon box

Main class	Modifier	Effects
`.icon-box`	`primary`	Sets the icon box colors to `$primary`
	`secondary`	Sets the icon box colors to `$secondary`
	`accent`	Sets the icon box colors to `$accent`
	`info`	Sets the icon box colors to `$info`
	`success`	Sets the icon box colors to `$success`
	`warning`	Sets the icon box colors to `$warning`
	`danger`	Sets the icon box colors to `$danger`

Diamond box

Main class	Modifier	Effects
`.diamond-box`	`primary`	Sets the icon box colors to `$primary`
	`secondary`	Sets the icon box colors to `$secondary`
	`accent`	Sets the icon box colors to `$accent`
	`info`	Sets the icon box colors to `$info`
	`success`	Sets the icon box colors to `$success`
	`warning`	Sets the icon box colors to `$warning`
	`danger`	Sets the icon box colors to `$danger`

Square icon box

Main class	Modifier	Effects
`.square-icon-box`	`primary`	Sets the icon box colors to `$primary`
	`secondary`	Sets the icon box colors to `$secondary`
	`accent`	Sets the icon box colors to `$accent`
	`info`	Sets the icon box colors to `$info`
	`success`	Sets the icon box colors to `$success`
	`warning`	Sets the icon box colors to `$warning`
	`danger`	Sets the icon box colors to `$danger`
	`rounded`	Makes the icon rounded instead of the default square shape

Shadow icon box

Main class	Modifier	Effects
`.shadow-icon-box`	`is-primary`	Sets the icon box colors to `$primary`
	`is-secondary`	Sets the icon box colors to `$secondary`
	`is-accent`	Sets the icon box colors to `$accent`
	`is-info`	Sets the icon box colors to `$info`
	`is-success`	Sets the icon box colors to `$success`
	`is-warning`	Sets the icon box colors to `$warning`
	`is-danger`	Sets the icon box colors to `$danger`
	`rounded`	Makes the icon rounded instead of the default square shape

Buttons

Main class	Modifier	Effects
`.button`	`is-small`	Small button size
	`is-medium`	Medium button size
	`is-large`	Large button size
	`button-cta`	Transforms a simple button into a big button
	`button-cta` + `btn-outlined`	Transforms a simple button into a big outlined button
	`button-cta` + `btn-outlined` + `is-bold`	Transforms a simple button into a big outlined button with a thick border
	`btn-align`	Adjusts standard buttons padding
	`btn-align-md`	Adjusts medium buttons padding
	`btn-align-lg`	Adjusts large buttons padding
	`btn-upper`	Changes a button `text-transform` property to `uppercase`
	`rounded`	Makes a button edges rounded
	`raised`	Adds a box shadow to a button when hovered
	`is-raised`	Permanently adds a box shadow to a button
	`btn-fade`	Reduces a button opacity when hovered
	`btn-outlined`	Creates an outlined button that gets filled when hovered
	`is-link`	Creates a link style button
	`btn-square`	Creates a square shaped button
	`primary-btn`	Makes a button background color `$primary`
	`secondary-btn`	Makes a button background color `$secondary`
	`accent-btn`	Makes a button background color `$accent`
	`info-btn`	Makes a button background color `$blue`
	`success-btn`	Makes a button background color `$green`
	`warning-btn`	Makes a button background color `$orange`
	`danger-btn`	Makes a button background color `$danger`

Cards

Feature card

Main class	Modifier	Effects
`.feature-card`	`card-md`	Sets the card height to 350px
	`card-lg`	Sets the card height to 400px
	`light-bordered`	Gives a light border to the card element target
	`card-shadow`	Gives a predefined box shadow to the target card element
	`hover-inset`	Gives a predefined inset box shadow to the target card element when hovered

Flex card

Main class	Modifier	Effects
`.flex-card`	`primary-card`	Sets the card background color to `primary`
	`secondary-card`	Sets the card background color to `secondary`
	`accent-card`	Sets the card background color to `accent`
	`card-overflow`	Sets the target flex card `overflow` property to `visible`
	`light-bordered`	Gives a light border to the target flex card element
	`simple-shadow`	Adds an extra light box shadow to the target flex card element
	`light-raised`	Adds a light box shadow to the target flex card element
	`raised`	Adds a heavy box shadow to the target flex card element
	`hover-raised`	Adds a heavy box shadow on hover to the target flex card element
	`hover-inset`	Adds an inset box shadow on hover to the target flex card element

Dialogs

Main class	Modifier	Effects
`.modal`	`modal-sm`	change the size of the modal dialog to small
	`modal-hero`	changes the modal overlay background color to the current theme predefined gradient
	`modal-success`	changes the modal overlay background color to `$green`
	`modal-info`	changes the modal overlay background color to `$blue`
	`modal-warning`	changes the modal overlay background color to `$orange`
	`modal-error`	changes the modal overlay background color to `$red`

Dropdowns

Main class	Modifier	Effects
`.dropOut`	`is-primary`	sets the dropdown menu item background color to `$primary` when hovered
	`is-secondary`	sets the dropdown menu item background color to `$secondary` when hovered
	`is-accent`	sets the dropdown menu item background color to `$accent` when hovered

Forms

Inputs

Main class	Modifier	Effects
`.input`	`is-small`	sets the target input element size to small
	`is-medium`	sets the target input element size to medium
	`is-large`	sets the target input element size to large
	`rounded`	makes the edges of the target input element rounded
	`is-primary-focus`	sets the target input element border color to `$primary` when focused
	`is-secondary-focus`	sets the target input element border color to `$secondary` when focused
	`is-accent-focus`	sets the target input element border color to `$accent` when focused
	`is-grey-focus`	sets the target input element border color to `$title-grey` when focused

Textarea

Main class	Modifier	Effects
`.textarea`	`is-grow`	transforms a basic textarea into an animated textarea on focus
	`is-default-focus`	sets the target input element border color to `$default-input` when focused
	`is-primary-focus`	sets the target input element border color to `$primary` when focused
	`is-secondary-focus`	sets the target input element border color to `$secondary` when focused
	`is-accent-focus`	sets the target input element border color to `$accent` when focused
	`is-grey-focus`	sets the target input element border color to `$title-grey` when focused

Material inputs

Main class	Modifier	Effects
`.control-material`	`is-primary`	sets the target material input element label and border colors to `$primary`
	`is-secondary`	sets the target material input element label and border colors to `$secondary`
	`is-accent`	sets the target material input element label and border colors to `$accent`
	`is-light`	sets the target material input element label and border colors to `$white`

Radio group

Main class	Modifier	Effects
`.radio-wrap`	`is-small`	sets the size of the target radio group to small
	`is-medium`	sets the size of the target radio group to medium
	`is-primary`	sets the dot color of the target radio group to `$primary`
	`is-secondary`	sets the dot color of the target radio group to `$secondary`
	`is-accent`	sets the dot color of the target radio group to `$accent`

Labels

Badge

Main class	Modifier	Effects
`.b-badge`	`rounded`	makes the target badge element rounded
	`badge-outlined`	makes the target badge element outlined
	`is-primary`	sets the target badge element color to `$primary`
	`is-secondary`	sets the target badge element color to `$secondary`
	`is-accent`	sets the target badge element color to `$accent`
	`is-info`	sets the target badge element color to `$blue`
	`is-success`	sets the target badge element color to `$green`
	`is-warning`	sets the target badge element color to `$orange`
	`is-danger`	sets the target badge element color to `$red`

Main class	Modifier	Effects
`.tag`	`squared`	makes the target tag element edges squared
	`is-outlined`	makes the target tag element outlined
	`is-medium`	sets the target tag element size to medium
	`is-large`	sets the target tag element size to large
	`is-primary`	sets the target tag element colors to `$primary`
	`is-secondary`	sets the target tag element colors to `$secondary`
	`is-accent`	sets the target tag element colors to `$accent`
	`is-info`	sets the target tag element colors to `$blue`
	`is-success`	sets the target tag element colors to `$green`
	`is-warning`	sets the target tag element colors to `$orange`
	`is-danger`	sets the target tag element colors to `$red`

List block

Main class	Modifier	Effects
`.list-block`	`bordered`	gives borders to a list block element
	`minimal`	removes borders and gives a box shadow to a list block element

Messages

Main class	Modifier	Effects
`.message`	`msg-primary`	sets the target message element colors to `$primary`
	`msg-secondary`	sets the target message element colors to `$secondary`
	`msg-accent`	sets the target message element colors to `$accent`
	`msg-info`	sets the target message element colors to `$blue`
	`msg-success`	sets the target message element colors to `$green`
	`msg-warning`	sets the target message element colors to `$orange`
	`msg-danger`	sets the target message element colors to `$red`

Extensions

Badge

Main class	Modifier	Effects
`.badge`	`is-badge-left`	positions the target badge element on the left of its container
	`is-badge-bottom`	positions the target badge element at the bottom of its container
	`is-badge-bottom-left`	positions the target badge element at the bottom left of its container
	`is-badge-small`	sets the target badge element size to small
	`is-badge-medium`	sets the target badge element size to medium
	`is-badge-large`	sets the target badge element size to large
	`is-badge-outlined`	makes the target badge element outlined
	`badge-primary`	sets the target badge element colors to `$primary`
	`badge-secondary`	sets the target badge element colors to `$secondary`
	`badge-accent`	sets the target badge element colors to `$accent`
	`badge-info`	sets the target badge element colors to `$blue`
	`badge-success`	sets the target badge element colors to `$green`
	`badge-warning`	sets the target badge element colors to `$orange`
	`badge-danger`	sets the target badge element colors to `$red`

Checkboxes

Main class	Modifier	Effects
`.b-checkbox`	`is-circular`	makes the target b-checkbox element circular
	`is-inline`	sets the target b-checkbox element `display` property to `inline`
	`is-primary`	sets the target b-checkbox element colors to `$primary`
	`is-secondary`	sets the target b-checkbox element colors to `$secondary`
	`is-accent`	sets the target b-checkbox element colors to `$accent`
	`is-info`	sets the target b-checkbox element colors to `$blue`
	`is-success`	sets the target b-checkbox element colors to `$green`
	`is-warning`	sets the target b-checkbox element colors to `$orange`
	`is-danger`	sets the target b-checkbox element colors to `$red`

Range inputs

Main class	Modifier	Effects
`input[type=range]`	`is-small`	sets the target range input element size to small
	`is-medium`	sets the target range input element size to medium
	`is-large`	sets the target range input element size to large
	`is-primary`	sets the target range input element colors to `$primary`
	`is-secondary`	sets the target range input element colors to `$secondary`
	`is-accent`	sets the target range input element colors to `$accent`
	`is-info`	sets the target range input element colors to `$blue`
	`is-success`	sets the target range input element colors to `$green`
	`is-warning`	sets the target range input element colors to `$orange`
	`is-danger`	sets the target range input element colors to `$red`

Switch

Main class	Modifier	Effects
`.switch[type="checkbox"]`	`is-outlined`	makes the target switch element outlined
	`is-thin`	applies the thin style to the target switch element
	`is-small`	sets the target switch element size to small
	`is-medium`	sets the target switch element size to medium
	`is-large`	sets the target switch element size to large
	`is-primary`	sets the target switch element colors to `$primary`
	`is-secondary`	sets the target switch element colors to `$secondary`
	`is-accent`	sets the target switch element colors to `$accent`
	`is-info`	sets the target switch element colors to `$blue`
	`is-success`	sets the target switch element colors to `$green`
	`is-warning`	sets the target switch element colors to `$orange`
	`is-danger`	sets the target switch element colors to `$red`

CSS reference ​

Layout ​

Grid system ​

Columns ​

Column ​

Responsive helpers ​

Display helpers ​

Hide helpers ​

General helpers ​

Heading helpers ​

Text helpers ​

Padding helpers ​

Margin helpers ​

States helpers ​

Navbar ​

Hero ​

Sections ​

Footer ​

Components ​

Simple accordion ​

Boxes ​

Icon box ​

Diamond box ​

Square icon box ​

Shadow icon box ​

Buttons ​

Cards ​

Feature card ​

Flex card ​

Dialogs ​

Dropdowns ​

Forms ​

Inputs ​

Textarea ​

Material inputs ​

Radio group ​

Labels ​

Badge ​

Tags ​

List block ​

Messages ​

Extensions ​

Badge ​

Checkboxes ​

Range inputs ​

Switch ​

CSS reference

Layout

Grid system

Columns

Column

Responsive helpers

Display helpers

Hide helpers

General helpers

Heading helpers

Text helpers

Padding helpers

Margin helpers

States helpers

Navbar

Hero

Sections

Footer

Components

Simple accordion

Boxes

Icon box

Diamond box

Square icon box

Shadow icon box

Buttons

Cards

Feature card

Flex card

Dialogs

Dropdowns

Forms

Inputs

Textarea

Material inputs

Radio group

Labels

Badge

Tags

List block

Messages

Extensions

Badge

Checkboxes

Range inputs

Switch