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 |