Bootstrap 4  Cheatsheet
Tags: bootstrap
Published: 2019-04-25 10:04:39

# Alerts
```
alert-primary
alert-secondary
alert-success
alert-info
alert-warning
alert-danger
alert-light
alert-dark
alert-link
alert-dismissible
alert-heading
```
# Badges
```
badge
badge-pill
badge-primary
badge-secondary
badge-success
badge-info
badge-warning
badge-danger
badge-light
badge-dark
```
# Breadcrumbs
```
breadcrumb
```
# Buttons
```
btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger
btn-light
btn-dark
btn-link
btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-info
btn-outline-warning
btn-outline-danger
btn-outline-light
btn-outline-dark
```
# Button Groups
```
btn-group
btn-group-lg
btn-group-sm
btn-group-vertical
btn-group (nested)
btn-toolbar
```
# Button Modifiers
```
btn-lg
btn-sm
btn-block
active button
disabled button
checkbox as button
radio as button
```
# Cards
```
card
card-body
card-title
card-subtitle
card-text
card-link
card-img-top
middle image
card-img-bottom
card-img-overlay
list-group
card-header
h*.card-header
card-footer
card-group
card-deck
card-columns
card bg-... text-...
```
# Carousel
```
carousel slide
carousel-indicators
carousel-caption
```
# Collapse
```
collapse
accordion
```
# Dropdowns
```
dropdown
dropdown (split)
dropup
dropup (split)
dropright
dropleft
dropdown-header
dropdown-divider
dropdown-item disabled
dropdown-menu-right
```
# Forms

```
form-group
form-inline
form using the grid
form-control
form-control-lg
form-control-sm
form-control-file
form-control-plaintext
form-check
form-check-inline
disabled items
readonly
```
# Form Input Groups

```
input-group
input-group-prepend
input-group-append
input-group-sm
input-group-lg
checkbox
radio
dropdown
segmented buttons
```
# Custom Forms

```
custom-checkbox
custom-radio
custom-select
custom-file
```
# Grid

```
container
container-fluid
row
col-# ( <576px)
col-sm-# ( ≥576px)
col-md-# ( ≥768px)
col-lg-# ( ≥992px)
col-xl-# ( ≥1200px)
col
col-*
no-gutters
offset-*-#
order-#
nested columns
```
# Images

```
img-fluid
img-thumbnail
```
# Jumbotron

```
jumbotron
jumbotron-fluid
```
# List Group

```
list-group
list-group-item active
list-group-item disabled
list-group-item-action
list-group-item-primary
list-group-item-secondary
list-group-item-success
list-group-item-info
list-group-item-warning
list-group-item-danger
list-group-item-light
list-group-item-dark
list-group with badges
list-group with d-flex
```
# Media Objects

```
media
nested media
d-flex align-self-start
d-flex align-self-center
d-flex align-self-end
right aligned media
```
# Modal

```
modal
modal-dialog-centered
modal fade
modal-lg
modal-sm
```
# Navs

```
ul.nav
nav.nav
nav justify-content-*
nav flex-column
nav-tabs
nav-pills
nav-fill
nav-justified
nav with flex utils
nav-tabs with dropdown
nav-pills with dropdown
```
# Navbar

```
navbar
navbar-brand
navbar with form
navbar-text
navbar-dark bg-dark
navbar-light
navbar fixed-top
navbar fixed-bottom
navbar sticky-top
collapse navbar-collapse
navbar-toggler
navbar-expand-*
```
# Pagination

```
pagination
page-item disabled
page-item active
pagination-lg
pagination-sm
```
# Popover

```
popovers
dismissible popover
```
```
Progress
progress
progress-bar
progress-bar with label
progress-bar with height
progress-bar bg-*
multiple progress-bar
progress-bar-striped
progress-bar-striped bg-*
progress-bar-animated
```
# Scrollspy

```
data-spy
```
# Tables

```
table
thead-light
thead-dark
table-striped
table-bordered
table-hover
table-sm
table-*-responsive
table-reflow
table-active
table-primary
table-secondary
table-success
table-info
table-warning
table-danger
table-light
table-dark
```
# Tooltips

```
tooltip
```
# Typography

```
display-# (1-4)
lead
blockquote
blockquote-footer
blockquote-reverse
list-unstyled
list-inline
dl-horizontal
```
# Utility: Borders

```
border
border-*-
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white
rounded
rounded-circle
rounded-*
```
# Utility: Colors

```
bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-light
bg-dark
bg-white
text-primary
text-secondary
text-success
text-info
text-warning
text-danger
text-light
text-dark
text-white
```
# Utility: Display

```
d-*-block
d-*-flex
d-*-inline
d-*-inline-block
d-*-inline-flex
d-*-none
d-*-table
d-*-table-cell
d-print-...
```
# Utility: Flexbox

```
flex-*-column
flex-*-column-reverse
flex-*-row
flex-*-row-reverse
flex-*-nowrap
flex-*-wrap
flex-*-wrap-reverse
justify-content-*-start
justify-content-*-end
justify-content-*-center
justify-content-*-between
justify-content-*-around
align-content-*-start
align-content-*-end
align-content-*-center
align-content-*-around
align-content-*-stretch
align-items-*-start
align-items-*-end
align-items-*-center
align-items-*-baseline
align-items-*-stretch
align-self-*-start
align-self-*-end
align-self-*-center
align-self-*-baseline
align-self-*-stretch
order-*-#
```
# Utility: Misc

```
close
embed-responsive
invisible
visible
sr-only
sr-only-focusable
```
# Utility: Positioning

```
align-*
clearfix
fixed-top
fixed-bottom
sticky-top
float-*-left
float-*-right
float-*-none
Utility: Sizing
w-
h-
mw-
mh-
```
# Utility: Spacing

```
m-1 / m-*-#
mt-1 / mt-*-#
mr-1 / mr-*-#
mb-1 / mb-*-#
ml-1 / ml-*-#
mx-1 / mx-*-#
my-1 / my-*-#
p-1 / p-*-#
pt-1 / pt-*-#
pr-1 / pr-*-#
pb-1 / pb-*-#
pl-1 / pl-*-#
px-1 / px-*-#
py-1 / py-*-#
```
# Utility: Text

```
font-weight-bold
font-weight-normal
font-italic
text-justify
text-nowrap
text-*-left
text-*-right
text-*-center
text-lowercase
text-uppercase
text-capitalize
text-truncate
text-muted
text-hide
```

# Responsive breakpoints
```
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
```
```
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
```
```
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
```
```
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
```
```
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
```
```
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
```
```
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
```
```
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
```
```
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
```
```
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
```
```
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
```
```
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
```
```
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
```
```
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
```
```
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
```

[Pdf Version Download](https://github.com/Alicannklc/Bootstrap4-Cheatsheet)