bootstrap/site/content/docs/5.1/extend/snippets.md

layout, title, description, group

layout	title	description	group
docs	Snippets	Extend Bootstrap with some common snippets of source code not included in the main project.	extend

Components

Light badges

{{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}}

@each $color, $value in $theme-colors {
  $badge-light-bg: shift-color($value, -80%);
  .badge-light-#{$color} {
    background-color: $badge-light-bg;
  }
}

Light buttons

{{< example >}} {{< buttons.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{ .name | title }} {{- end -}} {{< /buttons.inline >}} {{< /example >}}

@each $color, $value in $theme-colors {
  $btn-light-bg: shift-color($value, -80%);
  $btn-light-border: shift-color($value, -80%);
  .btn-light-#{$color} {
    @include button-variant($btn-light-bg, $btn-light-border, shift-color($value, 50%));
  }
}

Utilities

• Opacity
• Expanded widths/heights