removing "class" and "data-toggle" from bootstrap dropdown

Question

I want to disable clicking on a bootstrap dropdown because I've hover implemented. I have done this by removing class and data-toggle from the <a> tag.

Original declaration:

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Programs <b class="caret"></b></a>

disable clicking:

<a href="#" Programs <b class="caret"></b></a>

But for smaller screens, i.e. mobile, I want to enable clicking on a dropdown since hover would not be possible. How would I do this?

Answer 1

Why not both?

<a href="#" class="hidden-xs dropdown-toggle" data-toggle="dropdown">Programs <b class="caret"></b></a>
<a href="#" class="visible-xs"> Programs <b class="caret"></b></a>

This way only 1 of the 2 dropdown will be visible to end user at any given view port. Note the first one uses hidden-xs class while the other uses visible-xs.

Answer 2

Try this:

Use .visible-xs and .visible-sm to make things visible only on small screens (mobile & tablet).

You can use .hidden-md and .hidden-lg to hide things on desktop.