Reference

Class reference

Search every public Boobstrap class generated from the exact installed stylesheet.

Reference guideCopy-ready referencev0.7.0 current

Reference

All classes

This index is generated from the exact compiled stylesheet used by this site. It includes every public bs- selector and its core declaration.

Compose classes by responsibility

Start with a component class, add a variant, then use the smallest set of utilities needed by the surrounding layout.

Autosaved No pending changes

HTML · Component and utility composition

<div class="bs-flex bs-flex-wrap bs-items-center bs-gap-3">
  <button class="bs-btn bs-btn-primary bs-btn-sm" type="button">Save</button>
  <span class="bs-badge">Autosaved</span>
  <span class="bs-text-sm bs-text-muted">No pending changes</span>
</div>

Search

Filter by a component name such as btn, a purpose such as gap, or a declaration value.

Layering

Component classes establish structure; variants change intent; utilities handle local composition and spacing.

Stability

Only classes beginning with bs- are public framework selectors. Documentation-only classes are not part of the package API.

Filter classes

All public classes1099

.bs-absolute

position: absolute;

.bs-accordion

overflow: hidden; border: 1px solid var(--bs-color-border); border-radius: var(--bs-radius-lg); background: var(--bs-color-surface);

.bs-accordion-body

padding: 0 var(--bs-space-5) var(--bs-space-5); color: var(--bs-color-text-muted);

.bs-accordion-compact

padding: var(--bs-space-3) var(--bs-space-4);

.bs-accordion-flush

border-inline: 0; border-radius: 0;

.bs-accordion-header

margin: 0;

.bs-accordion-icon

flex: none; transition: transform var(--bs-duration-normal) var(--bs-ease-standard);

.bs-accordion-item

border-block-start: 1px solid var(--bs-color-border);

.bs-accordion-panel

display: none;

.bs-accordion-trigger

display: flex; inline-size: 100%; align-items: center; justify-content: space-between; gap: var(--bs-space-4); border: 0; padding: var(--bs-space-4) var(--bs-space-5); color: var(--bs-color-text); background: transparent; font: inherit; font-weight: 700; text-align: start; cursor: pointer;

.bs-alert

display: flex; align-items: flex-start; gap: var(--bs-space-3); padding: var(--bs-space-4); color: var(--bs-color-text-muted); background: rgb(255 255 255 / 2%); border: 1px solid var(--bs-color-border); border-radius: var(--bs-radius-lg);

.bs-alert-danger

background: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 8%, transparent); border-color: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 24%, transparent);

.bs-alert-dialog

--bs-dialog-width: 30rem;

.bs-alert-dialog-danger

color: var(--bs-color-danger); background: color-mix(in srgb, var(--bs-color-danger) 14%, transparent);

.bs-alert-dialog-icon

grid-area: icon; display: inline-grid; inline-size: 2.5rem; block-size: 2.5rem; place-items: center; color: var(--bs-color-warning); background: color-mix(in srgb, var(--bs-color-warning) 14%, transparent); border-radius: 50%;

.bs-alert-dialog-success

color: var(--bs-color-success); background: color-mix(in srgb, var(--bs-color-success) 14%, transparent);

.bs-alert-info

background: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 8%, transparent); border-color: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 24%, transparent);

.bs-alert-primary

background: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 8%, transparent); border-color: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 24%, transparent);

.bs-alert-success

background: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 8%, transparent); border-color: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 24%, transparent);

.bs-alert-title

display: block; margin-block-end: var(--bs-space-1); color: var(--bs-color-text); font-weight: 650;

.bs-alert-warning

background: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 8%, transparent); border-color: color-mix(in srgb, var(--bs-alert-accent, var(--bs-color-primary)) 24%, transparent);

.bs-aspect-square

aspect-ratio: 1 / 1;

.bs-aspect-video

aspect-ratio: 16 / 9;

.bs-avatar

--bs-avatar-size: 2.5rem; position: relative; display: inline-grid; inline-size: var(--bs-avatar-size); block-size: var(--bs-avatar-size); flex: 0 0 auto; place-items: center; overflow: visible; color: var(--bs-color-primary-hover); background: color-mix(in srgb, var(--bs-color-primary) 12%, var(--bs-color-surface)); border: 1px solid var(--bs-color-border-strong); border-radius: 50%; font-size: calc(var(--bs-avatar-size) * 0.36); font-weight: 750; line-height: 1;

.bs-avatar-excess

color: var(--bs-color-text-muted); background: var(--bs-color-surface-raised);

.bs-avatar-fallback

inline-size: 100%; block-size: 100%; border-radius: inherit;

.bs-avatar-group

display: inline-flex; align-items: center;

.bs-avatar-image

inline-size: 100%; block-size: 100%; border-radius: inherit;

.bs-avatar-lg

--bs-avatar-size: 3.25rem;

.bs-avatar-sm

--bs-avatar-size: 2rem;

.bs-avatar-status

position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 0.72rem; block-size: 0.72rem; background: var(--bs-color-success); border: 2px solid var(--bs-color-background); border-radius: 50%;

.bs-avatar-status-danger

background: var(--bs-color-danger);

.bs-avatar-status-warning

background: var(--bs-color-warning);

.bs-avatar-xl

--bs-avatar-size: 4rem;

.bs-badge

display: inline-flex; min-height: 1.75rem; align-items: center; gap: var(--bs-space-2); padding: 0.25rem 0.75rem; color: var(--bs-color-text-muted); background: rgb(255 255 255 / 3%); border: 1px solid var(--bs-color-border); border-radius: var(--bs-radius-pill); font-size: var(--bs-font-size-sm); font-weight: 550;

.bs-badge-danger