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

        
            

        <!--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:

        
            

        <!--".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:

        
            

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

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