Bootstrap buttons not clickable

Recently I noticed that the buttons on the landing page of this site were not clickable on mobiles and tablets. That's not entirely accurate, after multiple click attempts on my mobile it eventually worked. Sometimes it took a few clicks to work and other times over a dozen attempts before it would start loading the page the button that was clicked linked to. It was erratic, unpredictable and had me scratching my head. Was it a iPhone issue? Was it a Boostrap 4 issue? It worked on all desktop browsers in Windows 10 and macOS Catalina. Whatever it was it was unexceptable.

After some desperate and panicked shots in the dark in an attempt to get a quick resolution I called it quits and decided to look at it in a more disciplined and methodical way the next night after work.

Zeroing in on the true source of the issue

So the next night I looked at it again and kicked off with a Google search entering in the search term "bookstrap button not clickable on mobile". Goolge returned results to articles titled "Button not working on Mobile Devices but works on PC bootstrap", "html button not working in mobile device" and "Mobile Button Not Working (Bootstrap)" just to list a few. Checking out a couple of these articles they pointed to needing to implement the touchstart event for mobile devices. It made sense, a touch event for touch devices. But hang on, how come I haven't encountered this problem until now? I've been using Boostrap for 2 years and have been implementing responsive design for over 3 years, how is it only now this issue has occured?

Eager to get a quick resolution and move forward I bound the touchstart event to the button elements on my landing page and when I tested on my mobile and tablet the issue was still there. Okay it was process of elimination time or more like the other way around, strip back the landing page and add in elements one by one until the issue appeared.

I created a blank test page in the content management system and carried out the following actions:

  1. Added solitary link button
  2. Tested the link button. The link button worked
  3. Added the bootstrap carousel
  4. Tested the link button. The link button still worked
  5. Added the "Products and Services" section which makes use of Boostrap cards
  6. Tested the link button. The link button still worked.
  7. Added the GDPR cookie notice component
  8. Tested the link button. The link button didn't work most of the time.

So there was something about my GDPR notice that was interfering with the buttons being clicked. My GDPR cookie notice component made use of the Bootstrap Toast compontent, I detailed the implementation of it here.

I never pin pointed the exact cause, but all I know is something about the combination of the carousel and the toast based GDPR cookie notice at the bottom of the page were not mixing well together. What to do? I breifly contemplated a landing page redesign but in the end I decided to redesign my GDPR cookie notice using standard div elements and styling them to appear as close to the existing GDPR component it was going to replace.

The conclusion

There seems to be a combination of Bootstrap based elements that can lead to Boostrap buttons and links not triggering when a user clicks or touches them on a mobile or tablet. Given that a Google search on the issue returns results on this phenomenon it's causing headaches for a lot of developers out there and I'm guessing you too?

Various forum posts advise implementing the touchstart event, that makes sense but if every other instance of a button on your pages is behaving as expected then this advice most likely will not be of any assistance to you.

My advice to you is to reconstruct the page that contains the problem, add in elements one by one until the issue apppears. When it does you'll have your culprit. Mine was the last component I added onto the landing page, most likely it will be the same in your case. Good luck in eliminating your issue.

Article contents: