Show Menu
Cheatography
  1. Home >
  2. Programming >

Bulma CSS Cheat Sheet (DRAFT) by

Bulma a free, open source CSS framework to style HTML pages.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Colors

is-text is-link is-primary is-info is-success
is-warning is-danger
Available at:
.button .notif­­ic­ation .progress .table
.tag <is­­-*­>.input <is­-*>­-te­xtarea
.select .file .info .help .message
.navbar .panel .hero

.button

.is-white .is-black .is-light .is-dark
.is-ou­tlined .is-in­verted .is-ghost
.is-small .is-normal .is-medium
.is-large .is-fu­llwidth .is-lo­ading
.is-static .is-ro­unded .is-ho­vered
.is-lo­ading .is-re­spo­nsive .is-ho­vered
.butto­ns.a­re­-small
.butto­ns.a­re­-medium
.butto­ns.a­re­-large
.butto­ns.h­as­-addons
.butto­ns.i­s-­cen­tered
.butto­ns.i­s-­right
.field.ha­s-a­ddons
.field.ha­s-a­ddo­ns.h­as­-ad­don­s-c­entered
.field.ha­s-a­ddo­ns.h­as­-ad­don­s-right
.field.is­-gr­ouped
.field.is­-gr­oup­ed.i­s-­gro­upe­d-c­entered
.field.is­-gr­oup­ed.i­s-­gro­upe­d-right
.field.is­-gr­oup­ed.i­s-­gro­upe­d-m­ult­iline
Used on:
<a> <bu­tto­n>
<input type="s­ubm­it">
<input type="r­ese­t">

.card

card

  card-h­eader

    card-h­ead­er-­title

    card-h­ead­er-icon

  card-image

  card-c­ontent

  card-f­ooter

    card-f­oot­er-item

.is-ce­ntered

.navbar

navbar

  navbar­-brand

    navbar­-burger

  navbar­-menu

    navbar­-start

    navbar-end

      navbar­-item

        navbar­-link

        navbar­-dr­opdown

          navbar­-di­vider

.is-white .is-black .is-light .is-dark
.has-s­hadow .is-fi­xed­-bottom .is-fi­xed-top
.navba­r-i­tem.ha­s-d­ropdown
.navba­r-i­tem.is­-ex­panded
.navba­r-i­tem.is-tab
.navba­r-i­tem.is­-ta­b.i­s-a­ctive
.navba­r-b­urg­er.i­s-­active
.navba­r-m­enu.is­-active
.is-tr­ans­paren .is-fi­xed-top .is-fi­xed­-bottom
.has-n­avb­ar-­fix­ed-top on 
<ht­ml>
or 
<bo­dy>

.has-n­avb­ar-­fix­ed-­bottom on 
<ht­ml>
or 
<bo­dy>

.menu

.is-small .is-medium .is-large
.menu-list .menu-­label
 

Block

breadcrumb level message pagination tabs box content notifi­cation other progress table title
A simple spacer tool

Text and Background

.has-t­ext-*
.has-b­a­c­kg­­round-*
.has-t­e­x­t-­­[color]
.has-t­e­x­t-­­[co­­lo­r­]­-[­­00..100 step 5]
.has-t­e­x­t-­­[co­­lo­r­]­-light
.has-t­e­x­t-­­[co­­lo­r­]­-dark
.has-t­e­x­t-­­[co­­lo­r­]­-soft
.has-t­e­x­t-­­[co­­lo­r­]­-bold
.has-t­e­x­t-­­[co­­lo­r­]­-o­­n-s­­cheme
[color] = text, link, primary, info, success, warning, danger

icon

is-small .is-medium .is-large icon-text

image

.is-fu­llwidth .is-square .is-1by1 .is-5by4 .is-4by3 .is-3by2 .is-5by3 .is-16by9 .is-2by1 .is-3by1 .is-4by5 .is-3by4 .is-2by3 .is-3by5 .is-9by16 .is-1by2 .is-1by3 .is-16x16 .is-24x24 .is-32x32 .is-48x48 .is-64x64 .is-96x96 .is-12­8x128

.notif­ication

.is-white .is-black .is-light .is-dark

.bread­crumb

breadcrumb

  ul

    li

.is-small .is-medium .is-large
.is-ce­ntered .is-right
.has-a­rro­w-s­epa­rator
.has-b­ull­et-­sep­arator
.has-d­ot-­sep­arator
.has-s­ucc­eed­s-s­epa­rator

.pagin­ation

.is-small .is-medium .is-large
.pagin­ati­on-­ell­ipsis .pagin­ati­on-list

.hero

hero

  hero-head

  hero-body

  hero-foot

.is-small .is-medium .is-large
.is-ha­lfh­eight .is-fu­llh­eight
.is-fu­llh­eig­ht-­wit­h-n­avbar
.is-white .is-black .is-light .is-dark
.hero-­video .hero-­vid­eo.i­s-­tra­nsp­arent

.message

.is-small .is-medium .is-large
.is-white .is-black .is-light .is-dark
.messa­ge-­header .messa­ge-body
 

Sizes

.is-small .is-normal .is-medium .is-large
Available on
.delete .content .button .label .bread­crumb .menu .message .ichon .select .pagin­ation .tabs .hero .pagin­ation

.progress

.is-white .is-black .is-light .is-dark :indet­erm­inate .is-small .is-medium .is-large

.table

table

  thead

  tfoot

  tbody

    tr

      th

      td

.is-se­lected .is-fu­llwidth .table­-co­ntainer
.is-bo­rdered .is-st­riped .is-narrow
.is-ho­verable .is-fu­llwidth

.tag

.is-white .is-black .is-light .is-dark .is-normal .is-medium .is-large .is-delete .is-ro­unded
.tags.i­s-­cen­tered .tags.i­s-­right .tags.h­as­-addons

.title and .subtitle

.is-1 .is-2 .is-3 .is-4 .is-5 .is-6 .is-7

.file

.is-white .is-black .is-light .is-dark .is-small .is-normal .is-medium .is-large .is-ce­ntered .is-right .file-­label .file-­lab­el:­hover .file-­lab­el:­active .file-­input .file-cta .file-name .file-icon

.dropdown

dropdown

  dropdo­wn-­trigger

  dropdo­wn-menu

    dropdo­wn-­content

      dropdo­wn-item

      dropdo­wn-­divider

.is-ho­verable .is-active .is-right .is-up

.modal

modal

  modal-­bac­kground

  modal-­content

  modal-­close

modal

  modal-card

    modal-­car­d-head

      modal-­car­d-title

    modal-­car­d-body

    modal-­car­d-foot

.is-active

Native Elements

checkbox
radio
select