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

          Five ways to center DIV element in CSS Cheat Sheet