Waves effect

Bootstrap waves effect

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

By default, waves are added to buttons, masks, and navbar links as in the examples below.

Example

Click me
Sample image with waves effect.
Edit in sandbox 
        
            

        <!--Button with wave-->
        <a class="btn btn-primary btn-lg">Click me</a>

        <!--Mask with wave-->
        <div class="view overlay">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(54).webp" class="img-fluid" alt="Sample image with waves effect.">
          <a href="#">
            <div class="mask waves-effect waves-light rgba-white-slight"></div>
          </a>
        </div>

Customization

You can also add waves effect to any element in two ways:

Via a css class:

Edit in sandbox 
        
            

        <!--".waves-effect" class ads a regular wave to the element-->
        <a class="btn btn-primary waves-effect">Button with waves</a>

        <!--".waves-light" class ads a "lighter" version of the waves-->
        <a class="btn btn-primary waves-light">Button with waves</a>

Via JavaScript:

Edit in sandbox 
        
            

        <!--For a regular waves-->
        Waves.attach('.btn', ['waves-effect']);

        <!--For a lighter version of waves-->
        Waves.attach('.btn', ['waves-light']);