DEV Community

Alican Kılıç
Alican Kılıç

Posted on

Bootstrap 4 Cheatsheet

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

Top comments (0)