CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
nooby
nooby

Reputation: 294

how to disable element attribute on specific screen width in bootstrap 3

in my navbar i have Event drop down menu(see print screen). so if i hover mouse on it, dropdown menu will appear. with help of dropdown-toggle disabled if i click on Event link i will go to events page. but i want to remove this disabled attribute when screen width less then 768px. i know, i can do it with js, but is there way to do it only with bootstrap? in code it looks like this

<a class="dropdown-toggle disabled" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
                        <span class="caret"></span></a>

so when screen width less then 768px i want to remove disabled attribute

Upvotes: 0

Views: 1619

Answers (2)

Teddy Sterne
Teddy Sterne

Reputation: 14201

You can use the hidden tags to hide on certain screen sizes: Visibility Breakpoints

So for <768 you would add the classes .hidden-xs and .hidden-sm

Upvotes: 0

nthall
nthall

Reputation: 2915

Only pure-bootstrap, no-JS solution I can think of is to duplicate the element in the code, with the disabled version having class hidden-xs and the non-disabled version having class visible-xs-inline-block (or visible-xs-block, maybe? not sure which display property you want).

<a class="dropdown-toggle disabled hidden-xs" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
                    <span class="caret"></span></a>
<a class="dropdown-toggle visible-xs-inline-block" data-toggle="dropdown" href="http://127.0.0.1:8000/{lang}/events">Events
                    <span class="caret"></span></a>

Upvotes: 1

Related Questions