Dashboard
Applications
Pages
UI Elements
Shaira Diaz

Premium Member

Background

Use background utilities to quickly style the background of an element. Great for cards, buttons, or any other element. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Gray Set

A set of gray background utilities classes.

<div class="d-flex">
  <div class="flex-fill ht-50 bg-gray-900"></div>
  <div class="flex-fill ht-50 bg-gray-800"></div>
  <div class="flex-fill ht-50 bg-gray-700"></div>
  <div class="flex-fill ht-50 bg-gray-600"></div>
  <div class="flex-fill ht-50 bg-gray-500"></div>
  <div class="flex-fill ht-50 bg-gray-400"></div>
  <div class="flex-fill ht-50 bg-gray-300"></div>
  <div class="flex-fill ht-50 bg-gray-200"></div>
  <div class="flex-fill ht-50 bg-gray-100"></div>
</div>



Background Color

Similar to the contextual text color classes, set the background of an element to any contextual class.

<div class="d-flex">
  <div class="flex-fill ht-50 bg-primary"></div>
  <div class="flex-fill ht-50 bg-secondary"></div>
  <div class="flex-fill ht-50 bg-success"></div>
  <div class="flex-fill ht-50 bg-warning"></div>
  <div class="flex-fill ht-50 bg-danger"></div>
  <div class="flex-fill ht-50 bg-info"></div>
  <div class="flex-fill ht-50 bg-light"></div>
  <div class="flex-fill ht-50 bg-dark"></div>
</div>



Background Gradient

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

<div class="d-flex">
  <div class="flex-fill ht-100 bg-primary bg-gradient"></div>
  <div class="flex-fill ht-100 bg-secondary bg-gradient"></div>
  <div class="flex-fill ht-100 bg-success bg-gradient"></div>
  <div class="flex-fill ht-100 bg-warning bg-gradient"></div>
  <div class="flex-fill ht-100 bg-danger bg-gradient"></div>
  <div class="flex-fill ht-100 bg-info bg-gradient"></div>
  <div class="flex-fill ht-100 bg-light bg-gradient"></div>
  <div class="flex-fill ht-100 bg-dark bg-gradient"></div>
</div>



Background Opacity

Background-color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

<div class="d-flex">
  <div class="flex-fill ht-50 bg-primary"></div>
  <div class="flex-fill ht-50 bg-primary bg-opacity-75"></div>
  <div class="flex-fill ht-50 bg-primary bg-opacity-50"></div>
  <div class="flex-fill ht-50 bg-primary bg-opacity-25"></div>
</div>



© 2023. Dashbyte. All Rights Reserved. Created by: Themepixels