Site icon NgDeveloper

Bootstrap 4 All Classes List – Cheat Sheet

Bootstrap 4 is released with much update mainly with flex options. I have shared bootstrap 4 all classes list below and this will be your cheat sheet for quick reference. Bootstrap 4 came up with a lot of new classes and modifications of existing classes.

Bootstrap 4 is having around 300 classes. Please find below:

 

.active
.alert
.alert-dismissible
.alert-heading
.alert-* ( * => danger|info|primary|secondary|success|warning )
.alert-link
.bg-* ( * => danger|info|primary|secondary|success|warning )
.bg-faded
.bg-inverse
.blockquote
.blockquote-footer
.blockquote-reverse
.breadcrumb
.breadcrumb-item
.bs-tether-element-attached-* ( * => top|left|bottom|right )
.btn
.btn-block
.btn-group
.btn-group-lg
.btn-group-sm
.btn-group-vertical
.btn-lg
.btn-link
.btn-outline-* ( * => danger|info|primary|secondary|success|warning )
.btn-primary
.btn-secondary
.btn-sm
.btn-* ( * => danger|info|primary|secondary|success|warning )
.btn-toolbar
.card
.caption
.card-block
.card-blockquote
.card-columns
.card-danger
.card-deck
.card-deck-wrapper
.card-footer
.card-group
.card-header
.card-header-pills
.card-header-tabs
.card-img
.card-img-bottom
.card-img-overlay
.card-img-top
.card-info
.card-inverse
.card-link
.card-outline-* ( * => danger|info|primary|secondary|success|warning )
.card-primary
.card-subtitle
.card-success
.card-text
.card-title
.card-warning
.caret
.carousel
.carousel-caption
.carousel-control
.carousel-indicators
.carousel-inner
.carousel-item
.checkbox
.checkbox-inline
.clearfix
.close
.col-form-label
.col-form-label-lg
.col-form-label-sm
.col-form-legend
.col-xl-* ( * => 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 )
.col-lg-* ( * => 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 )
.col-md-* ( * => 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 )
.col-sm-* ( * => 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 )
.col-xs-* ( * => 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 )
.collapse
.collapsing
.container
.container-fluid
.custom-checkbox
.custom-control
.custom-control-description
.custom-control-indicator
.custom-control-input
.custom-controls-stacked
.custom-file
.custom-file-control
.custom-file-input
.custom-radio
.custom-select
.custom-select-sm
.d-block
.d-inline
.d-inline-block
.disabled
.display-*  ( * => 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 )
.dropdown
.dropdown-backdrop
.dropdown-divider
.dropdown-header
.dropdown-item
.dropdown-menu
.dropdown-menu-left
.dropdown-menu-right
.dropdown-toggle
.dropdown-toggle-split
.dropup
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1
.embed-responsive-21by9
.embed-responsive-item
.fade
.figure
.figure-caption
.figure-img
.focus
.font-italic
.font-weight-bold
.font-weight-normal
.form-check
.form-check-inline
.form-check-input
.form-check-label
.form-control
.form-control-danger
.form-control-feedback
.form-control-file
.form-control-label
.form-control-lg
.form-control-range
.form-control-sm
.form-control-static
.form-control-success
.form-control-warning
.form-group
.form-inline
.form-text
.h1
.h2
.h3
.h4
.h5
.h6
.has-danger
.has-feedback
.has-warning
.has-success
.hidden-*-down ( * => xs|sm|md|lg|xl )
.hidden-*-up ( * => xs|sm|md|lg|xl )
.hidden-print
.icon-next
.icon-prev
.img-circle
.img-fluid
.img-rounded
.img-thumbnail
.in
.initialism
.input-group
.input-group-addon
.input-group-btn
.input-group-lg
.input-group-sm
.invisible
.item
.jumbotron
.jumbotron-fluid
.jumbotron-hr
.lead
.left
.list-group
.list-group-flush
.list-group-item
.list-group-item-action
.list-group-item-* ( * => danger|info|primary|secondary|success|warning )
.list-group-item-heading
.list-group-item-text
.list-inline
.list-inline-item
.list-unstyled
.m-*-0 ( * => t|r|b|l|x|y|a )
.m-*-1 ( * => t|r|b|l|x|y|a )
.m-*-2 ( * => t|r|b|l|x|y|a )
.m-*-3 ( * => t|r|b|l|x|y|a )
.mark
.media
.media-body
.media-bottom
.media-heading
.media-left
.media-middle
.media-list
.media-object
.media-right
.modal
.modal-backdrop
.modal-body
.modal-content
.modal-dialog
.modal-footer
.modal-header
.modal-lg
.modal-open
.modal-scrollbar-measure
.modal-sm
.modal-title
.nav
.nav-inline
.nav-item
.nav-link
.nav-pills
.nav-stacked
.nav-tabs
.navbar
.navbar-brand
.navbar-full
.navbar-light
.navbar-fixed-bottom
.navbar-fixed-top
.navbar-nav
.navbar-sticky-top
.navbar-toggleable-* ( * => md|sm|xs )
.navbar-toggler
.next
.offset-*-0 ( * => xs|sm|md|lg|xl )
.offset-*-1 ( * => xs|sm|md|lg|xl )
.offset-*-2 ( * => xs|sm|md|lg|xl )
.offset-*-3 ( * => xs|sm|md|lg|xl )
.open
.p-*-0 ( * => t|r|b|l|x|y|a )
.page-item
.page-link
.pagination
.pagination-sm
.pagination-lg
.popover
.popover-arrow
.popover-bottom
.popover-content
.popover-left
.popover-right
.popover-title
.popover-top
.pos-f-t
.pre-scrollable
.prev
.progress
.progress-animated
.progress-bar
.progress-bar-striped
.progress-striped
.progress-* ( * =>  danger|info|primary|secondary|success|warning )
.pull-*-$  ( * => xs|sm|md|lg|xl ) – ( $ => 0 | 1 | 2 | 3 | 4| 5 | 6| 7 | 8 | 9| 10 |12 )
.push-*-$ ( * => xs|sm|md|lg|xl ) – ( $ => 0 | 1 | 2 | 3 | 4| 5 | 6| 7 | 8 | 9| 10 |12 )
.radio
.radio-inline
.right
.row
.small
.sr-only
.sr-only-focusable
.tab-content
.tab-pane
.table
.table-active
.table-bordered
.table-* ( * =>  danger|info|primary|secondary|success|warning )
.table-hover
.table-inverse
.table-reflow
.table-responsive
.table-sm
.table-striped
.tag
.tag-* ( * => danger|info|primary|secondary|success|warning )
.tag-pill
.text-capitalize
.text-hide
.text-justify
.text-lg-center
.text-lg-left
.text-lg-right
.text-lowercase
.text-*-center ( * => xs|sm|md|lg|xl )
.text-*-left ( * => xs|sm|md|lg|xl )
.text-*-right ( * => xs|sm|md|lg|xl )
.text-muted
.text-nowrap
.text-* ( * => danger|info|primary|secondary|success|warning )
.text-truncate
.text-uppercase
.thead-default
.thead-inverse
.thumbnail
.tooltip
.tooltip-arrow
.tooltip-bottom
.tooltip-inner
.tooltip-left
.tooltip-right
.tooltip-top
.visible-print-block
.visible-print-inline
.visible-print-inline-block
.w-100
Exit mobile version