View on GitHub

Background

Convey meaning through background-color and add decoration with gradients.

Background color

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do set color to ensure contrasts.

.bg-primary
.bg-secondary or .bg-dark
.bg-supporting-green
.bg-supporting-purple
.bg-supporting-yellow
.bg-supporting-blue
.bg-supporting-pink
.bg-light
.bg-white or .bg-body
.bg-transparent
<div class="p-3 mb-2 fw-bold bg-primary">.bg-primary</div>
<div class="p-3 mb-2 fw-bold bg-secondary">.bg-secondary or .bg-dark</div>
<div class="p-3 mb-2 fw-bold bg-supporting-green">.bg-supporting-green</div>
<div class="p-3 mb-2 fw-bold bg-supporting-purple">.bg-supporting-purple</div>
<div class="p-3 mb-2 fw-bold bg-supporting-yellow">.bg-supporting-yellow</div>
<div class="p-3 mb-2 fw-bold bg-supporting-blue">.bg-supporting-blue</div>
<div class="p-3 mb-2 fw-bold bg-supporting-pink">.bg-supporting-pink</div>
<div class="p-3 mb-2 fw-bold bg-light">.bg-light</div>
<div class="p-3 mb-2 fw-bold bg-white">.bg-white or .bg-body</div>
<div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>

Color naming

Since Orange brand distinguishes functional colors from supporting colors and Bootstrap doesn’t, naming can be somewhat inconsistent. Bootstrap’s background-color utilities are supported in Boosted, but will result in our core .bg-supporting-* utilities—making .bg-danger inconsistent with .btn-danger color, for example.

Sass

In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.

Variables

Most background-color utilities are generated by our theme colors, reassigned from our generic color palette variables.

Boosted supersedes Bootstrap color variables with Orange brand color.

// Boosted mod
//// Core colors
$accessible-orange: #f16e00;
$brand-orange:      #ff7900;
//// Functional colors
$functional-green:  #32c832;
$functional-blue:   #527edb;
$functional-yellow: #fc0;
$functional-red:    #cd3c14;
//// Supporting colors
$supporting-blue:   #4bb4e6;
$supporting-yellow: #ffd200;
$supporting-green:  #50be87;
$supporting-purple: #a885d8;
$supporting-pink:   #ffb4e6;
$blue:    $functional-blue;
$indigo:  $supporting-purple;
$purple:  $supporting-purple;
$pink:    $supporting-pink;
$red:     $functional-red;
$orange:  $brand-orange;
$yellow:  $functional-yellow;
$green:   $functional-green;
$teal:    $supporting-green;
$cyan:    $supporting-blue;
$primary:       $orange;
$secondary:     $black;
$success:       $green;
$info:          $blue;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-500;
$dark:          $black;

Grayscale colors are also available, but only a subset are used to generate any utilities.

$white:    #fff;
$gray-100: #fafafa;
$gray-200: #f6f6f6;
$gray-300: #eee;
$gray-400: #ddd;
$gray-500: #ccc;
$gray-600: #999;
$gray-700: #666;
$gray-800: #595959;
$gray-900: #333;
$black:    #000;

Map

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

Mixins

No mixins are used to generate our background utilities, but we do have some additional mixins for other situations where you’d like to create your own gradients.

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$variable-prefix}gradient);
  }
}

Utilities API

Background utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "background-color": (
      property: background-color,
      class: bg,
      values: map-merge(
        $background-colors,
        (
          "body": $body-bg,
          "white": $white,
          "transparent": transparent,
          "supporting-green": $supporting-green,
          "supporting-blue": $supporting-blue,
          "supporting-yellow": $supporting-yellow,
          "supporting-pink": $supporting-pink,
          "supporting-purple": $supporting-purple
        )
      )
    ),