Show Menu

Bootstrap v4 Cheat Sheet by

bootstrap

Alerts

alert-­success
alert-info
alert-­warning
alert-­danger
alert-link
alert-­dis­mis­sible

Breadcrumb

breadcrumb

Buttons

btn-pr­imary
btn-se­condary
btn-link
btn-pr­ima­ry-­outline
btn-se­con­dar­y-o­utline
btn-su­cce­ss-­outline
btn-in­fo-­outline
btn-wa­rni­ng-­outline
btn-da­nge­r-o­utline

Button Groups

btn-group
btn-gr­oup-lg
btn-gr­oup-sm
btn-gr­oup­-ve­rtical
btn-group (nested)
dropdo­wn-­toggle
dropdo­wn-­toggle (split)
dropup
btn-to­olbar

Button Modifiers

btn-lg
btn-sm
btn-block
active button
disable button
data-t­oggle
checkbox as button
radio as button

Cards

card
card-block
card-i­mg-top
middle image
card-i­mg-­bottom
card-i­mg-­overlay
card-i­nverse
card-title
card-s­ubtitle
card-link
card-h­eader
card-f­ooter
card-p­rimary
card-s­uccess
card-info
card-w­arning
card-d­anger
card-group
card-d­eck­-wr­apper
card-c­olumns

Carousel

carousel slide
carous­el-­caption

Collapse

collapse
accordion
 

Dropdowns

dropdown
dropdown open
dropdo­wn-­header
dropdo­wn-­divider
dropdo­wn-item disabled

Forms

form
form-i­nline
form using the grid
form-group
form-c­ontrol
form-c­ont­rol­-file
radio
disabled radio
radio-­inline
checkbox
checkb­ox-­inline

Form Modifiers

form-c­ont­rol-lg
form-c­ont­rol-sm
has-su­ccess
has-wa­rning
has-danger

Form Input Groups

input-­group
input-­gro­up-lg
input-­gro­up-sm
checkbox
radio
input-­gro­up-btn
dropdown
segmented buttons

Custom Forms

c-input c-checkbox
c-input c-radio
c-inpu­ts-­stacked
c-select
file

Grid

container
contai­ner­-fluid
row
col-xs-# ( < 544px)
col-sm-# ( > 544px)
col-md-# ( > 768px)
col-lg-# ( > 992px)
col-xl-# ( > 1200px)
col-*-­off­set-#
col-*-­push-#
col-*-­pull-#
nested columns

Images

img-fluid
img-ro­unded
img-circle
img-th­umbnail

Jumbotron

jumbotron
jumbot­ron­-fluid

Labels

label-­default
label-pill
label-­primary
label-­success
label-info
label-­warning
label-­danger
 

List Group

list-group
list-group with links
list-g­rou­p-item
list-g­rou­p-item active
list-g­rou­p-item disabled
list-g­rou­p-i­tem­-su­ccess
list-g­rou­p-i­tem­-danger
list-g­rou­p-item labels
list-g­rou­p-i­tem­-he­ading
list-g­rou­p-i­tem­-text

Media Objects

media
media-­middle
media-­bottom
media-left
media-­right
media-list
nested media

Modal

modal
modal fade
modal-lg
modal-sm

Navs

ul.nav
nav.nav
nav-inline
nav-tabs
nav-pills
nav-st­acked
nav-tabs with dropdown
nav-pills with drodown

Navbar

navbar
navbar­-brand
navbar with form
navbar bg-*
navbar­-light
navbar­-dark
navbar­-fi­xed-top
navbar­-fi­xed­-bottom
navbar with collapse
navbar.to­ggl­eable-*

Pagination

pagination
page-item disabled
page-item active
pagina­tion-lg
pagina­tion-sm
pager
pager-prev
pager-next
disabled pager

Progress

progress
progress IE9 fix
progre­ss-­striped
progre­ss-­ani­mated
progre­ss-­success
progre­ss-info
 

Resonsice Utilities

hidden­-*-down
hidden­-*-up
visibl­e-p­rin­t-block
visibl­e-p­rin­t-i­nline
visibl­e-p­rin­t-i­nli­ne-­block
hidden­-print

Scrollspy

data-spy

Tables

table
table-­inverse
thead-­inverse
thead-­default
table-­striped
table-­bor­dered
table-­hover
table-sm
table-­res­ponsive
table-­reflow
table-­active
table-­danger

Typography

display-# (1-4)
lead
blockq­uote-
blockq­uot­e-f­ooter
blockq­uot­e-r­everse
list-u­nstyled
list-i­nline
dl-hor­izontal

Utility Classes

text-j­ustify
text-n­owrap
text-*­-left
text-*­-right
text-l­owe­rcase
text-u­ppe­rcase
text-c­api­talize
font-w­eig­ht-bold
font-w­eig­ht-­normal
font-i­talic
text-muted
text-p­rimary
text-s­uccess
text-info
text-w­arning
text-d­anger
bg-primary
bg-success
bg-info
bg-warning
bg-danger
bg-inverse
close
pull-*­-left
pull-*­-right
pull-*­-none
center­-block
clearfix
invisible
sr-only
sr-onl­y-f­ocu­sable
text-hide
embed-­res­ponsive

Download the Bootstrap v4 Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/kemmojoo_bootstrap-v4.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 
KemmojooKemmojoo

Metadata

  • Languages: English
  • Published: 1st June, 2016
  • Rated: 5 stars based on 2 ratings

Favourited By

Kemmojoo synonymouse

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Bootstrap3-SASS-Mixins Cheat Sheet
            Bootstrap Glyphicons Cheat Sheet by James Croft

          More Cheat Sheets by Kemmojoo

          MySQL Cheat Sheet
          JSP Helper Cheat Sheet