You are on page 1of 2

Bootstrap v4 Cheat Sheet

by Kemmojoo via

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
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
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
form-c​ont​rol-lg Images
Button Groups
card-d​anger form-c​ont​rol-sm img-fluid
btn-group has-su​ccess img-ro​unded
btn-gr​oup-lg has-wa​rning img-circle
btn-gr​oup-sm has-danger img-th​umbnail

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 Last updated 1st June, 2016. Measure your website readability!
Page 1 of 2.

com .nav progre​ss-​success text-j​ustify nav. Bootstrap v4 Cheat Sheet by Kemmojoo via cheatography.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. Sponsored by 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 cheatography. Measure your website readability! Page 2 of Last updated 1st June. https://readability-score. 2016.​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.