Bootstrap CSS Classes

General

Bootstrap components

Bootstrap templates

Bootstrap editor

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

_default

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 CSS class .badge-pill

<span class="badge badge-pill badge-primary">Secondary</span>

Preview

CSS source

/* _badge.scss:33 */
.badge-pill {
  padding-right: $badge-pill-padding-x;
  padding-left: $badge-pill-padding-x;
  @include border-radius($badge-pill-border-radius);
}

Check .badge-pill in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

More Bootstrap CSS classes in Badges category

.badge

.badge-pill

.badge-secondary

.badge-info

.badge-warning

.badge-danger

.badge-dark

.badge-light

.badge-success

.badge-primary

An online editor for busy developers.

Combine elements and styles to create an entirely new UI Library!

Supporting tools

Plans

Bootstrap CSS Classes

Bootstrap CSS class .badge-pill

Preview

CSS source

Check .badge-pill in a real project

More Bootstrap CSS classes in Badges category

Products

UI Components

Support

Company

Shuffle's Editors

Combine elements and styles to create an entirely new UI Library!

Supporting tools

Plans

Shuffle’s design systems

Bootstrap

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bootstrap CSS Classes

Bootstrap CSS class .badge-pill

Preview

CSS source

Check .badge-pill in a real project

More Bootstrap CSS classes in Badges category

Products

UI Components

Support

Company