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.
Ripple utility classes have been created for each theme color defined in the color map. These classes are named using the format
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.
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
tag, making it a clickable link.
Note that in this example we use the
utility since the image is very dark.
Material Admin Pro background utilities
Material Admin Pro text utilities