is now part of Shuffle™.

The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.

Switch to Shuffle →

How it works Features Components Purchase Log in

Try Demo

All Bootstrap CSS classes Bootstrap 4 & 5

Bootstrap editor
Search Bootstrap classes Search
Bootstrap components

Bootstrap templates

Accordion Form Input Groups Spacing

.accordion-body .checkbox .m-1 / m-*-#

.accordion-button .dropdown .m-auto

.accordion-collapse .input-group .m-lg-0

.accordion-flush .input-group-append .m-lg-auto

.accordion-header .input-group-lg .m-md-0

.accordion-item .input-group-prepend .m-md-auto

.collapsed .input-group-sm .m-n1 / m-*-n#

.radio .m-sm-0
Alerts
.segmented buttons .m-sm-auto
.alert-danger

.m-xl-0
.alert-dark Forms
.m-xl-auto
.alert-dismissible form (full example)

.m-xxl-0
.alert-heading .col-form-label

.m-xxl-auto
.alert-info .col-form-label-lg

.mb-1 / mb-*-#
.alert-light .col-form-label-sm

.mb-auto
.alert-link .disabled items

.mb-lg-0
.alert-primary .form using the grid

.mb-lg-auto
.alert-secondary .form-check

.mb-md-0
.alert-success .form-check-inline

.mb-md-auto
.alert-warning .form-check-input

.mb-sm-0
.fade .form-check-label

.mb-sm-auto
.form-control
Badges
.mb-xl-0
.form-control-color
.badge
.mb-xl-auto
.form-control-file
.badge-danger
.mb-xxl-0
.form-control-lg
.badge-dark
.mb-xxl-auto
.form-control-plaintext
.badge-info
.me-auto
.form-control-range
.badge-light
.me-lg-0
.form-control-sm
.badge-pill
.me-lg-auto
.form-floating
.badge-primary
.me-md-0
.form-group
.badge-secondary
.me-md-auto
.form-inline
.badge-success
.me-sm-0
.form-label
.badge-warning
.me-sm-auto
.form-select
Borders .me-xl-0
.form-select-lg
.border .me-xl-auto
.form-select-sm
.border-*-0 .me-xxl-0
.form-switch
.border-1 .me-xxl-auto
.form-text
.border-danger .ml-1 / ml-*-#
.input-group-text
.border-dark .mr-1 / mr-*-#
.is-invalid
.border-info .ms-auto
.is-valid
.border-light .ms-lg-0
.readonly
.border-primary .ms-lg-auto
.valid-feedback
.border-secondary .ms-md-0
.valid-tooltip
.border-success .ms-md-auto
Grid
.border-warning .ms-sm-0
.col
.border-white .ms-sm-auto
.col-*
.rounded .ms-xl-0
.col-# (<576px)
.rounded-* .ms-xl-auto
.col-1
.rounded-0 .ms-xxl-0
.col-10
.rounded-1 .ms-xxl-auto
.col-11
.rounded-2 .mt-1 / mt-*-#
.col-12
.rounded-3 .mt-auto
.col-2
.rounded-bottom .mt-lg-0
.col-3
.rounded-circle .mt-lg-auto
.col-4
.rounded-end .mt-md-0
.col-5
.rounded-pill .mt-md-auto
.col-6
.rounded-start .mt-sm-0
.col-7
.rounded-top .mt-sm-auto
.col-8
Breadcrumbs .mt-xl-0
.col-9
.breadcrumb .mt-xl-auto
.col-auto
.breadcrumb-item .mt-xxl-0
.col-lg-# (≥992px)
.mt-xxl-auto
Button Groups .col-lg-1
.mx-1 / mx-*-#
.btn-group .col-md-# (≥768px)
.mx-auto
.btn-group (nested) .col-md-1
.mx-lg-0
.btn-group-lg .col-sm-# (≥576px)
.mx-lg-auto
.btn-group-sm .col-sm-1
.mx-md-0
.btn-group-vertical .col-xl-# (≥1200px)
.mx-md-auto
.btn-toolbar .col-xl-1
.mx-sm-0

Button Modifiers .col-xxl-1

.mx-sm-auto

.active button .container

.mx-xl-0

.btn-block .container-fluid
.mx-xl-auto

.btn-lg .container-sm
.mx-xxl-0

.btn-sm .contanier-lg
.mx-xxl-auto

.checkbox as button .contanier-md

.my-1 / my-*-#

.disabled button .contanier-xl

.my-auto

.radio as button .contanier-xxl

.my-lg-0
.g-0
Buttons .my-lg-auto
.g-lg-0
.btn .my-md-0
.g-md-0
.btn-close .my-md-auto
.g-sm-0
.btn-close-white .my-sm-0
.g-xl-0
.btn-danger .my-sm-auto
.g-xxl-0
.btn-dark .my-xl-0
.gap-0
.btn-info .my-xl-auto
.gap-lg-0
.btn-light .my-xxl-0
.gap-md-0
.btn-link .my-xxl-auto
.gap-sm-0
.btn-outline-danger .p-1 / p-*-#
.gap-xl-0
.btn-outline-dark .p-lg-0
.gap-xxl-0
.btn-outline-info .p-md-0
.gx-0
.btn-outline-light .p-sm-0
.gx-0
.btn-outline-primary .p-xl-0
.gx-lg-0
.btn-outline-secondary .p-xxl-0
.gx-lg-0
.btn-outline-success .pb-0
.gx-md-0
.btn-outline-warning .pb-1 / pb-*-#
.gx-md-0
.btn-primary .pb-lg-0
.gx-sm-0
.btn-secondary .pb-md-0
.gx-sm-0
.btn-success .pb-sm-0
.gx-xl-0
.btn-warning .pb-xl-0
.gx-xl-0
.pb-xxl-0
Cards
.gx-xxl-0
.pe-0
.card
.gy-xxl-0
.pe-lg-0
.card bg-... text-...
.nested columns
.pe-md-0
.card-body
.no-gutters
.pe-sm-0
.card-columns
.offset-*-#
.pe-xl-0
.card-deck
.offset-0
.pe-xxl-0
.card-footer
.offset-lg-0
.pl-1 / pl-*-#
.card-group
.offset-md-0
.pr-1 / pr-*-#
.card-header
.offset-xxl-0
.ps-0
.card-header-pills
.order-#
.ps-lg-0
.card-header-tabs
.row
.ps-md-0
.card-img-bottom
.row-cols-1
.ps-sm-0
.card-img-overlay
.row-cols-auto
.ps-xl-0
.card-img-top
.row-cols-lg-1
.ps-xxl-0
.card-link
.row-cols-lg-auto
.pt-0
.card-subtitle
.row-cols-md-1
.pt-1 / pt-*-#
.card-text
.row-cols-md-auto
.pt-lg-0
.card-title
.row-cols-sm-1
.pt-md-0
.h*.card-header
.row-cols-sm-auto
.pt-sm-0
.list-group
.row-cols-xl-1
.pt-xl-0
.middle image
.row-cols-xl-auto
.pt-xxl-0
.stretched-link
.row-cols-xxl-1
.px-0
Carousel .row-cols-xxl-auto
.px-1 / px-*-#
.carousel slide
Images .px-lg-0
.carousel-caption
.img-fluid .px-md-0
.carousel-control-next
.img-thumbnail .px-sm-0
.carousel-control-next-icon
Jumbotron .px-xl-0
.carousel-control-prev
.jumbotron .px-xxl-0
.carousel-control-prev-icon
.jumbotron-fluid .py-0
.carousel-dark
.py-1 / py-*-#
.carousel-fade List Group
.py-lg-0
.carousel-indicators .list-group
.py-md-0
.carousel-inner .list-group with badges
.py-sm-0
.carousel-item .list-group with d-flex
.py-xl-0
.list-group-item active
Collapse .py-xxl-0
.list-group-item disabled
.accordion
.list-group-item-action Spinner
.collapse
.list-group-item-danger .spinner-border

Colors .spinner-border text-*

.list-group-item-dark

.bg-body .spinner-border-sm
.list-group-item-info

.bg-danger .spinner-grow
.list-group-item-light

.bg-dark .spinner-grow text-*

.list-group-item-primary

.bg-gradient .spinner-grow-sm
.list-group-item-secondary

.bg-info
.list-group-item-success Tables
.bg-light
.list-group-item-warning .caption-top
.bg-primary
List group .table
.bg-secondary
.list-group-flush .table-*-responsive
.bg-success
.list-group-horizontal .table-active
.bg-transparent
.list-group-horizontal-lg .table-bordered
.bg-warning
.list-group-horizontal-md .table-borderless
.bg-white
.list-group-horizontal-sm .table-danger
.link-danger
.list-group-horizontal-xl .table-dark
.link-dark
.list-group-horizontal-xxl .table-hover
.link-info
.list-group-item .table-info
.link-light
.table-light
.link-primary Media Objects
.table-primary
.link-secondary .d-flex align-self-center
.table-reflow
.link-success .d-flex align-self-end
.table-responsive-xxl
.link-warning .d-flex align-self-start
.table-secondary
.text-danger .media
.table-sm
.text-dark .nested media
.table-striped
.text-info .right aligned media
.table-success
.text-light Misc
.table-warning
.text-primary .close
.thead-dark
.text-secondary .embed-responsive
.thead-light
.text-success .initialism
Text
.text-warning .invisible
.font-italic
.text-white .overflow-auto
.font-weight-bold
Custom Forms .overflow-hidden
.font-weight-bolder
.custom-checkbox .overflow-scroll
.font-weight-light
.custom-file .overflow-visible
.font-weight-lighter
.custom-radio .pe-auto
.font-weight-normal
.custom-range .pe-none
.text-*-center
.custom-select .shadow
.text-*-left
.custom-switch .shadow-lg
.text-*-right
.shadow-none
Display .text-black-50
.shadow-sm
.d-*-block .text-body
.sr-only
.d-*-flex .text-capitalize
.sr-only-focusable
.d-*-inline .text-decoration-none
.visible
.d-*-inline-block .text-hide
.visually-hidden
.d-*-inline-flex .text-justify
.visually-hidden-focusable
.d-*-none .text-lowercase

.d-*-table Modal
.text-monospace

.d-*-table-cell .modal
.text-muted

.d-grid .modal fade

.text-nowrap

.d-lg-grid .modal-dialog-centered
.text-truncate

.d-lg-table-row .modal-lg
.text-uppercase

.d-md-grid .modal-sm
.text-white-50

.d-md-table-row .modal-xl
Toast
.d-print-... Modals
.toast-body
.d-print-flex .modal-body
.toast-header
.d-print-grid .modal-contant
Toasts
.d-print-inline-flex .modal-dialog
.toast
.d-print-table .modal-dialog-scrollable

.d-print-table-cell .modal-footer Tooltips

.d-print-table-row .modal-fullscreen .tooltip

.d-sm-grid .modal-fullscreen-lg-down Typography

.d-sm-table-row .modal-fullscreen-md-down .blockquote

.d-table-row .modal-fullscreen-sm-down .blockquote-footer

.d-xl-grid .modal-fullscreen-xl-down .blockquote-reverse

.d-xl-table-row .modal-fullscreen-xxl-down .display-# (1-4)

.d-xxl-block .modal-header .display-1

.d-xxl-flex .modal-static .display-2

.d-xxl-grid .modal-title .display-3

.d-xxl-inline
Navbar .display-4

.d-xxl-inline-block
.collapse navbar-collapse .display-5

.d-xxl-inline-flex
.nav-item .display-6

.d-xxl-none
.nav-link .dl-horizontal

.d-xxl-table
.navbar .font-monospace

.d-xxl-table-cell
.navbar fixed-bottom .fs-1

.d-xxl-table-row
.navbar fixed-top .fs-2

Dropdowns .navbar sticky-top .fs-3

.dropdown .navbar with form .fs-4

.dropdown (split) .navbar-brand .fs-4

.dropdown-divider .navbar-collapse .fs-5

.dropdown-header .navbar-dark .fs-6

.dropdown-item .navbar-dark bg-dark .fs-lg-1

.dropdown-item disabled .navbar-expand-* .fs-md-1

.dropdown-item-text .navbar-expand-lg .fs-sm-1

.dropdown-menu .navbar-expand-md .fst-italic

.dropdown-menu-dark .navbar-expand-sm .fst-normal

.dropdown-menu-end .navbar-expand-xl .fw-bolder

.dropdown-menu-lg-end .navbar-expand-xxl .fw-light

.dropdown-menu-lg-start .navbar-light .fw-lighter

.dropdown-menu-md-end .navbar-nav .fw-normal

.dropdown-menu-md-start .navbar-text .h1

.dropdown-menu-right .navbar-toggler .h2

.dropdown-menu-sm-end .navbar-toggler-icon .h3

.dropdown-menu-sm-start .h4
Navs
.dropdown-menu-start .h5
.nav flex-column
.dropdown-menu-xl-end .h6
.nav justify-content-*
.dropdown-menu-xl-start .lead
.nav with flex utils
.dropdown-toggle .lh-1
.nav-fill
.dropdown-toggle-split .lh-base
.nav-justified
.dropleft .lh-lg
.nav-pills
.dropright .lh-sm
.nav-pills with dropdown
.dropup .list-inline
.nav-tabs
.dropup (split) .list-unstyled
.nav-tabs with dropdown
.text-break
Figure .nav.nav
.text-center
.figure .tab-content
.text-decoration-line-through
.figure-caption .tab-pane
.text-decoration-underline
.figure-img .ul.nav
.text-end
Flexbox Pagination
.text-lg-center
.align-content-*-around .page-item active
.text-lg-end
.align-content-*-center .page-item disabled
.text-lg-start
.align-content-*-end .pagination
.text-md-center
.align-content-*-start .pagination-lg
.text-md-end
.align-content-*-stretch .pagination-sm
.text-md-start
.align-items-*-baseline
Popover .text-reset
.align-items-*-center
.dismissible popover .text-sm-center
.align-items-*-end
.popovers .text-sm-end
.align-items-*-start
.text-sm-start
Positioning
.align-items-*-stretch
.text-start
.align-*
.align-self-*-baseline
.text-wrap
.bottom-0
.align-self-*-center
.text-xl-center
.bottom-100
.align-self-*-end
.text-xl-end
.bottom-50
.align-self-*-start
.text-xl-end
.clearfix
.align-self-*-stretch
.text-xl-end
.end-0
.flex-*-column
.text-xl-start
.end-100
.flex-*-column-reverse
.text-xl-start
.end-50
.flex-*-grow-0
.text-xl-start
.fixed-bottom
.flex-*-grow-1
.text-xxl-center
.fixed-top
.flex-*-nowrap
.text-xxl-end
.float-*-left
.flex-*-row
.text-xxl-start
.float-*-none
.flex-*-row-reverse

.float-*-right
.flex-*-shrink-0

.float-end
.flex-*-shrink-1

.float-lg-end
.flex-*-wrap

.float-lg-none
.flex-*-wrap-reverse

.float-lg-start
.flex-fill

.float-md-end
.flex-lg-fill

.float-md-none
.flex-md-fill

.float-md-start
.flex-sm-fill

.float-none
.flex-xl-fill

.float-sm-end
.flex-xxl-column

.float-sm-none
.flex-xxl-column-reverse

.float-sm-start
.flex-xxl-fill

.float-start
.flex-xxl-grow-0

.float-xl-end
.flex-xxl-grow-1

.float-xl-none
.flex-xxl-nowrap

.float-xl-start
.flex-xxl-row

.float-xxl-end
.flex-xxl-row-reverse

.float-xxl-none
.flex-xxl-shrink-0

.float-xxl-start
.flex-xxl-shrink-1

.position-absolute
.flex-xxl-wrap

.position-relative
.flex-xxl-wrap-reverse

.position-static
.justify-content-*-around

.start-0
.justify-content-*-between

.start-100
.justify-content-*-center

.start-50
.justify-content-*-end

.sticky-lg-top
.justify-content-*-start

.sticky-md-top
.justify-content-around

.sticky-sm-top
.justify-content-between

.sticky-top
.justify-content-center

.sticky-xl-top
.justify-content-end

.top-0
.justify-content-evenly

.top-100
.justify-content-lg-around

.top-50
.justify-content-lg-between

.translate-middle
.justify-content-lg-center

.justify-content-lg-end Progress

.justify-content-lg-evenly .multiple progress-bar

.justify-content-lg-start .progress

.justify-content-md-around .progress-bar

.justify-content-md-between .progress-bar bg-*

.justify-content-md-center .progress-bar with height

.justify-content-md-end .progress-bar with label

.justify-content-md-evenly .progress-bar-animated

.justify-content-md-start .progress-bar-striped

.justify-content-sm-around .progress-bar-striped bg-*

.justify-content-sm-between
Scrollspy
.justify-content-sm-center
.data-spy

.justify-content-sm-end
Sizing
.justify-content-sm-evenly
.h-100
.justify-content-sm-start
.h-25
.justify-content-start
.h-50
.justify-content-xl-around
.h-75
.justify-content-xl-between
.h-auto
.justify-content-xl-center
.mh-100
.justify-content-xl-end
.min-vw-100
.justify-content-xl-evenly
.mw-100
.justify-content-xl-start
.w-100
.justify-content-xxl-around
.w-100
.justify-content-xxl-between
.w-25
.justify-content-xxl-center
.w-50
.justify-content-xxl-end
.w-75
.justify-content-xxl-evenly
.w-auto
.justify-content-xxl-start

.order-*-#

.order-0

.order-1

.order-first

.order-last

.order-lg-0

.order-lg-first

.order-lg-last

.order-md-0

.order-md-first

.order-md-last

.order-sm-0

.order-sm-first

.order-sm-last

.order-xl-0

.order-xl-first

.order-xl-last

.order-xxl-0

.order-xxl-first

.order-xxl-last

Terms of use
Bootstrap CSS 
EN
Components Templates Support (EN)

Join our newsletter Subscribe

© 2022 Shuffle

Switch to the Bootstrap Editor by Shuffle