Ripples

An iconic feature of Material Design is the ripple, which serves as a visual representation of a user interacting with an element.

In this UI toolkit, we add the ripple effect, via Material's ripple mixin, to Bootstrap components that are interactive by nature, like buttons. In addition, we provide a utility class that you can add to other elements or components in your projects to provide interaction feedback to the user.

Overview

Ripple utility classes have been created for each theme color defined in the color map. These classes are named using the format .ripple-{color} where color is any theme color defined in the color map.

Keep in mind that ripple utilities do not set text color or background color, so in some cases you may want to use a text utility and/or a background utility in combination with a ripple.

.ripple-primary

.ripple-secondary

.ripple-danger

.ripple-info

.ripple-warning

.ripple-dark

.ripple-gray

.ripple-black

.ripple-light

.ripple-white

Usage Examples

It is recommended that you use ripple utilities only on interactive elements and components.

Below is an example of the ripple utility being applied to a card which is made interactive using the stretched link utility.

Card with stretched link

by Start Bootstrap

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Next, we have another example where the ripple effect is being used on an image that is wrapped in the <a> tag, making it a clickable link.

Note that in this example we use the .ripple-light utility since the image is very dark.

Click the image above to see the effect.

Overview

Usage Examples

Card with stretched link

by Start Bootstrap

Related Links