Bootstrap v4 Cheat Sheet

by Kemmojoo via cheatography.com/28261/cs/8320/

Alerts Button Modifiers (cont) Dropdowns Custom Forms

alert-​success data-t​oggle dropdown c-input c-checkbox

alert-info checkbox as button dropdown open c-input c-radio

alert-​warning radio as button dropdo​wn-​header c-inpu​ts-​stacked

alert-​danger dropdo​wn-​divider c-select

Cards
alert-link dropdo​wn-item disabled file

alert-​dis​mis​sible card

card-block Forms Grid

Breadcrumb card-i​mg-top form container

breadcrumb middle image form-i​nline contai​ner​-fluid

card-i​mg-​bottom form using the grid row

Buttons
card-i​mg-​overlay form-group col-xs-# ( < 544px)
btn-pr​imary card-i​nverse form-c​ontrol col-sm-# ( > 544px)
btn-se​condary card-title form-c​ont​rol​-file col-md-# ( > 768px)
btn-link card-s​ubtitle radio col-lg-# ( > 992px)
btn-pr​ima​ry-​outline card-link disabled radio col-xl-# ( > 1200px)
btn-se​con​dar​y-o​utline card-h​eader radio-​inline col-*-​off​set-#
btn-su​cce​ss-​outline card-f​ooter checkbox col-*-​push-#
btn-in​fo-​outline card-p​rimary checkb​ox-​inline col-*-​pull-#
btn-wa​rni​ng-​outline card-s​uccess nested columns
btn-da​nge​r-o​utline Form Modifiers
card-info
form-c​ont​rol-lg Images
card-w​arning
Button Groups
card-d​anger form-c​ont​rol-sm img-fluid
btn-group has-su​ccess img-ro​unded
card-group
btn-gr​oup-lg has-wa​rning img-circle
card-d​eck​-wr​apper
btn-gr​oup-sm has-danger img-th​umbnail
card-c​olumns
btn-gr​oup​-ve​rtical

btn-group (nested) Carousel Form Input Groups Jumbotron

dropdo​wn-​toggle carousel slide input-​group jumbotron

dropdo​wn-​toggle (split) carous​el-​caption input-​gro​up-lg jumbot​ron​-fluid

dropup input-​gro​up-sm
Collapse Labels
btn-to​olbar checkbox

collapse radio label-​default

Button Modifiers label-pill
accordion input-​gro​up-btn
btn-lg dropdown label-​primary

btn-sm segmented buttons label-​success

btn-block label-info

active button label-​warning

disable button label-​danger

By Kemmojoo Published 1st June, 2016. Sponsored by Readability-Score.com

cheatography.com/kemmojoo/ Last updated 1st June, 2016. Measure your website readability!
Page 1 of 2. https://readability-score.com
 Bootstrap v4 Cheat Sheet
by Kemmojoo via cheatography.com/28261/cs/8320/

List Group Navbar Scrollspy Utility Classes (cont)

list-group navbar data-spy text-p​rimary

list-group with links navbar​-brand text-s​uccess

Tables
list-g​rou​p-item navbar with form text-info

list-g​rou​p-item active navbar bg-* table text-w​arning

list-g​rou​p-item disabled navbar​-light table-​inverse text-d​anger

list-g​rou​p-i​tem​-su​ccess navbar​-dark thead-​inverse bg-primary

list-g​rou​p-i​tem​-danger navbar​-fi​xed-top thead-​default bg-success

list-g​rou​p-item labels navbar​-fi​xed​-bottom table-​striped bg-info

list-g​rou​p-i​tem​-he​ading navbar with collapse table-​bor​dered bg-warning

list-g​rou​p-i​tem​-text navbar.to​ggl​eable-* table-​hover bg-danger

table-sm bg-inverse
Media Objects Pagination table-​res​ponsive close
media pagination table-​reflow pull-*​-left
media-​middle page-item disabled table-​active pull-*​-right
media-​bottom page-item active table-​danger pull-*​-none
media-left pagina​tion-lg center​-block
Typography
media-​right pagina​tion-sm clearfix
media-list pager display-# (1-4)
invisible
nested media pager-prev lead
sr-only
pager-next blockq​uote-
sr-onl​y-f​ocu​sable
Modal blockq​uot​e-f​ooter
disabled pager text-hide
modal blockq​uot​e-r​everse
embed-​res​ponsive
modal fade Progress list-u​nstyled

modal-lg progress list-i​nline

modal-sm progress IE9 fix dl-hor​izontal

progre​ss-​striped
Navs Utility Classes
progre​ss-​ani​mated
ul.nav progre​ss-​success text-j​ustify

nav.nav progre​ss-info text-n​owrap

nav-inline text-*​-left

nav-tabs Resonsice Utilities text-*​-right

nav-pills hidden​-*-down text-l​owe​rcase

nav-st​acked hidden​-*-up text-u​ppe​rcase

nav-tabs with dropdown visibl​e-p​rin​t-block text-c​api​talize

nav-pills with drodown visibl​e-p​rin​t-i​nline font-w​eig​ht-bold

visibl​e-p​rin​t-i​nli​ne-​block font-w​eig​ht-​normal

hidden​-print font-i​talic

text-muted

By Kemmojoo Published 1st June, 2016. Sponsored by Readability-Score.com

cheatography.com/kemmojoo/ Last updated 1st June, 2016. Measure your website readability!
Page 2 of 2. https://readability-score.com