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
Pricing
How it works
Features
Blog
Purchase
Log in
Try Demo
All Bootstrap CSS classes
Search
Accordion
.accordion-body
.accordion-button
.accordion-collapse
.accordion-flush
.accordion-header
.accordion-item
.collapsed
Alerts
.alert-danger
.alert-dark
.alert-dismissible
.alert-heading
.alert-info
.alert-light
.alert-link
.alert-primary
.alert-secondary
.alert-success
.alert-warning
.fade
Badges
.badge
.badge-danger
.badge-dark
.badge-info
.badge-light
.badge-pill
.badge-primary
.badge-secondary
.badge-success
.badge-warning
Borders
.border
.border-*-0
.border-1
.border-danger
.border-dark
.border-info
.border-light
.border-primary
.border-secondary
.border-success
.border-warning
.border-white
.rounded
.rounded-*
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-bottom
.rounded-circle
.rounded-end
.rounded-pill
.rounded-start
.rounded-top
Breadcrumbs
.breadcrumb
.breadcrumb-item
Button Groups
.btn-group
.btn-group (nested)
.btn-group-lg
.btn-group-sm
.btn-group-vertical
.btn-toolbar
Button Modifiers
.active button
.btn-block
.btn-lg
.btn-sm
.checkbox as button
.disabled button
.radio as button
Buttons
.btn
.btn-close
.btn-close-white
.btn-danger
.btn-dark
.btn-info
.btn-light
.btn-link
.btn-outline-danger
.btn-outline-dark
.btn-outline-info
.btn-outline-light
.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-warning
.btn-primary
.btn-secondary
.btn-success
.btn-warning
Cards
.card
.card bg-... text-...
.card-body
.card-columns
.card-deck
.card-footer
.card-group
.card-header
.card-header-pills
.card-header-tabs
.card-img-bottom
.card-img-overlay
.card-img-top
.card-link
.card-subtitle
.card-text
.card-title
.h*.card-header
.list-group
.middle image
.stretched-link
Carousel
.carousel slide
.carousel-caption
.carousel-control-next
.carousel-control-next-icon
.carousel-control-prev
.carousel-control-prev-icon
.carousel-dark
.carousel-fade
.carousel-indicators
.carousel-inner
.carousel-item
Collapse
.accordion
.collapse
Colors
.bg-body
.bg-danger
.bg-dark
.bg-gradient
.bg-info
.bg-light
.bg-primary
.bg-secondary
.bg-success
.bg-transparent
.bg-warning
.bg-white
.link-danger
.link-dark
.link-info
.link-light
.link-primary
.link-secondary
.link-success
.link-warning
.text-danger
.text-dark
.text-info
.text-light
.text-primary
.text-secondary
.text-success
.text-warning
.text-white
Custom Forms
.custom-checkbox
.custom-file
.custom-radio
.custom-range
.custom-select
.custom-switch
Display
.d-*-block
.d-*-flex
.d-*-inline
.d-*-inline-block
.d-*-inline-flex
.d-*-none
.d-*-table
.d-*-table-cell
.d-grid
.d-lg-grid
.d-lg-table-row
.d-md-grid
.d-md-table-row
.d-print-...
.d-print-flex
.d-print-grid
.d-print-inline-flex
.d-print-table
.d-print-table-cell
.d-print-table-row
.d-sm-grid
.d-sm-table-row
.d-table-row
.d-xl-grid
.d-xl-table-row
.d-xxl-block
.d-xxl-flex
.d-xxl-grid
.d-xxl-inline
.d-xxl-inline-block
.d-xxl-inline-flex
.d-xxl-none
.d-xxl-table
.d-xxl-table-cell
.d-xxl-table-row
Dropdowns
.dropdown
.dropdown (split)
.dropdown-divider
.dropdown-header
.dropdown-item
.dropdown-item disabled
.dropdown-item-text
.dropdown-menu
.dropdown-menu-dark
.dropdown-menu-end
.dropdown-menu-lg-end
.dropdown-menu-lg-start
.dropdown-menu-md-end
.dropdown-menu-md-start
.dropdown-menu-right
.dropdown-menu-sm-end
.dropdown-menu-sm-start
.dropdown-menu-start
.dropdown-menu-xl-end
.dropdown-menu-xl-start
.dropdown-toggle
.dropdown-toggle-split
.dropleft
.dropright
.dropup
.dropup (split)
Figure
.figure
.figure-caption
.figure-img
Flexbox
.align-content-*-around
.align-content-*-center
.align-content-*-end
.align-content-*-start
.align-content-*-stretch
.align-items-*-baseline
.align-items-*-center
.align-items-*-end
.align-items-*-start
.align-items-*-stretch
.align-self-*-baseline
.align-self-*-center
.align-self-*-end
.align-self-*-start
.align-self-*-stretch
.flex-*-column
.flex-*-column-reverse
.flex-*-grow-0
.flex-*-grow-1
.flex-*-nowrap
.flex-*-row
.flex-*-row-reverse
.flex-*-shrink-0
.flex-*-shrink-1
.flex-*-wrap
.flex-*-wrap-reverse
.flex-fill
.flex-lg-fill
.flex-md-fill
.flex-sm-fill
.flex-xl-fill
.flex-xxl-column
.flex-xxl-column-reverse
.flex-xxl-fill
.flex-xxl-grow-0
.flex-xxl-grow-1
.flex-xxl-nowrap
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-shrink-0
.flex-xxl-shrink-1
.flex-xxl-wrap
.flex-xxl-wrap-reverse
.justify-content-*-around
.justify-content-*-between
.justify-content-*-center
.justify-content-*-end
.justify-content-*-start
.justify-content-around
.justify-content-between
.justify-content-center
.justify-content-end
.justify-content-evenly
.justify-content-lg-around
.justify-content-lg-between
.justify-content-lg-center
.justify-content-lg-end
.justify-content-lg-evenly
.justify-content-lg-start
.justify-content-md-around
.justify-content-md-between
.justify-content-md-center
.justify-content-md-end
.justify-content-md-evenly
.justify-content-md-start
.justify-content-sm-around
.justify-content-sm-between
.justify-content-sm-center
.justify-content-sm-end
.justify-content-sm-evenly
.justify-content-sm-start
.justify-content-start
.justify-content-xl-around
.justify-content-xl-between
.justify-content-xl-center
.justify-content-xl-end
.justify-content-xl-evenly
.justify-content-xl-start
.justify-content-xxl-around
.justify-content-xxl-between
.justify-content-xxl-center
.justify-content-xxl-end
.justify-content-xxl-evenly
.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
Form Input Groups
.checkbox
.dropdown
.input-group
.input-group-append
.input-group-lg
.input-group-prepend
.input-group-sm
.radio
.segmented buttons
Forms
form (full example)
.col-form-label
.col-form-label-lg
.col-form-label-sm
.disabled items
.form using the grid
.form-check
.form-check-inline
.form-check-input
.form-check-label
.form-control
.form-control-color
.form-control-file
.form-control-lg
.form-control-plaintext
.form-control-range
.form-control-sm
.form-floating
.form-group
.form-inline
.form-label
.form-select
.form-select-lg
.form-select-sm
.form-switch
.form-text
.input-group-text
.is-invalid
.is-valid
.readonly
.valid-feedback
.valid-tooltip
Grid
.col
.col-*
.col-# (<576px)
.col-1
.col-10
.col-11
.col-12
.col-2
.col-3
.col-4
.col-5
.col-6
.col-7
.col-8
.col-9
.col-auto
.col-lg-# (≥992px)
.col-lg-1
.col-md-# (≥768px)
.col-md-1
.col-sm-# (≥576px)
.col-sm-1
.col-xl-# (≥1200px)
.col-xl-1
.col-xxl-1
.container
.container-fluid
.container-sm
.contanier-lg
.contanier-md
.contanier-xl
.contanier-xxl
.g-0
.g-lg-0
.g-md-0
.g-sm-0
.g-xl-0
.g-xxl-0
.gap-0
.gap-lg-0
.gap-md-0
.gap-sm-0
.gap-xl-0
.gap-xxl-0
.gx-0
.gx-0
.gx-lg-0
.gx-lg-0
.gx-md-0
.gx-md-0
.gx-sm-0
.gx-sm-0
.gx-xl-0
.gx-xl-0
.gx-xxl-0
.gy-xxl-0
.nested columns
.no-gutters
.offset-*-#
.offset-0
.offset-lg-0
.offset-md-0
.offset-xxl-0
.order-#
.row
.row-cols-1
.row-cols-auto
.row-cols-lg-1
.row-cols-lg-auto
.row-cols-md-1
.row-cols-md-auto
.row-cols-sm-1
.row-cols-sm-auto
.row-cols-xl-1
.row-cols-xl-auto
.row-cols-xxl-1
.row-cols-xxl-auto
Images
.img-fluid
.img-thumbnail
Jumbotron
.jumbotron
.jumbotron-fluid
List Group
.list-group
.list-group with badges
.list-group with d-flex
.list-group-item active
.list-group-item disabled
.list-group-item-action
.list-group-item-danger
.list-group-item-dark
.list-group-item-info
.list-group-item-light
.list-group-item-primary
.list-group-item-secondary
.list-group-item-success
.list-group-item-warning
List group
.list-group-flush
.list-group-horizontal
.list-group-horizontal-lg
.list-group-horizontal-md
.list-group-horizontal-sm
.list-group-horizontal-xl
.list-group-horizontal-xxl
.list-group-item
Media Objects
.d-flex align-self-center
.d-flex align-self-end
.d-flex align-self-start
.media
.nested media
.right aligned media
Misc
.close
.embed-responsive
.initialism
.invisible
.overflow-auto
.overflow-hidden
.overflow-scroll
.overflow-visible
.pe-auto
.pe-none
.shadow
.shadow-lg
.shadow-none
.shadow-sm
.sr-only
.sr-only-focusable
.visible
.visually-hidden
.visually-hidden-focusable
Modal
.modal
.modal fade
.modal-dialog-centered
.modal-lg
.modal-sm
.modal-xl
Modals
.modal-body
.modal-content
.modal-dialog
.modal-dialog-scrollable
.modal-footer
.modal-fullscreen
.modal-fullscreen-lg-down
.modal-fullscreen-md-down
.modal-fullscreen-sm-down
.modal-fullscreen-xl-down
.modal-fullscreen-xxl-down
.modal-header
.modal-static
.modal-title
Navbar
.collapse navbar-collapse
.nav-item
.nav-link
.navbar
.navbar fixed-bottom
.navbar fixed-top
.navbar sticky-top
.navbar with form
.navbar-brand
.navbar-collapse
.navbar-dark
.navbar-dark bg-dark
.navbar-expand-*
.navbar-expand-lg
.navbar-expand-md
.navbar-expand-sm
.navbar-expand-xl
.navbar-expand-xxl
.navbar-light
.navbar-nav
.navbar-text
.navbar-toggler
.navbar-toggler-icon
Navs
.nav flex-column
.nav justify-content-*
.nav with flex utils
.nav-fill
.nav-justified
.nav-pills
.nav-pills with dropdown
.nav-tabs
.nav-tabs with dropdown
.nav.nav
.tab-content
.tab-pane
.ul.nav
Pagination
.page-item active
.page-item disabled
.pagination
.pagination-lg
.pagination-sm
Popover
.dismissible popover
.popovers
Positioning
.align-*
.bottom-0
.bottom-100
.bottom-50
.clearfix
.end-0
.end-100
.end-50
.fixed-bottom
.fixed-top
.float-*-left
.float-*-none
.float-*-right
.float-end
.float-lg-end
.float-lg-none
.float-lg-start
.float-md-end
.float-md-none
.float-md-start
.float-none
.float-sm-end
.float-sm-none
.float-sm-start
.float-start
.float-xl-end
.float-xl-none
.float-xl-start
.float-xxl-end
.float-xxl-none
.float-xxl-start
.position-absolute
.position-relative
.position-static
.start-0
.start-100
.start-50
.sticky-lg-top
.sticky-md-top
.sticky-sm-top
.sticky-top
.sticky-xl-top
.top-0
.top-100
.top-50
.translate-middle
Progress
.multiple progress-bar
.progress
.progress-bar
.progress-bar bg-*
.progress-bar with height
.progress-bar with label
.progress-bar-animated
.progress-bar-striped
.progress-bar-striped bg-*
Scrollspy
.data-spy
Sizing
.h-100
.h-25
.h-50
.h-75
.h-auto
.mh-100
.min-vw-100
.mw-100
.w-100
.w-100
.w-25
.w-50
.w-75
.w-auto
Spacing
.m-1 / m-*-#
.m-auto
.m-lg-0
.m-lg-auto
.m-md-0
.m-md-auto
.m-n1 / m-*-n#
.m-sm-0
.m-sm-auto
.m-xl-0
.m-xl-auto
.m-xxl-0
.m-xxl-auto
.mb-1 / mb-*-#
.mb-auto
.mb-lg-0
.mb-lg-auto
.mb-md-0
.mb-md-auto
.mb-sm-0
.mb-sm-auto
.mb-xl-0
.mb-xl-auto
.mb-xxl-0
.mb-xxl-auto
.me-auto
.me-lg-0
.me-lg-auto
.me-md-0
.me-md-auto
.me-sm-0
.me-sm-auto
.me-xl-0
.me-xl-auto
.me-xxl-0
.me-xxl-auto
.ml-1 / ml-*-#
.mr-1 / mr-*-#
.ms-auto
.ms-lg-0
.ms-lg-auto
.ms-md-0
.ms-md-auto
.ms-sm-0
.ms-sm-auto
.ms-xl-0
.ms-xl-auto
.ms-xxl-0
.ms-xxl-auto
.mt-1 / mt-*-#
.mt-auto
.mt-lg-0
.mt-lg-auto
.mt-md-0
.mt-md-auto
.mt-sm-0
.mt-sm-auto
.mt-xl-0
.mt-xl-auto
.mt-xxl-0
.mt-xxl-auto
.mx-1 / mx-*-#
.mx-auto
.mx-lg-0
.mx-lg-auto
.mx-md-0
.mx-md-auto
.mx-sm-0
.mx-sm-auto
.mx-xl-0
.mx-xl-auto
.mx-xxl-0
.mx-xxl-auto
.my-1 / my-*-#
.my-auto
.my-lg-0
.my-lg-auto
.my-md-0
.my-md-auto
.my-sm-0
.my-sm-auto
.my-xl-0
.my-xl-auto
.my-xxl-0
.my-xxl-auto
.p-1 / p-*-#
.p-lg-0
.p-md-0
.p-sm-0
.p-xl-0
.p-xxl-0
.pb-0
.pb-1 / pb-*-#
.pb-lg-0
.pb-md-0
.pb-sm-0
.pb-xl-0
.pb-xxl-0
.pe-0
.pe-lg-0
.pe-md-0
.pe-sm-0
.pe-xl-0
.pe-xxl-0
.pl-1 / pl-*-#
.pr-1 / pr-*-#
.ps-0
.ps-lg-0
.ps-md-0
.ps-sm-0
.ps-xl-0
.ps-xxl-0
.pt-0
.pt-1 / pt-*-#
.pt-lg-0
.pt-md-0
.pt-sm-0
.pt-xl-0
.pt-xxl-0
.px-0
.px-1 / px-*-#
.px-lg-0
.px-md-0
.px-sm-0
.px-xl-0
.px-xxl-0
.py-0
.py-1 / py-*-#
.py-lg-0
.py-md-0
.py-sm-0
.py-xl-0
.py-xxl-0
Spinner
.spinner-border
.spinner-border text-*
.spinner-border-sm
.spinner-grow
.spinner-grow text-*
.spinner-grow-sm
Tables
.caption-top
.table
.table-*-responsive
.table-active
.table-bordered
.table-borderless
.table-danger
.table-dark
.table-hover
.table-info
.table-light
.table-primary
.table-reflow
.table-responsive-xxl
.table-secondary
.table-sm
.table-striped
.table-success
.table-warning
.thead-dark
.thead-light
Text
.font-italic
.font-weight-bold
.font-weight-bolder
.font-weight-light
.font-weight-lighter
.font-weight-normal
.text-*-center
.text-*-left
.text-*-right
.text-black-50
.text-body
.text-capitalize
.text-decoration-none
.text-hide
.text-justify
.text-lowercase
.text-monospace
.text-muted
.text-nowrap
.text-truncate
.text-uppercase
.text-white-50
Toast
.toast-body
.toast-header
Toasts
.toast
Tooltips
.tooltip
Typography
.blockquote
.blockquote-footer
.blockquote-reverse
.display-# (1-4)
.display-1
.display-2
.display-3
.display-4
.display-5
.display-6
.dl-horizontal
.font-monospace
.fs-1
.fs-2
.fs-3
.fs-4
.fs-4
.fs-5
.fs-6
.fs-lg-1
.fs-md-1
.fs-sm-1
.fst-italic
.fst-normal
.fw-bolder
.fw-light
.fw-lighter
.fw-normal
.h1
.h2
.h3
.h4
.h5
.h6
.lead
.lh-1
.lh-base
.lh-lg
.lh-sm
.list-inline
.list-unstyled
.text-break
.text-center
.text-decoration-line-through
.text-decoration-underline
.text-end
.text-lg-center
.text-lg-end
.text-lg-start
.text-md-center
.text-md-end
.text-md-start
.text-reset
.text-sm-center
.text-sm-end
.text-sm-start
.text-start
.text-wrap
.text-xl-center
.text-xl-end
.text-xl-end
.text-xl-end
.text-xl-start
.text-xl-start
.text-xl-start
.text-xxl-center
.text-xxl-end
.text-xxl-start
Bootstrap 4 & 5
Bootstrap Editor
Bootstrap Components
Bootstrap Templates
×
+
Bootstrap Shuffle 2.0 will work with React!
Want to be the first to try?
Email
Notify me
Thanks! We'll be in touch.