You are on page 1of 2

Bootstrap 4 (2019) ver 2.

2 Cheat Sheet
by LiezelN via cheatography.com/69317/cs/17476/

Buttons Carousel Dropdowns Jumbotron

btn carousel dropdown jumbotron


btn-* slide dropdo​wn-​toggle jumbot​ron​-fluid
(primary, secondary, success, carous​el-​inner dropdo​wn-menu
info, warning, dark, light, link) Media Objects
carous​el-item dropdo​wn-item
btn-ou​tline-* media
carous​el-item active dropdo​wn-item disabled
(primary, secondary, success,
media-body
carous​el-​caption dropdo​wn-​header
info, warning, danger, dark,
light) carous​el-​con​tro​l-prev dropdo​wn-​divider
Navs
carous​el-​con​tro​l-p​rev​-icon
Grid nav
Button Modifiers
carous​el-​con​tro​l-next
nav-item
btn-lg container
carous​el-​con​tro​l-n​ext​-icon
nav-link
btn-sm contai​ner​-fluid
carous​el-​ind​icators
nav-link active
btn-block row
Colour nav-link disabled
col
Cards nav-pills
text-* col-# (< 576px)
card (primary, secondary, success, nav-tabs
col-sm-# (> 576px)
card-body danger, warning, info, light,
col-md-# (> 768px)
dark) Nav alignment
card-text col-lg-# (> 992px)
bg-* nav-fill
card-title col-xl-# (> 1200px)
(primary, secondary, success, nav-ju​stified
card-s​ubtitle
danger, warning, info, light, dark,
Images justif​y-c​ont​ent​-center
card-link white)
justif​y-c​ont​ent-end
card-img border border-* img-fluid

card-h​eader (primary, secondary, success, rounded


Navbar
danger, warning, info, light, rounde​d-top
card-f​ooter
dark) navbar
card-group rounde​d-right
navbar-expand-(*)
card-deck rounde​d-b​ottom
Displa​y/P​osition (sm, md, lg, xl)
card-c​olumns rounde​d-left
float-left navbar​-light
rounde​d-c​ircle
float-​right navbar​-dark
img-th​umbnail
d-block navbar-nav

d-inline navbar​-brand

d-none collapse
navbar​-co​llapse

By LiezelN Published 16th October, 2018. Sponsored by ApolloPad.com


cheatography.com/liezeln/ Last updated 12th October, 2019. Everyone has a novel in them. Finish
Page 1 of 2. Yours!
https://apollopad.com
Bootstrap 4 (2019) ver 2.2 Cheat Sheet
by LiezelN via cheatography.com/69317/cs/17476/

Navbar (cont) Forms Typography

navbar​-to​ggler form-group display-# (1-4)


navbar​-to​ggl​er-icon form-text lead
fixed-top form-c​ontrol small
fixed-​bottom form-c​ont​rol​-label blockquote
form-check blockq​uot​e-f​ooter
Shadows
form-c​hec​k-label list-u​nstyled
shadow​-none
form-c​hec​k-input list-i​nline
shadow-sm
form-c​hec​k-i​nline list-i​nli​ne-item
shadow
form-c​ont​rol-sm
shadow-lg
form-c​ont​rol-lg

form-i​nline
Sizing
form-c​ont​rol-*
w-25, w-50, w-75, w-100, w-auto
(primary, secondary, success,
h-25, h-50, h-75, h-100, h-auto danger, warning, info, light,
mw-# dark)
mh-#
Utility Classes
min-vw-#
text-j​ustify
min-vh-#
text-n​owrap
vw-#
text-(​*)-left
vh-#
text-(​*)-​right
Spacing text-(​*)-​center
{prope​rty​}{s​ide​s}-​{br​eak​poi​nt}​- text-l​owe​rcase
{size} text-u​ppe​rcase
property: m, p text-c​api​talize
sides: t, b, l, r, x, y, blank font-w​eig​ht-bold
breakp​oint: sm, md, lg, xl font-w​eig​ht-​normal
size: 0, 1, 2, 3, 4, 5, auto font-i​talic
size for negative margins: n1,
n2, n3, n4, n5

By LiezelN Published 16th October, 2018. Sponsored by ApolloPad.com


cheatography.com/liezeln/ Last updated 12th October, 2019. Everyone has a novel in them. Finish
Page 2 of 2. Yours!
https://apollopad.com

You might also like