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!

 

Comments

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