Get boba!
boba Version 1.7.2

Text

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

Alignment

Easily align your text within a containing element.
Alignment
To change your text's alignment add a .text-{ALIGNMENT} class.
.text-left Add the .text-left class to make text left-aligned.
I'm left-aligned!
.text-center Add the .text-center class to make text center-aligned.
I'm center-aligned!
.text-right Add the .text-right class to make text right-aligned.
I'm right-aligned!
.text-justify

Add the .text-justify class to make text justified.
This only works when text spans more than one line.

I'm justified!

Colors

A splash of color to make your text stand out using boba's fresh colors.
Colors
To change the color of your text, add a .text-{COLOR} class.
.text-red Add this class to make your text red. I'm red text!
.text-orange Add this class to make your text orange. I'm orange text!
.text-yellow Add this class to make your text yellow. I'm yellow text!
.text-green Add this class to make your text green. I'm green text!
.text-teal Add this class to make your text teal. I'm teal text!
.text-blue Add this class to make your text blue. I'm blue text!
.text-indigo Add this class to make your text indigo. I'm indigo text!
.text-purple Add this class to make your text purple. I'm purple text!
.text-pink Add this class to make your text pink. I'm pink text!
.text-dark Add this class to make your text dark. I'm dark text!
.text-light Add this class to make your text light. I'm light text!
.text-black Add this class to make your text black. I'm black text!
.text-white Add this class to make your text white. I'm white text!

Extended

Additional utilities to help you create the perfect text 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 color of your text only when someone hovers/focuses on it.
Hover
To change the color of your text on hover, add a .text-hover-{COLOR} class.
.text-hover-red Add this class to make your text red on hover. I'm red on hover!
.text-hover-orange Add this class to make your text orange on hover. I'm orange on hover!
.text-hover-yellow Add this class to make your text yellow on hover. I'm yellow on hover!
.text-hover-green Add this class to make your text green on hover. I'm green on hover!
.text-hover-teal Add this class to make your text teal on hover. I'm teal on hover!
.text-hover-blue Add this class to make your text blue on hover. I'm blue on hover!
.text-hover-indigo Add this class to make your text indigo on hover. I'm indigo on hover!
.text-hover-purple Add this class to make your text purple on hover. I'm purple on hover!
.text-hover-pink Add this class to make your text pink on hover. I'm pink on hover!
.text-hover-dark Add this class to make your text dark on hover. I'm dark on hover!
.text-hover-light Add this class to make your text light on hover. I'm light on hover!
.text-hover-black Add this class to make your text black on hover. I'm black on hover!
.text-hover-white Add this class to make your text white on hover. I'm white on hover!

Active

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

Combinations

Combine the various text helper classes to create the perfect text.
Red, Hover-Green, Active-Blue
<h5 class="text-red text-hover-green text-active-blue"> Red, Hover-Green, Active-Blue </h5>

Shades

Even more utilities to help you create the perfect text 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 text by adjusting its shade.

Clarification

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

Color Shades

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

.lighten-text-3 Add this class to make your text 3 shades lighter. I'm red text with lighten-text-3!
.lighten-text-2 Add this class to make your text 2 shades lighter. I'm red text with lighten-text-2!
.lighten-text-1 Add this class to make your text 1 shade lighter. I'm red text with lighten-text-1!
Base Color This is default text with .text-red for reference. I'm the default red text!
.darken-text-1 Add this class to make your text 1 shade darker. I'm red text with darken-text-1!
.darken-text-2 Add this class to make your text 2 shades darker. I'm red text with darken-text-2!
.darken-text-3 Add this class to make your text 3 shades darker. I'm red text with darken-text-3!

Hover Shades

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

Clarification

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

Hover Shades

To change the shade of your colored text on hover, use the .lighten-text-hover-{STEP} and .darken-text-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-text-hover-3 Add this class to make your text's hover color 3 shades lighter. I'm text with lighten-text-hover-3!
.lighten-text-hover-2 Add this class to make your text's hover color 2 shades lighter. I'm text with lighten-text-hover-2!
.lighten-text-hover-1 Add this class to make your text's hover color 1 shade lighter. I'm text with lighten-text-hover-1!
Base Color This is default text with .text-hover-red for reference. I'm text with the default red hover!
.darken-text-hover-1 Add this class to make your text's hover color 1 shade darker. I'm text with darken-text-hover-1!
.darken-text-hover-2 Add this class to make your text's hover color 2 shades darker. I'm text with darken-text-hover-2!
.darken-text-hover-3 Add this class to make your text's hover color 3 shades darker. I'm text with darken-text-hover-3!

Active Shades

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

Clarification

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

Active Shades

To change the shade of your colored text when clicked, use the .lighten-text-active-{STEP} and .darken-text-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-text-active-3 Add this class to make your text's color 3 shades lighter when clicked. I'm text with lighten-text-active-3!
.lighten-text-active-2 Add this class to make your text's color 2 shades lighter when clicked. I'm text with lighten-text-active-2!
.lighten-text-active-1 Add this class to make your text's color 1 shade lighter when clicked. I'm text with lighten-text-active-1!
Base Color This is default text with .text-active-red for reference. I'm text with the default red active!
.darken-text-active-1 Add this class to make your text's color 1 shade darker when clicked. I'm text with darken-text-active-1!
.darken-text-active-2 Add this class to make your text's color 2 shades darker when clicked. I'm text with darken-text-active-2!
.darken-text-active-3 Add this class to make your text's color 3 shades darker when clicked. I'm text with darken-text-active-3!