Skip to content

Instantly share code, notes, and snippets.

@JacobLett
Last active October 28, 2024 12:03
Show Gist options
  • Save JacobLett/13820300ab0534832a0f520df8c7c34d to your computer and use it in GitHub Desktop.
Save JacobLett/13820300ab0534832a0f520df8c7c34d to your computer and use it in GitHub Desktop.
Bootstrap List of Classes v5.1.0 - Get cheat sheet pdf https://bootstrapcreative.com/resources/bootstrap-5-cheat-sheet-classes-index/
/* v5.1.0 - August 2021 */
.accordion-body
.accordion-button
.accordion-collapse
.accordion-flush
.accordion-header
.accordion-item
.active
.alert
.alert-danger
.alert-dark
.alert-dismissible
.alert-heading
.alert-info
.alert-light
.alert-link
.alert-primary
.alert-secondary
.alert-success
.alert-warning
.align-baseline
.align-bottom
.align-content-around
.align-content-between
.align-content-center
.align-content-end
.align-content-lg-around
.align-content-lg-between
.align-content-lg-center
.align-content-lg-end
.align-content-lg-start
.align-content-lg-stretch
.align-content-md-around
.align-content-md-between
.align-content-md-center
.align-content-md-end
.align-content-md-start
.align-content-md-stretch
.align-content-sm-around
.align-content-sm-between
.align-content-sm-center
.align-content-sm-end
.align-content-sm-start
.align-content-sm-stretch
.align-content-start
.align-content-stretch
.align-content-xl-around
.align-content-xl-between
.align-content-xl-center
.align-content-xl-end
.align-content-xl-start
.align-content-xl-stretch
.align-content-xxl-around
.align-content-xxl-between
.align-content-xxl-center
.align-content-xxl-end
.align-content-xxl-start
.align-content-xxl-stretch
.align-items-baseline
.align-items-center
.align-items-end
.align-items-lg-baseline
.align-items-lg-center
.align-items-lg-end
.align-items-lg-start
.align-items-lg-stretch
.align-items-md-baseline
.align-items-md-center
.align-items-md-end
.align-items-md-start
.align-items-md-stretch
.align-items-sm-baseline
.align-items-sm-center
.align-items-sm-end
.align-items-sm-start
.align-items-sm-stretch
.align-items-start
.align-items-stretch
.align-items-xl-baseline
.align-items-xl-center
.align-items-xl-end
.align-items-xl-start
.align-items-xl-stretch
.align-items-xxl-baseline
.align-items-xxl-center
.align-items-xxl-end
.align-items-xxl-start
.align-items-xxl-stretch
.align-middle
.align-self-auto
.align-self-baseline
.align-self-center
.align-self-end
.align-self-lg-auto
.align-self-lg-baseline
.align-self-lg-center
.align-self-lg-end
.align-self-lg-start
.align-self-lg-stretch
.align-self-md-auto
.align-self-md-baseline
.align-self-md-center
.align-self-md-end
.align-self-md-start
.align-self-md-stretch
.align-self-sm-auto
.align-self-sm-baseline
.align-self-sm-center
.align-self-sm-end
.align-self-sm-start
.align-self-sm-stretch
.align-self-start
.align-self-stretch
.align-self-xl-auto
.align-self-xl-baseline
.align-self-xl-center
.align-self-xl-end
.align-self-xl-start
.align-self-xl-stretch
.align-self-xxl-auto
.align-self-xxl-baseline
.align-self-xxl-center
.align-self-xxl-end
.align-self-xxl-start
.align-self-xxl-stretch
.align-text-bottom
.align-text-top
.align-top
.badge
.bg-black
.bg-body
.bg-danger
.bg-dark
.bg-gradient
.bg-info
.bg-light
.bg-opacity-10
.bg-opacity-100
.bg-opacity-25
.bg-opacity-50
.bg-opacity-75
.bg-primary
.bg-secondary
.bg-success
.bg-transparent
.bg-warning
.bg-white
.blockquote
.blockquote-footer
.border
.border-0
.border-1
.border-2
.border-3
.border-4
.border-5
.border-bottom
.border-bottom-0
.border-danger
.border-dark
.border-end
.border-end-0
.border-info
.border-light
.border-primary
.border-secondary
.border-start
.border-start-0
.border-success
.border-top
.border-top-0
.border-warning
.border-white
.bottom-0
.bottom-100
.bottom-50
.breadcrumb
.breadcrumb-item
.bs-popover-auto
.bs-popover-bottom
.bs-popover-end
.bs-popover-start
.bs-popover-top
.bs-tooltip-auto
.bs-tooltip-bottom
.bs-tooltip-end
.bs-tooltip-start
.bs-tooltip-top
.btn
.btn-check
.btn-close
.btn-close-white
.btn-danger
.btn-dark
.btn-group
.btn-group-lg
.btn-group-sm
.btn-group-vertical
.btn-info
.btn-lg
.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-sm
.btn-success
.btn-toolbar
.btn-warning
.caption-top
.card
.card-body
.card-footer
.card-group
.card-header
.card-header-pills
.card-header-tabs
.card-img
.card-img-bottom
.card-img-overlay
.card-img-top
.card-link
.card-subtitle
.card-text
.card-title
.carousel
.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
.carousel-item-end
.carousel-item-next
.carousel-item-prev
.carousel-item-start
.clearfix
.col
.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-form-label
.col-form-label-lg
.col-form-label-sm
.col-lg
.col-lg-1
.col-lg-10
.col-lg-11
.col-lg-12
.col-lg-2
.col-lg-3
.col-lg-4
.col-lg-5
.col-lg-6
.col-lg-7
.col-lg-8
.col-lg-9
.col-lg-auto
.col-md
.col-md-1
.col-md-10
.col-md-11
.col-md-12
.col-md-2
.col-md-3
.col-md-4
.col-md-5
.col-md-6
.col-md-7
.col-md-8
.col-md-9
.col-md-auto
.col-sm
.col-sm-1
.col-sm-10
.col-sm-11
.col-sm-12
.col-sm-2
.col-sm-3
.col-sm-4
.col-sm-5
.col-sm-6
.col-sm-7
.col-sm-8
.col-sm-9
.col-sm-auto
.col-xl
.col-xl-1
.col-xl-10
.col-xl-11
.col-xl-12
.col-xl-2
.col-xl-3
.col-xl-4
.col-xl-5
.col-xl-6
.col-xl-7
.col-xl-8
.col-xl-9
.col-xl-auto
.col-xxl
.col-xxl-1
.col-xxl-10
.col-xxl-11
.col-xxl-12
.col-xxl-2
.col-xxl-3
.col-xxl-4
.col-xxl-5
.col-xxl-6
.col-xxl-7
.col-xxl-8
.col-xxl-9
.col-xxl-auto
.collapse
.collapse-horizontal
.collapsed
.collapsing
.container
.container-fluid
.container-lg
.container-md
.container-sm
.container-xl
.container-xxl
.d-block
.d-flex
.d-grid
.d-inline
.d-inline-block
.d-inline-flex
.d-lg-block
.d-lg-flex
.d-lg-grid
.d-lg-inline
.d-lg-inline-block
.d-lg-inline-flex
.d-lg-none
.d-lg-table
.d-lg-table-cell
.d-lg-table-row
.d-md-block
.d-md-flex
.d-md-grid
.d-md-inline
.d-md-inline-block
.d-md-inline-flex
.d-md-none
.d-md-table
.d-md-table-cell
.d-md-table-row
.d-none
.d-print-block
.d-print-flex
.d-print-grid
.d-print-inline
.d-print-inline-block
.d-print-inline-flex
.d-print-none
.d-print-table
.d-print-table-cell
.d-print-table-row
.d-sm-block
.d-sm-flex
.d-sm-grid
.d-sm-inline
.d-sm-inline-block
.d-sm-inline-flex
.d-sm-none
.d-sm-table
.d-sm-table-cell
.d-sm-table-row
.d-table
.d-table-cell
.d-table-row
.d-xl-block
.d-xl-flex
.d-xl-grid
.d-xl-inline
.d-xl-inline-block
.d-xl-inline-flex
.d-xl-none
.d-xl-table
.d-xl-table-cell
.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
.disabled
.display-1
.display-2
.display-3
.display-4
.display-5
.display-6
.dropdown
.dropdown-divider
.dropdown-header
.dropdown-item
.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-sm-end
.dropdown-menu-sm-start
.dropdown-menu-start
.dropdown-menu-xl-end
.dropdown-menu-xl-start
.dropdown-menu-xxl-end
.dropdown-menu-xxl-start
.dropdown-toggle
.dropdown-toggle-split
.dropend
.dropstart
.dropup
.end-0
.end-100
.end-50
.fade
.figure
.figure-caption
.figure-img
.fixed-bottom
.fixed-top
.flex-column
.flex-column-reverse
.flex-fill
.flex-grow-0
.flex-grow-1
.flex-lg-column
.flex-lg-column-reverse
.flex-lg-fill
.flex-lg-grow-0
.flex-lg-grow-1
.flex-lg-nowrap
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-shrink-0
.flex-lg-shrink-1
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-md-column
.flex-md-column-reverse
.flex-md-fill
.flex-md-grow-0
.flex-md-grow-1
.flex-md-nowrap
.flex-md-row
.flex-md-row-reverse
.flex-md-shrink-0
.flex-md-shrink-1
.flex-md-wrap
.flex-md-wrap-reverse
.flex-nowrap
.flex-row
.flex-row-reverse
.flex-shrink-0
.flex-shrink-1
.flex-sm-column
.flex-sm-column-reverse
.flex-sm-fill
.flex-sm-grow-0
.flex-sm-grow-1
.flex-sm-nowrap
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-shrink-0
.flex-sm-shrink-1
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-wrap
.flex-wrap-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xl-fill
.flex-xl-grow-0
.flex-xl-grow-1
.flex-xl-nowrap
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-shrink-0
.flex-xl-shrink-1
.flex-xl-wrap
.flex-xl-wrap-reverse
.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
.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
.font-monospace
.form-check
.form-check-inline
.form-check-input
.form-check-label
.form-control
.form-control-color
.form-control-lg
.form-control-plaintext
.form-control-sm
.form-floating
.form-label
.form-range
.form-select
.form-select-lg
.form-select-sm
.form-switch
.form-text
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
.fst-italic
.fst-normal
.fw-bold
.fw-bolder
.fw-light
.fw-lighter
.fw-normal
.g-0
.g-1
.g-2
.g-3
.g-4
.g-5
.g-lg-0
.g-lg-1
.g-lg-2
.g-lg-3
.g-lg-4
.g-lg-5
.g-md-0
.g-md-1
.g-md-2
.g-md-3
.g-md-4
.g-md-5
.g-sm-0
.g-sm-1
.g-sm-2
.g-sm-3
.g-sm-4
.g-sm-5
.g-xl-0
.g-xl-1
.g-xl-2
.g-xl-3
.g-xl-4
.g-xl-5
.g-xxl-0
.g-xxl-1
.g-xxl-2
.g-xxl-3
.g-xxl-4
.g-xxl-5
.gap-0
.gap-1
.gap-2
.gap-3
.gap-4
.gap-5
.gap-lg-0
.gap-lg-1
.gap-lg-2
.gap-lg-3
.gap-lg-4
.gap-lg-5
.gap-md-0
.gap-md-1
.gap-md-2
.gap-md-3
.gap-md-4
.gap-md-5
.gap-sm-0
.gap-sm-1
.gap-sm-2
.gap-sm-3
.gap-sm-4
.gap-sm-5
.gap-xl-0
.gap-xl-1
.gap-xl-2
.gap-xl-3
.gap-xl-4
.gap-xl-5
.gap-xxl-0
.gap-xxl-1
.gap-xxl-2
.gap-xxl-3
.gap-xxl-4
.gap-xxl-5
.gx-0
.gx-1
.gx-2
.gx-3
.gx-4
.gx-5
.gx-lg-0
.gx-lg-1
.gx-lg-2
.gx-lg-3
.gx-lg-4
.gx-lg-5
.gx-md-0
.gx-md-1
.gx-md-2
.gx-md-3
.gx-md-4
.gx-md-5
.gx-sm-0
.gx-sm-1
.gx-sm-2
.gx-sm-3
.gx-sm-4
.gx-sm-5
.gx-xl-0
.gx-xl-1
.gx-xl-2
.gx-xl-3
.gx-xl-4
.gx-xl-5
.gx-xxl-0
.gx-xxl-1
.gx-xxl-2
.gx-xxl-3
.gx-xxl-4
.gx-xxl-5
.gy-0
.gy-1
.gy-2
.gy-3
.gy-4
.gy-5
.gy-lg-0
.gy-lg-1
.gy-lg-2
.gy-lg-3
.gy-lg-4
.gy-lg-5
.gy-md-0
.gy-md-1
.gy-md-2
.gy-md-3
.gy-md-4
.gy-md-5
.gy-sm-0
.gy-sm-1
.gy-sm-2
.gy-sm-3
.gy-sm-4
.gy-sm-5
.gy-xl-0
.gy-xl-1
.gy-xl-2
.gy-xl-3
.gy-xl-4
.gy-xl-5
.gy-xxl-0
.gy-xxl-1
.gy-xxl-2
.gy-xxl-3
.gy-xxl-4
.gy-xxl-5
.h-100
.h-25
.h-50
.h-75
.h-auto
.h1
.h2
.h3
.h4
.h5
.h6
.has-validation
.hstack
.img-fluid
.img-thumbnail
.initialism
.input-group
.input-group-lg
.input-group-sm
.input-group-text
.invalid-feedback
.invalid-tooltip
.invisible
.is-invalid
.is-valid
.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
.lead
.lh-1
.lh-base
.lh-lg
.lh-sm
.link-danger
.link-dark
.link-info
.link-light
.link-primary
.link-secondary
.link-success
.link-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
.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-numbered
.list-inline
.list-inline-item
.list-unstyled
.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
.m-auto
.m-lg-0
.m-lg-1
.m-lg-2
.m-lg-3
.m-lg-4
.m-lg-5
.m-lg-auto
.m-md-0
.m-md-1
.m-md-2
.m-md-3
.m-md-4
.m-md-5
.m-md-auto
.m-sm-0
.m-sm-1
.m-sm-2
.m-sm-3
.m-sm-4
.m-sm-5
.m-sm-auto
.m-xl-0
.m-xl-1
.m-xl-2
.m-xl-3
.m-xl-4
.m-xl-5
.m-xl-auto
.m-xxl-0
.m-xxl-1
.m-xxl-2
.m-xxl-3
.m-xxl-4
.m-xxl-5
.m-xxl-auto
.mark
.mb-0
.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.mb-auto
.mb-lg-0
.mb-lg-1
.mb-lg-2
.mb-lg-3
.mb-lg-4
.mb-lg-5
.mb-lg-auto
.mb-md-0
.mb-md-1
.mb-md-2
.mb-md-3
.mb-md-4
.mb-md-5
.mb-md-auto
.mb-sm-0
.mb-sm-1
.mb-sm-2
.mb-sm-3
.mb-sm-4
.mb-sm-5
.mb-sm-auto
.mb-xl-0
.mb-xl-1
.mb-xl-2
.mb-xl-3
.mb-xl-4
.mb-xl-5
.mb-xl-auto
.mb-xxl-0
.mb-xxl-1
.mb-xxl-2
.mb-xxl-3
.mb-xxl-4
.mb-xxl-5
.mb-xxl-auto
.me-0
.me-1
.me-2
.me-3
.me-4
.me-5
.me-auto
.me-lg-0
.me-lg-1
.me-lg-2
.me-lg-3
.me-lg-4
.me-lg-5
.me-lg-auto
.me-md-0
.me-md-1
.me-md-2
.me-md-3
.me-md-4
.me-md-5
.me-md-auto
.me-sm-0
.me-sm-1
.me-sm-2
.me-sm-3
.me-sm-4
.me-sm-5
.me-sm-auto
.me-xl-0
.me-xl-1
.me-xl-2
.me-xl-3
.me-xl-4
.me-xl-5
.me-xl-auto
.me-xxl-0
.me-xxl-1
.me-xxl-2
.me-xxl-3
.me-xxl-4
.me-xxl-5
.me-xxl-auto
.mh-100
.min-vh-100
.min-vw-100
.modal
.modal-backdrop
.modal-body
.modal-content
.modal-dialog
.modal-dialog-centered
.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-lg
.modal-sm
.modal-static
.modal-title
.modal-xl
.ms-0
.ms-1
.ms-2
.ms-3
.ms-4
.ms-5
.ms-auto
.ms-lg-0
.ms-lg-1
.ms-lg-2
.ms-lg-3
.ms-lg-4
.ms-lg-5
.ms-lg-auto
.ms-md-0
.ms-md-1
.ms-md-2
.ms-md-3
.ms-md-4
.ms-md-5
.ms-md-auto
.ms-sm-0
.ms-sm-1
.ms-sm-2
.ms-sm-3
.ms-sm-4
.ms-sm-5
.ms-sm-auto
.ms-xl-0
.ms-xl-1
.ms-xl-2
.ms-xl-3
.ms-xl-4
.ms-xl-5
.ms-xl-auto
.ms-xxl-0
.ms-xxl-1
.ms-xxl-2
.ms-xxl-3
.ms-xxl-4
.ms-xxl-5
.ms-xxl-auto
.mt-0
.mt-1
.mt-2
.mt-3
.mt-4
.mt-5
.mt-auto
.mt-lg-0
.mt-lg-1
.mt-lg-2
.mt-lg-3
.mt-lg-4
.mt-lg-5
.mt-lg-auto
.mt-md-0
.mt-md-1
.mt-md-2
.mt-md-3
.mt-md-4
.mt-md-5
.mt-md-auto
.mt-sm-0
.mt-sm-1
.mt-sm-2
.mt-sm-3
.mt-sm-4
.mt-sm-5
.mt-sm-auto
.mt-xl-0
.mt-xl-1
.mt-xl-2
.mt-xl-3
.mt-xl-4
.mt-xl-5
.mt-xl-auto
.mt-xxl-0
.mt-xxl-1
.mt-xxl-2
.mt-xxl-3
.mt-xxl-4
.mt-xxl-5
.mt-xxl-auto
.mw-100
.mx-0
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.mx-auto
.mx-lg-0
.mx-lg-1
.mx-lg-2
.mx-lg-3
.mx-lg-4
.mx-lg-5
.mx-lg-auto
.mx-md-0
.mx-md-1
.mx-md-2
.mx-md-3
.mx-md-4
.mx-md-5
.mx-md-auto
.mx-sm-0
.mx-sm-1
.mx-sm-2
.mx-sm-3
.mx-sm-4
.mx-sm-5
.mx-sm-auto
.mx-xl-0
.mx-xl-1
.mx-xl-2
.mx-xl-3
.mx-xl-4
.mx-xl-5
.mx-xl-auto
.mx-xxl-0
.mx-xxl-1
.mx-xxl-2
.mx-xxl-3
.mx-xxl-4
.mx-xxl-5
.mx-xxl-auto
.my-0
.my-1
.my-2
.my-3
.my-4
.my-5
.my-auto
.my-lg-0
.my-lg-1
.my-lg-2
.my-lg-3
.my-lg-4
.my-lg-5
.my-lg-auto
.my-md-0
.my-md-1
.my-md-2
.my-md-3
.my-md-4
.my-md-5
.my-md-auto
.my-sm-0
.my-sm-1
.my-sm-2
.my-sm-3
.my-sm-4
.my-sm-5
.my-sm-auto
.my-xl-0
.my-xl-1
.my-xl-2
.my-xl-3
.my-xl-4
.my-xl-5
.my-xl-auto
.my-xxl-0
.my-xxl-1
.my-xxl-2
.my-xxl-3
.my-xxl-4
.my-xxl-5
.my-xxl-auto
.nav
.nav-fill
.nav-item
.nav-justified
.nav-link
.nav-pills
.nav-tabs
.navbar
.navbar-brand
.navbar-collapse
.navbar-dark
.navbar-expand
.navbar-expand-lg
.navbar-expand-md
.navbar-expand-sm
.navbar-expand-xl
.navbar-expand-xxl
.navbar-light
.navbar-nav
.navbar-nav-scroll
.navbar-text
.navbar-toggler
.navbar-toggler-icon
.offcanvas
.offcanvas-backdrop
.offcanvas-body
.offcanvas-bottom
.offcanvas-end
.offcanvas-header
.offcanvas-start
.offcanvas-title
.offcanvas-top
.offset-1
.offset-10
.offset-11
.offset-2
.offset-3
.offset-4
.offset-5
.offset-6
.offset-7
.offset-8
.offset-9
.offset-lg-0
.offset-lg-1
.offset-lg-10
.offset-lg-11
.offset-lg-2
.offset-lg-3
.offset-lg-4
.offset-lg-5
.offset-lg-6
.offset-lg-7
.offset-lg-8
.offset-lg-9
.offset-md-0
.offset-md-1
.offset-md-10
.offset-md-11
.offset-md-2
.offset-md-3
.offset-md-4
.offset-md-5
.offset-md-6
.offset-md-7
.offset-md-8
.offset-md-9
.offset-sm-0
.offset-sm-1
.offset-sm-10
.offset-sm-11
.offset-sm-2
.offset-sm-3
.offset-sm-4
.offset-sm-5
.offset-sm-6
.offset-sm-7
.offset-sm-8
.offset-sm-9
.offset-xl-0
.offset-xl-1
.offset-xl-10
.offset-xl-11
.offset-xl-2
.offset-xl-3
.offset-xl-4
.offset-xl-5
.offset-xl-6
.offset-xl-7
.offset-xl-8
.offset-xl-9
.offset-xxl-0
.offset-xxl-1
.offset-xxl-10
.offset-xxl-11
.offset-xxl-2
.offset-xxl-3
.offset-xxl-4
.offset-xxl-5
.offset-xxl-6
.offset-xxl-7
.offset-xxl-8
.offset-xxl-9
.opacity-0
.opacity-100
.opacity-25
.opacity-50
.opacity-75
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-first
.order-last
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-first
.order-lg-last
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-first
.order-md-last
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-first
.order-sm-last
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-first
.order-xl-last
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
.order-xxl-first
.order-xxl-last
.overflow-auto
.overflow-hidden
.overflow-scroll
.overflow-visible
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.p-lg-0
.p-lg-1
.p-lg-2
.p-lg-3
.p-lg-4
.p-lg-5
.p-md-0
.p-md-1
.p-md-2
.p-md-3
.p-md-4
.p-md-5
.p-sm-0
.p-sm-1
.p-sm-2
.p-sm-3
.p-sm-4
.p-sm-5
.p-xl-0
.p-xl-1
.p-xl-2
.p-xl-3
.p-xl-4
.p-xl-5
.p-xxl-0
.p-xxl-1
.p-xxl-2
.p-xxl-3
.p-xxl-4
.p-xxl-5
.page-item
.page-link
.pagination
.pagination-lg
.pagination-sm
.pb-0
.pb-1
.pb-2
.pb-3
.pb-4
.pb-5
.pb-lg-0
.pb-lg-1
.pb-lg-2
.pb-lg-3
.pb-lg-4
.pb-lg-5
.pb-md-0
.pb-md-1
.pb-md-2
.pb-md-3
.pb-md-4
.pb-md-5
.pb-sm-0
.pb-sm-1
.pb-sm-2
.pb-sm-3
.pb-sm-4
.pb-sm-5
.pb-xl-0
.pb-xl-1
.pb-xl-2
.pb-xl-3
.pb-xl-4
.pb-xl-5
.pb-xxl-0
.pb-xxl-1
.pb-xxl-2
.pb-xxl-3
.pb-xxl-4
.pb-xxl-5
.pe-0
.pe-1
.pe-2
.pe-3
.pe-4
.pe-5
.pe-auto
.pe-lg-0
.pe-lg-1
.pe-lg-2
.pe-lg-3
.pe-lg-4
.pe-lg-5
.pe-md-0
.pe-md-1
.pe-md-2
.pe-md-3
.pe-md-4
.pe-md-5
.pe-none
.pe-sm-0
.pe-sm-1
.pe-sm-2
.pe-sm-3
.pe-sm-4
.pe-sm-5
.pe-xl-0
.pe-xl-1
.pe-xl-2
.pe-xl-3
.pe-xl-4
.pe-xl-5
.pe-xxl-0
.pe-xxl-1
.pe-xxl-2
.pe-xxl-3
.pe-xxl-4
.pe-xxl-5
.placeholder
.placeholder-glow
.placeholder-lg
.placeholder-sm
.placeholder-wave
.placeholder-xs
.pointer-event
.popover
.popover-arrow
.popover-body
.popover-header
.position-absolute
.position-fixed
.position-relative
.position-static
.position-sticky
.progress
.progress-bar
.progress-bar-animated
.progress-bar-striped
.ps-0
.ps-1
.ps-2
.ps-3
.ps-4
.ps-5
.ps-lg-0
.ps-lg-1
.ps-lg-2
.ps-lg-3
.ps-lg-4
.ps-lg-5
.ps-md-0
.ps-md-1
.ps-md-2
.ps-md-3
.ps-md-4
.ps-md-5
.ps-sm-0
.ps-sm-1
.ps-sm-2
.ps-sm-3
.ps-sm-4
.ps-sm-5
.ps-xl-0
.ps-xl-1
.ps-xl-2
.ps-xl-3
.ps-xl-4
.ps-xl-5
.ps-xxl-0
.ps-xxl-1
.ps-xxl-2
.ps-xxl-3
.ps-xxl-4
.ps-xxl-5
.pt-0
.pt-1
.pt-2
.pt-3
.pt-4
.pt-5
.pt-lg-0
.pt-lg-1
.pt-lg-2
.pt-lg-3
.pt-lg-4
.pt-lg-5
.pt-md-0
.pt-md-1
.pt-md-2
.pt-md-3
.pt-md-4
.pt-md-5
.pt-sm-0
.pt-sm-1
.pt-sm-2
.pt-sm-3
.pt-sm-4
.pt-sm-5
.pt-xl-0
.pt-xl-1
.pt-xl-2
.pt-xl-3
.pt-xl-4
.pt-xl-5
.pt-xxl-0
.pt-xxl-1
.pt-xxl-2
.pt-xxl-3
.pt-xxl-4
.pt-xxl-5
.px-0
.px-1
.px-2
.px-3
.px-4
.px-5
.px-lg-0
.px-lg-1
.px-lg-2
.px-lg-3
.px-lg-4
.px-lg-5
.px-md-0
.px-md-1
.px-md-2
.px-md-3
.px-md-4
.px-md-5
.px-sm-0
.px-sm-1
.px-sm-2
.px-sm-3
.px-sm-4
.px-sm-5
.px-xl-0
.px-xl-1
.px-xl-2
.px-xl-3
.px-xl-4
.px-xl-5
.px-xxl-0
.px-xxl-1
.px-xxl-2
.px-xxl-3
.px-xxl-4
.px-xxl-5
.py-0
.py-1
.py-2
.py-3
.py-4
.py-5
.py-lg-0
.py-lg-1
.py-lg-2
.py-lg-3
.py-lg-4
.py-lg-5
.py-md-0
.py-md-1
.py-md-2
.py-md-3
.py-md-4
.py-md-5
.py-sm-0
.py-sm-1
.py-sm-2
.py-sm-3
.py-sm-4
.py-sm-5
.py-xl-0
.py-xl-1
.py-xl-2
.py-xl-3
.py-xl-4
.py-xl-5
.py-xxl-0
.py-xxl-1
.py-xxl-2
.py-xxl-3
.py-xxl-4
.py-xxl-5
.ratio
.ratio-16x9
.ratio-1x1
.ratio-21x9
.ratio-4x3
.rounded
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-bottom
.rounded-circle
.rounded-end
.rounded-pill
.rounded-start
.rounded-top
.row
.row-cols-1
.row-cols-2
.row-cols-3
.row-cols-4
.row-cols-5
.row-cols-6
.row-cols-auto
.row-cols-lg-1
.row-cols-lg-2
.row-cols-lg-3
.row-cols-lg-4
.row-cols-lg-5
.row-cols-lg-6
.row-cols-lg-auto
.row-cols-md-1
.row-cols-md-2
.row-cols-md-3
.row-cols-md-4
.row-cols-md-5
.row-cols-md-6
.row-cols-md-auto
.row-cols-sm-1
.row-cols-sm-2
.row-cols-sm-3
.row-cols-sm-4
.row-cols-sm-5
.row-cols-sm-6
.row-cols-sm-auto
.row-cols-xl-1
.row-cols-xl-2
.row-cols-xl-3
.row-cols-xl-4
.row-cols-xl-5
.row-cols-xl-6
.row-cols-xl-auto
.row-cols-xxl-1
.row-cols-xxl-2
.row-cols-xxl-3
.row-cols-xxl-4
.row-cols-xxl-5
.row-cols-xxl-6
.row-cols-xxl-auto
.shadow
.shadow-lg
.shadow-none
.shadow-sm
.show
.showing
.small
.spinner-border
.spinner-border-sm
.spinner-grow
.spinner-grow-sm
.start-0
.start-100
.start-50
.sticky-lg-top
.sticky-md-top
.sticky-sm-top
.sticky-top
.sticky-xl-top
.sticky-xxl-top
.stretched-link
.tab-content
.tab-pane
.table
.table-active
.table-bordered
.table-borderless
.table-danger
.table-dark
.table-hover
.table-info
.table-light
.table-primary
.table-responsive
.table-responsive-lg
.table-responsive-md
.table-responsive-sm
.table-responsive-xl
.table-responsive-xxl
.table-secondary
.table-sm
.table-striped
.table-success
.table-warning
.text-black
.text-black-50
.text-body
.text-break
.text-capitalize
.text-center
.text-danger
.text-dark
.text-decoration-line-through
.text-decoration-none
.text-decoration-underline
.text-end
.text-info
.text-lg-center
.text-lg-end
.text-lg-start
.text-light
.text-lowercase
.text-md-center
.text-md-end
.text-md-start
.text-muted
.text-nowrap
.text-opacity-100
.text-opacity-25
.text-opacity-50
.text-opacity-75
.text-primary
.text-reset
.text-secondary
.text-sm-center
.text-sm-end
.text-sm-start
.text-start
.text-success
.text-truncate
.text-uppercase
.text-warning
.text-white
.text-white-50
.text-wrap
.text-xl-center
.text-xl-end
.text-xl-start
.text-xxl-center
.text-xxl-end
.text-xxl-start
.toast
.toast-body
.toast-container
.toast-header
.tooltip
.tooltip-arrow
.tooltip-inner
.top-0
.top-100
.top-50
.translate-middle
.translate-middle-x
.translate-middle-y
.user-select-all
.user-select-auto
.user-select-none
.valid-feedback
.valid-tooltip
.vh-100
.visible
.visually-hidden
.visually-hidden-focusable
.vr
.vstack
.vw-100
.w-100
.w-25
.w-50
.w-75
.w-auto
.was-validated
@FahimMontasir
Copy link

1647 class!

Copy link

ghost commented Feb 13, 2021

great brother

@wantritu
Copy link

wantritu commented Mar 29, 2021

Hi, how to use it ? could you give me some examples on how to use it ? do I use it in app.css or on the actual view im doing ?

@aroraakshay354
Copy link

aroraakshay354 commented May 16, 2021

Hi, how to use it ? could you give me some examples on how to use it ? do I use it in app.css or on the actual view im doing ?

Hey, Wantritu I don't know about that you can use bootstrap in app.css or not but I'm gonna tell you how to use bootstrap in html maybe you already know it ig but still I'm gonna tell you how to use bootstrap in your website or html file

  1. Copy this link element and paste it inside of the head elements inside of the .html file here is the link element
  1. Then Copy this javascript bootstrap elements in the bottom of the body here is the javascript bootstrap elements
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

just paste it as it is

  1. And if you don't know how to use bootstrap classes then don't worry it's all so simple here imma give you a bootstrap cheatsheet where you can understand how to use these all bootstrap classes in your html file
    https://getbootstrap.com/docs/5.0/examples/cheatsheet/#scrollspyHeading3 this is the link of bootstrap cheatsheet where you can learn how to use bootstrap classes in your .html file

  2. And yeah you can use these bootstrap classes in .css file to customize your webpage, buttons, images or links however you want.

Have a Good day, Happy Coding!

@MeEuro
Copy link

MeEuro commented Aug 29, 2021

kind of out date though, we're in release version 5.0.2 -- all your "mr" and "ml" all the "left" and "right " are out dated

@JacobLett
Copy link
Author

kind of out date though, we're in release version 5.0.2 -- all your "mr" and "ml" all the "left" and "right " are out dated

Updated to classes to 5.1

@srikarblog
Copy link

Thank you

@beniaXcode
Copy link

thank you

@AyoubZit
Copy link

AyoubZit commented Apr 4, 2022

Thank you

@villeantropist
Copy link

Thanks a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment