Search within TutorialsPark

Twitter Bootstrap Dropdowns


Use this plugin to create interactive dropdown menu


Twitter Bootstrap: Dropdowns

1. To create a dropdown add data-toggle="dropdown" to any button or link

2. Inorder to keep links intact (if browser is not enabling javascript) use the attribute data-target along with href="#".

Example: Twitter Bootstrap Modals

Give it a TRY! »

Twitter Bootstrap: Dropdown Pills

1. The same effect can be created using navigation pills.

Example:Twitter Bootstrap Dropdown Pills

Give it a TRY! »

Twitter Bootstrap: Dropdown using Javascript Method $().dropdown('toogle')

1. Dropdown can be triggered using Javascript methods $().dropdown('toggle') but Data-API data-toggle="dropdown" is a must.

Example:Twitter Bootstrap $().dropdown('toggle') Modals

Give it a TRY! »

Twitter Bootstrap: Events

Table: Events table

Event Type Description
show.bs.dropdown The event is fired immediately when the show instance method is invoked.
shown.bs.dropdown The event is fired when the dropdown has been made visible to the user.
hide.bs.dropdown The event is fired when the hide instance method has been called.
hidden.bs.dropdown The event is fired when the collapse element has been hidden from the user

1. There are four Dropdown Events which are fired based on the behaviour of dropdown menu.

2. All the dropdown events are fired at the parent of element .dropdown-menu .

Example:Twitter Bootstrap Events

Give it a TRY! »