askvity

Applying Bootstrap Gradients with Utility Classes

Published in Bootstrap CSS Gradients 3 mins read

You can easily apply a background gradient in Bootstrap by adding the .bg-gradient class to an element, or by using the CSS variable var(--bs-gradient) in your custom stylesheets.

Bootstrap provides a straightforward way to incorporate gradients into your design, enhancing visual appeal without writing extensive custom CSS. The core of this functionality lies in a utility class and a CSS variable.

The most common and simplest method to use a Bootstrap gradient is by applying the dedicated utility class: .bg-gradient.

Understanding the Default Gradient

When you add the .bg-gradient class to an HTML element, Bootstrap automatically applies a specific linear gradient as its background image.

  • Description: This gradient starts with a semi-transparent white color at the top.
  • Direction: It then fades out to the bottom, creating a subtle transition effect.

This pre-defined gradient is excellent for quick enhancements to components like cards, jumbotrons, or sections where a gentle background visual is desired.

How to Use .bg-gradient

To implement this, simply add the .bg-gradient class alongside other Bootstrap background utilities or classes to any HTML element.

Example:

<div class="p-5 text-white bg-primary bg-gradient rounded-3">
  <h2>Welcome to our Page!</h2>
  <p class="lead">This section uses Bootstrap's default gradient.</p>
</div>

<button class="btn btn-dark bg-gradient">Gradient Button</button>

In the example above, the div will have a primary background color (bg-primary) with the semi-transparent white gradient overlaid, making it subtly fade. The button also showcases the gradient effect.

Customizing Gradients with CSS Variables

While the .bg-gradient class is convenient, you might sometimes need to apply the Bootstrap gradient in a more customized scenario or combine it with other specific CSS rules in your own stylesheet. Bootstrap facilitates this by exposing its gradient as a CSS variable.

Using var(--bs-gradient) in Custom CSS

If you prefer to define the gradient directly in your custom CSS or need to apply it to an element where the utility class might not be ideal (e.g., pseudo-elements, or within a complex style rule), you can access Bootstrap's default gradient value using the var(--bs-gradient) CSS variable.

Syntax:

selector {
  background-image: var(--bs-gradient);
}

This variable holds the exact same linear gradient definition that the .bg-gradient class applies internally.

Example (HTML):

<div class="my-custom-gradient-box p-4 rounded-3 text-white">
  <h3>Custom Gradient Styling</h3>
  <p>Applied via custom CSS using Bootstrap's variable.</p>
</div>

Example (Custom CSS - style.css):

.my-custom-gradient-box {
  background-color: #6f42c1; /* Example base color */
  background-image: var(--bs-gradient); /* Applies the Bootstrap gradient */
  border: 1px solid rgba(0, 0, 0, 0.1);
}

This approach gives you flexibility while still leveraging Bootstrap's built-in gradient definition.

Summary of Bootstrap Gradient Usage

Here's a quick overview of the two methods for using Bootstrap gradients:

Method Description Usage Example
.bg-gradient Class Applies a pre-defined linear gradient (semi-transparent white fading to bottom) directly as a background image. <div class="bg-primary bg-gradient">...</div>
var(--bs-gradient) Uses Bootstrap's CSS variable to include the default gradient value within your custom CSS rules for more flexibility. background-image: var(--bs-gradient); in your stylesheet for a custom class.

By understanding and utilizing these methods, you can effectively integrate subtle and clean background gradients into your Bootstrap-powered projects.

Related Articles