Topic: Ripple Effect not working on card columns

Jack McDonagh free asked 5 years ago


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:


euclidwebteam pro answered 4 years 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 staff commented 4 years 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.

Mikołaj Smoleński staff answered 4 years ago

Hi, 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 answered 4 years 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 staff answered 5 years 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. Regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No