Take the 2-minute tour ×

The title is self explanatory. I have seen a question earlier but that didn't helped me as much.

I reviewed the Boostrap API but couldn't find my answer.

share|improve this question
Your question says nothing. The title says something. –  epascarello Feb 27 '13 at 13:45
@epascarello Yes right :) –  user1765876 Feb 27 '13 at 13:48
add comment

4 Answers

up vote 31 down vote accepted

It is an HTML5 data attribute that automatically hooks up the element to the type of widget it is.

Some Examples:


Go through the JavaScript docs and search for data-toggle and you will see it used in the code examples.

One working example:

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
share|improve this answer
It is just an HTML attribute which is used with selectors, not HTML5 specific. –  Umur Kontacı Jul 11 '13 at 14:57
@UmurKontacı data-* was introduced in the HTML5 spec. –  epascarello Jul 11 '13 at 15:05
I am not sure but it looks like the link of JavaScript docs is changed to getbootstrap.com/2.3.2/javascript.html. Please verify it. –  hims056 Sep 5 '13 at 14:08
I guess 'JavaScript docs' link has broken. Anyone can provide updated one? –  user2243747 Dec 26 '13 at 10:00
Updated link to Bootstrap JavaScript docs: getbootstrap.com/javascript –  steps Jan 10 at 10:41
add comment

Any attribute that starts with data- is the prefix for custom attributes used for some specific purpose (that purpose depends on the application). It was added as a semantic remedy to people's heavy use of rel and other attributes for purposes other than their original intended purposes (rel was often used to hold data for things like advanced tooltips).

In the case of Bootstrap, I'm not familiar with its inner workings, but judging from the name, I'd guess it's a hook to allow toggling of the visibility or perhaps a mode of the element it's attached to (such as the collapsable side bar on Octopress.org).

html5doctor has a good article on the data- attribute.

Cycle 2 is another example of extensive use of the data- attribute.

share|improve this answer
That html5doctor link is a great read. Very informative, thank you! –  Dave Voyles Nov 6 '13 at 19:06
add comment

The presence of this data-attribute tells Bootstrap to switch between visual or a logical states of another element on user interaction.

It is used to show modals, tab content, tooltips and popover menus as well as setting a pressed-state for a toggle-button. It is used in multiple ways without a clear documentation.

share|improve this answer
add comment

It is a Bootstrap defined HTML5 data attribute.It binds a button to an event.

share|improve this answer
add comment

Your Answer


