Show Menu
Cheatography

Bootstrap v4 Latest Cheat Sheet Cheat Sheet by

Alerts

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

Button

btn-group
btn-pr­imary
btn-su­ccess
btn-info
btn-wa­rning
btn-danger

Carousel

carousel
carous­el-­inner
carous­el-item

Forms

form-c­ontrol
form-group
form-c­ont­rol­-file
 

Collap­se/­Acc­ordion

data-t­ogg­le=­"­col­lap­se"
href="#­col­lap­se1­"
data-t­arg­et=­"­#co­lla­pse­1"
id="­col­lap­se1­"

Grid Modifiers

Flexbox
col
Flexbox based on natural width
col-*-auto
Multirow separator
w-100
Top Alignment
align-­ite­ms-­start
Centre Alignment
align-­ite­ms-­center
Bottom Alignment
align-­ite­ms-end
No row gutters
no-gutters
 

Grid

col-*
<576px
col-sm-*
≥576px
col-md-*
≥768px
col-lg-*
≥992px
col-xl-*
≥1200px

Visibility

visible
invisible

Display

d-none
d-sm-none
d-md-none
d-lg-none
d-xl-none
d-prin­t-none
 

Modal

modal
modal-­dialog
modal-­content
modal-­header
: modal-­title
modal-body
modal-­footer
       
 

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

          Web Programming Exam Cheat Sheet
            Bootstrap Glyphicons Cheat Sheet by James Croft