Ripple Effect not working on card columns

MDB SupportCategory: General Bootstrap questionsRipple Effect not working on card columns
Jack McDonagh asked 6 months ago, version:4


I have an issue with the ripple effect on buttons when they are used in card columns.

I have buttons on each card:

The ripple effect on the buttons in the first column work fine but in the other two columns the ripple effect does not work. The text disappears when it is clicked and it then re appears a second later.

Here is the button in the second column when it is being clicked:


4 Answers
Mikołaj Smoleński answered 6 months ago

Hi Jack McDonagh,

Please send me Your code to or paste it here. I’d like to investigate it to find the solution for You.


euclidwebteam Pro User answered 7 days ago

Hi Mikolaj,

I’m also having this problem and wondered if you were able to resolve it. Here is an example of the problem (note that the button in the card does not have a ripple effect, while the button outside the card does have the effect):

<div class="card-columns">
   <div class="card card-body">
      <a class="btn-floating btn-sm blue-gradient waves-effect waves-effect"><i class="fa fa-star"></i></a>

<a class="btn-floating btn-sm blue-gradient waves-effect"><i class="fa fa-star"></i></a>
Mikołaj Smoleński answered 7 days ago


In our documentation there is the same code in basic card and everything is working correctly:

Have You tried to wrap .card-body by .card? There could be a problem while it is the same element as in Your example.

Best Regards

euclidwebteam Pro User answered 7 days ago

Thanks for the response Mikolah. I did try wrapping the .card-body by .card but that didn’t make a difference. The only thing I have been able to pin it down to is the use of .card-columns. When I stop using that, then the ripples work. But I need to use the .card-columns layout to space the cards around each other better. Do you know if there is some conflict with the .card-columns class?


Mikołaj Smoleński replied 6 days ago

Can You try to wrapp card not by card-column which is causing problems, but by more practical standard bootstrap grid? I recommend to use grid instead .card-column class.