Get boba!
boba Version 1.7.2

Background

A collection of classes to make styling your elements a breeze.

Colors

Easily change the background color of your elements using boba's refreshing palette.
Colors
To change the background color of an element, add a .bg-{COLOR} class.
.bg-red Add this class to make the background of an element red. My background is red!
.bg-orange Add this class to make the background of an element orange. My background is orange!
.bg-yellow Add this class to make the background of an element yellow. My background is yellow!
.bg-green Add this class to make the background of an element green. My background is green!
.bg-teal Add this class to make the background of an element teal. My background is teal!
.bg-blue Add this class to make the background of an element blue. My background is blue!
.bg-indigo Add this class to make the background of an element indigo. My background is indigo!
.bg-purple Add this class to make the background of an element purple. My background is purple!
.bg-pink Add this class to make the background of an element pink. My background is pink!
.bg-dark Add this class to make the background of an element dark. My background is dark!
.bg-light Add this class to make the background of an element light. My background is light!
.bg-black Add this class to make the background of an element black. My background is black!
.bg-white Add this class to make the background of an element white. My background is white!

Tints

Use boba's tint colors to add a subtle splash of color to your components.

Compatibility

These classes are only included in the original and extended versions of boba and do not work with our black or white colors. Learn more.

Tints
To change the background color of an element, add a .bg-tint-{COLOR} class.
.bg-tint-red Add this class to make the background of an element tint-red. My background is tint-red!
.bg-tint-orange Add this class to make the background of an element tint-orange. My background is tint-orange!
.bg-tint-yellow Add this class to make the background of an element tint-yellow. My background is tint-yellow!
.bg-tint-green Add this class to make the background of an element tint-green. My background is tint-green!
.bg-tint-teal Add this class to make the background of an element tint-teal. My background is tint-teal!
.bg-tint-blue Add this class to make the background of an element tint-blue. My background is tint-blue!
.bg-tint-indigo Add this class to make the background of an element tint-indigo. My background is tint-indigo!
.bg-tint-purple Add this class to make the background of an element tint-purple. My background is tint-purple!
.bg-tint-pink Add this class to make the background of an element tint-pink. My background is tint-pink!
.bg-tint-dark Add this class to make the background of an element tint-dark. My background is tint-dark!
.bg-tint-light Add this class to make the background of an element tint-light. My background is tint-light!

Extended

Additional utilities to help you create the perfect background color.

Compatibility

These classes are only included in the extended version of boba. Learn more.

Hover

For a more subtle effect, use the hover classes to change the background color of your element only when someone hovers/focuses on it.
Hover
To change the background color on hover, add a .bg-hover-{COLOR} class.
.bg-hover-red Add this class to make the background of an element red on hover. My background is red on hover!
.bg-hover-orange Add this class to make the background of an element orange on hover. My background is orange on hover!
.bg-hover-yellow Add this class to make the background of an element yellow on hover. My background is yellow on hover!
.bg-hover-green Add this class to make the background of an element green on hover. My background is green on hover!
.bg-hover-teal Add this class to make the background of an element teal on hover. My background is teal on hover!
.bg-hover-blue Add this class to make the background of an element blue on hover. My background is blue on hover!
.bg-hover-indigo Add this class to make the background of an element indigo on hover. My background is indigo on hover!
.bg-hover-purple Add this class to make the background of an element purple on hover. My background is purple on hover!
.bg-hover-pink Add this class to make the background of an element pink on hover. My background is pink on hover!
.bg-hover-dark Add this class to make the background of an element dark on hover. My background is dark on hover!
.bg-hover-light Add this class to make the background of an element light on hover. My background is light on hover!
.bg-hover-black Add this class to make the background of an element black on hover. My background is black on hover!
.bg-hover-white Add this class to make the background of an element white on hover. My background is white on hover!

Active

For an even more subtle effect, use the active classes to change the background color of your element only when someone someone clicks on it.
Active
To change the background color when clicked, add a .bg-active-{COLOR} class.
.bg-active-red Add this class to make the background of an element red when clicked. My background is red when clicked!
.bg-active-orange Add this class to make the background of an element orange when clicked. My background is orange when clicked!
.bg-active-yellow Add this class to make the background of an element yellow when clicked. My background is yellow when clicked!
.bg-active-green Add this class to make the background of an element green when clicked. My background is green when clicked!
.bg-active-teal Add this class to make the background of an element teal when clicked. My background is teal when clicked!
.bg-active-blue Add this class to make the background of an element blue when clicked. My background is blue when clicked!
.bg-active-indigo Add this class to make the background of an element indigo when clicked. My background is indigo when clicked!
.bg-active-purple Add this class to make the background of an element purple when clicked. My background is purple when clicked!
.bg-active-pink Add this class to make the background of an element pink when clicked. My background is pink when clicked!
.bg-hover-dark Add this class to make the background of an element dark when clicked. My background is dark when clicked!
.bg-hover-light Add this class to make the background of an element light when clicked. My background is light when clicked!
.bg-hover-black Add this class to make the background of an element black when clicked. My background is black when clicked!
.bg-hover-white Add this class to make the background of an element white when clicked. My background is white when clicked!

Combinations

Combine the various background helper classes to create the perfect element coloring.
Red, Hover-Green, Active-Blue
<div class="bg-red bg-hover-green bg-active-blue"> Red, Hover-Green, Active-Blue </div>

Shades

Even more utilities to help you create the perfect background color.

Compatibility

These classes are only included in the extended version of boba and only work with boba's core palette colors. Learn more.

Color Shades

Further fine-tune the color of your background by adjusting its shade.

Clarification

These classes must be used in conjunction with a .bg-{COLOR} class.

Color Shades

To change the shade of your colored background, use the .lighten-bg-{STEP} and .darken-bg-{STEP} classes.
There are a total of 3 steps in either direction (i.e. a total of 7 shades are available per color).

.lighten-bg-3 Add this class to make your background 3 shades lighter. My red background uses lighten-bg-3!
.lighten-bg-2 Add this class to make your background 2 shades lighter. My red background uses lighten-bg-2!
.lighten-bg-1 Add this class to make your background 1 shade lighter. My red background uses lighten-bg-1!
Base Color This is a default background using .bg-red for reference. I'm the default red background!
.darken-bg-1 Add this class to make your background 1 shade darker. My red background uses darken-bg-1!
.darken-bg-2 Add this class to make your background 2 shades darker. My red background uses darken-bg-2!
.darken-bg-3 Add this class to make your background 3 shades darker. My red background uses darken-bg-3!

Hover Shades

Further fine-tune the color of your background on hover by adjusting its shade.

Clarification

These classes must be used in conjunction with a .bg-hover-{COLOR} class.

Hover Shades

To change the shade of your colored background on hover, use the .lighten-bg-hover-{STEP} and .darken-bg-hover-{STEP} classes.
There are a total of 3 steps in either direction (i.e. a total of 7 shades are available per color).

.lighten-bg-hover-3 Add this class to make your background 3 shades lighter on hover. My red background uses lighten-bg-hover-3!
.lighten-bg-hover-2 Add this class to make your background 2 shades lighter on hover. My red background uses lighten-bg-hover-2!
.lighten-bg-hover-1 Add this class to make your background 1 shade lighter on hover. My red background uses lighten-bg-hover-1!
Base Color This is a default background using .bg-hover-red for reference. I'm the default red background!
.darken-bg-hover-1 Add this class to make your background 1 shade darker on hover. My red background uses darken-bg-hover-1!
.darken-bg-hover-2 Add this class to make your background 2 shades darker on hover. My red background uses darken-bg-hover-2!
.darken-bg-hover-3 Add this class to make your background 3 shades darker on hover. My red background uses darken-bg-hover-3!

Active Shades

Further fine-tune the color of your background when clicked by adjusting its shade.

Clarification

These classes must be used in conjunction with a .bg-active-{COLOR} class.

Active Shades

To change the shade of your colored background when clicked, use the .lighten-bg-active-{STEP} and .darken-bg-active-{STEP} classes.
There are a total of 3 steps in either direction (i.e. a total of 7 shades are available per color).

.lighten-bg-active-3 Add this class to make your background 3 shades lighter when clicked. My red background uses lighten-bg-active-3!
.lighten-bg-active-2 Add this class to make your background 2 shades lighter when clicked. My red background uses lighten-bg-active-2!
.lighten-bg-active-1 Add this class to make your background 1 shade lighter when clicked. My red background uses lighten-bg-active-1!
Base Color This is a default background using .bg-hover-red for reference. I'm the default red background!
.darken-bg-active-1 Add this class to make your background 1 shade darker when clicked. My red background uses darken-bg-active-1!
.darken-bg-active-2 Add this class to make your background 2 shades darker when clicked. My red background uses darken-bg-active-2!
.darken-bg-active-3 Add this class to make your background 3 shades darker when clicked. My red background uses darken-bg-active-3!