Cheat Sheet

We put together all whole classes list in a cheat sheet for you to create beautiful and responsive web interfaces and edit them easily. With predefined these classes, you can quickly and easily change and adapt your design to all interface elements.

Typography

Sizes

  • *-largest
  • largest
  • *-large
  • large
  • default
  • small
  • *-small
  • smallest
  • *-smallest
  • * (x, xx)

Colors

  • *-light
  • light
  • dark
  • *-dark
  • font-default
  • font-** (theme-** ui-text)
  • * (x, xx)
  • ** (green, yellow, red, blue, orange, default)

Animated Links

  • link-* ease-link
  • * (green, yellow, red, blue, orange, default)

Animated Underlines

  • underline-* ease-link
  • * (green, yellow, red, blue, orange, default)

Alignments

  • align-center
  • align-right
  • align-left
  • align-justify
  • align-nowrap
  • align-top
  • align-middle
  • align-bottom

Responsive Alignments

  • *-align-center
  • *-align-left
  • *-align-right
  • * (xl, lg, md, sm, xs)

Lead Styling

  • lead

Text Styling

  • bold
  • semibold
  • regular
  • thin
  • italic
  • overline
  • underline
  • ellipsis
  • lowercase
  • uppercase
  • capitalize
  • initalism

Line Spacing & Word Wrap

  • no-line-height
  • word-break-all

Helpers

Quick Tools

  • automargin
  • left
  • right
  • clearfix
  • block
  • inline-block
  • rtl
  • set-relative
  • set-absolute
  • set-fixed
  • full-width
  • full-height
  • no-user-select
  • highlight
  • clear-button

Showing & Hiding

  • visible (show)
  • visible-*
  • hidden
  • hidden-*
  • hidden-print
  • * (android, ios, mobile, desktop, landscape, portrait)

Responsive Showing & Hiding

  • visible-*
  • hidden-*
  • * (xl, lg, md, sm, xs)

Responsive No Floatings

  • *-no-float
  • * (xl, lg, md, sm, xs)

Rounded & Circled Corners

  • rounded
  • circle
  • *-top-left
  • *-top
  • *-top-right
  • *-right
  • *-bottom-right
  • *-bottom
  • *-bottom-left
  • *-left
  • * (rounded, circle)

Dashed Backgrounds

  • bg-45-light
  • bg-45-dark
  • bg-45-*
  • * (xs, sm, lg)

Borders

  • bordered
  • *-bordered
  • hor-bordered
  • ver-bordered
  • light-bordered
  • large-bordered
  • dual-bordered
  • no-bordered
  • no-bordered-*
  • * (top, right, bottom, left)

Shadows

  • shadow
  • shadow-*
  • inner-shadow
  • inner-shadow-*
  • * (sm, lg)

Cursors

  • cursor-default
  • cursor-pointer

Opacity & Scale Effects

  • no-opacity
  • full-opacity
  • opacity-more
  • opacity
  • scale-more
  • scale

Lists

  • list-unstyled
  • list-custom
  • list-inline
  • list-column-#
  • # (2, 3, 4, 5, 6)

Scrolling

  • scroll
  • v-scroll
  • h-scroll
  • no-scroll

Icons & Sprites

Default

  • icon
  • sprite
  • icon-* (with sprites & icons)
  • * (xxs, xs, sm, md, lg, xl, xxl)

Notifiers

  • notifier
  • notifier-*
  • * (yellow, green, orange, blue, white, gray, black)

Mirroring

  • icon-mirror-*
  • * (v, h)

Icons List


  • icon-alert

  • icon-angle-down

  • icon-angle-left

  • icon-angle-right

  • icon-angle-up

  • icon-aperture

  • icon-aaarrow-downaaa

  • icon-arrow-left

  • icon-arrow-right

  • icon-arrow-up

  • icon-bank

  • icon-bars

  • icon-basket

  • icon-bell

  • icon-book

  • icon-briefcase

  • icon-building

  • icon-buildings

  • icon-calculator

  • icon-calendar

  • icon-call

  • icon-camera

  • icon-chart-outcome

  • icon-checked

  • icon-clock

  • icon-close

  • icon-customer

  • icon-doc

  • icon-download

  • icon-draw

  • icon-drawer

  • icon-ellipsis-hor

  • icon-ellipsis-ver

  • icon-envelope

  • icon-exchange-hor

  • icon-exchange-ver

  • icon-exposure

  • icon-eye

  • icon-factory

  • icon-favorite

  • icon-favorite-fill

  • icon-file

  • icon-file-doc

  • icon-file-docx

  • icon-file-gif

  • icon-file-jpg

  • icon-file-pdf

  • icon-file-png

  • icon-ile-rar

  • icon-files

  • icon-file-tif

  • icon-file-xls

  • icon-file-xlsx

  • icon-file-xml

  • icon-file-zip

  • icon-file-zip-accepted

  • icon-finish

  • icon-flag

  • icon-flash-off

  • icon-flash-on

  • icon-gas-station

  • icon-globe

  • icon-history

  • icon-home

  • icon-hourglass-finish

  • icon-hourglass-start

  • icon-iso

  • icon-jump

  • icon-key

  • icon-land

  • icon-link

  • icon-lock

  • icon-logout

  • icon-long-arrow-bottom

  • icon-long-arrow-left

  • icon-long-arrow-right

  • icon-ong-arrow-top

  • icon-marker

  • icon-message

  • icon-minus

  • icon-mobile-h

  • icon-mobile-v

  • icon-money

  • icon-moneys

  • icon-move

  • icon-pause

  • icon-picture

  • icon-pie-chart

  • icon-play

  • icon-plus

  • icon-print

  • icon-puzzle

  • icon-question

  • icon-refresh

  • icon-remove

  • icon-required

  • icon-save

  • icon-search

  • icon-search-favorite

  • icon-search-minus

  • icon-search-plus

  • icon-settings

  • icon-shuffle

  • icon-sidebar-left

  • icon-sidebar-right

  • icon-social-facebook

  • icon-social-google

  • icon-social-instagram

  • icon-social-linkedin

  • icon-social-twitter

  • icon-social-youtube

  • icon-sort

  • icon-table

  • icon-tablet-h

  • icon-tablet-v

  • icon-target

  • icon-tick

  • icon-trash

  • icon-trash-accepted

  • icon-upload

  • icon-user

  • icon-user-accepted

  • icon-user-search

  • icon-write

Images

Responsive Images

  • img-responsive
  • *-img-responsive
  • * (md, sm, xs)

Photo Images

  • img-photo
  • img-photo-*
  • * (lg, sm, xs)

Retina Images

  • retina

Spacers

Clearfix Spacers

  • sp#
  • # (1-5, 10, 15, 20, 25, 30)

List Spacers

  • list-spacer-#
  • * (5, 10, 15, 20, 25, 30)

Padding & Margins

Paddings

  • padding-#
  • no-padding (padding-0)
  • no-padding-*
  • # (1-5, 10, 15, 20, 25, 30)
  • * (h, v, t, r, b, l)

Margins

  • margin-#
  • no-margin (margin-0)
  • no-margin-*
  • # (1-5, 10, 15, 20, 25, 30)
  • * (h, v, t, r, b, l)

Responsive No Paddings & Margins

  • *-no-padding (*-padding-0)
  • *-no-padding-**
  • *-no-margin (*-margin-0)
  • *-no-margin-**
  • * (xl, lg, md, sm, xs)
  • ** (h, v, t, r, b, l)

Animations

Effects

  • animate-spin
  • animate-progress

Stop Animations

  • animate-stop
  • animate-stop-all

Transitions

Timing

  • ease-fast
  • ease-slow
  • ease-slow*
  • * (2x-10x)

Timing Functions

  • ease-default
  • ease-linear
  • ease-*
  • ease-*-quad
  • ease-*-cubic
  • ease-*-quart
  • ease-*-quint
  • ease-*-sine
  • ease-*-expo
  • ease-*-circ
  • ease-*-back
  • * (in, out, in-out)

Names

  • ease-all
  • ease-color
  • ease-width
  • ease-height
  • ease-bg
  • ease-bg-position
  • ease-margin
  • ease-margin-*
  • ease-border
  • ease-*
  • ease-opacity
  • ease-transform
  • ease-fill
  • * (top, right, bottom, left)

Custom Names

  • ease-layout
  • ease-form
  • ease-form-custom
  • ease-link
  • ease-table
  • ease-dropdown
  • ease-portlet-close
  • ease-list-group

Stop Transitions

  • no-transitions
  • no-transitions-all

Progress Bars

  • progress-bar (default size)
  • progress-sm
  • progress-lg

Grid System

Layout Elements

  • container
  • no-gutter (with container)
  • fixed
  • row
  • show-gutter (with row)

Row Paddings

  • row-*-padding
  • row-*-padding-ver
  • row-*-padding-hor
  • * (no, xs, sm, md, lg)

Responsive No Gutters

  • no-gutter
  • no-gutter-*
  • * (xl, lg, md, sm, xs)

Grids

  • col-#
  • col-*-#
  • break-#
  • break-*-#
  • offset-#
  • offset-*-#
  • push-#
  • push-*-#
  • pull-#
  • pull-*-#
  • * (xl, lg, md, sm, xs)
  • # (1-12)

Static Grids

  • col-static
  • static-##
  • *-static-##
  • order-**-first
  • order-**-last
  • * (xl, lg, md, sm, xs)
  • ** (xl, lg, md, default, sm, xs)
  • ## (0, 32, 42, 50n-950)

Responsive Breakpoints

  • no-responsive
  • *-responsive
  • * (xl, lg, md, sm, xs)

Tables

Elements

  • table
  • table-nowrap
  • table-valign
  • table-bordered
  • table-condensed
  • table-striped
  • table-hover

Table Sidebar

  • table-sidebar
  • table-sidebar-center

Custom Tables

  • table-responsive
  • table-scrollable
  • table-flip-responsive
  • table-flip-scrollable
  • table-fixed-header
  • table-fixed-sidebar

Table Helpers

  • asc
  • desc

Page Loader

  • page-loader

Portlets

Default

  • portlet
  • portlet-close
  • content-side (inside of portlet)

Types

  • portlet-info
  • portlet-success
  • portlet-warning
  • portlet-danger (portlet-error)

Breadcrumbs

  • breadcrumbs

List Groups

Default

  • list-group
  • list-striped (with list-group)
  • list-icon

Icons

  • has-icon (inside of list-group)
  • has-icon-*
  • * (xxl, xl, lg, sm, xs, xxs)

Photos

  • has-photo (inside of list-group)
  • has-photo-*
  • * (lg, sm, xs)

Buttons

Elements

  • btn
  • btn-*
  • btn-multitext
  • btn-passive
  • btn-active
  • btn-block
  • btn-table
  • btn-invisible
  • btn-responsive
  • * lg, sm, xs, xxs)

Button Holders

  • btn-holder
  • *-responsive (with btn-holder)
  • btn-holder-inline
  • btn-holder-show-#
  • * (sm, xs)
  • # (1-6)

Custom Buttons

  • scroll-top
  • btn-toggle-icon
  • btn-swap-icon

Pagination Buttons

  • pagination
  • prev
  • next

Dropdown Buttons

  • btn-dropdown
  • submenu-top (with btn-dropdown)
  • icon-toggle
  • sep (seperate the list items)

Tab Buttons

  • btn-tabs
  • active (with buttons)
  • toggle-target (with buttons)
  • icon-toggle

Forms

Elements

  • text
  • textarea
  • file
  • select
  • select-multi
  • check
  • radio

Custom Forms

  • check-custom
  • radio-custom
  • switch-custom

Helpers

  • form-feedback
  • form-inline
  • form-inline-responsive
  • form-disabled
  • form-readonly
  • form-inner-shadow
  • form-table
  • form-label
  • form-grid
  • form-light
  • form-holder
  • form-summary
  • form-summary-*
  • * (sm, xs)

Textbox Icons

  • text-icon
  • text-icon-*
  • submit-enter
  • submit-icon
  • * (left, right, both, md, lg)

Alerts

  • error
  • warning
  • hint

Swatches

Themes

  • theme-*
  • * (white, black, gray, green, yellow, orange, blue, red)

Theme Color Tones

  • ui-x-light
  • ui-light
  • ui-dark
  • ui-x-dark

Theme Helpers

  • ui-text
  • ui-border