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

<div class="p-4 ripple-primary">.ripple-primary</div>
<div class="p-4 ripple-secondary">.ripple-secondary</div>
<div class="p-4 ripple-danger">.ripple-danger</div>
<div class="p-4 ripple-info">.ripple-info</div>
<div class="p-4 ripple-warning">.ripple-warning</div>
<div class="p-4 ripple-dark">.ripple-dark</div>
<div class="p-4 ripple-gray">.ripple-gray</div>
<div class="p-4 ripple-black">.ripple-black</div>
<div class="p-4 ripple-light bg-black text-white">.ripple-light</div>
<div class="p-4 ripple-white bg-black text-white">.ripple-white</div>

.p-4.ripple-primary .ripple-primary
.p-4.ripple-secondary .ripple-secondary
.p-4.ripple-danger .ripple-danger
.p-4.ripple-info .ripple-info
.p-4.ripple-warning .ripple-warning
.p-4.ripple-dark .ripple-dark
.p-4.ripple-gray .ripple-gray
.p-4.ripple-black .ripple-black
.p-4.ripple-light.bg-black.text-white .ripple-light
.p-4.ripple-white.bg-black.text-white .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

<!-- Stretched link card with ripple effect -->
<div class="card card-raised ripple-primary mdc-ripple-upgraded">
    <div class="card-body">
        <h2 class="card-title">Card with stretched link</h2>
        <h3 class="card-subtitle mb-3">by Start Bootstrap</h3>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a class="stretched-link" href="javascript:void(0);">Go somewhere</a>
    </div>
</div>

//- Stretched link card with ripple effect
.card.card-raised.ripple-primary
    .card-body
        h2.card-title Card with stretched link
        h3.card-subtitle.mb-3 by Start Bootstrap
        p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.
        a.stretched-link(href='javascript:void(0);') 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.

<!-- Image link with ripple effect -->
<a class="d-block mb-2 ripple-light" href="javascript:void(0);">
    <img class="img-fluid" src="https://source.unsplash.com/K9QHL52rE2k/700x394" alt="...">
</a>
<div class="text-muted font-italic small">Click the image above to see the effect.</div>

//- Image link with ripple effect
a(href='javascript:void(0);').d-block.mb-2.ripple-light
    img.img-fluid(src='https://source.unsplash.com/K9QHL52rE2k/700x394', alt='...')
.text-muted.font-italic.small Click the image above to see the effect.

Overview

Usage Examples

Card with stretched link

by Start Bootstrap

Related Links

Change the theme type!

Try a pre-built swatch!

Or choose your own colors...

Need ideas? Randomize!

Finished? Export your color palette file with install instructions!