What is the `data-target` attribute in Bootstrap 3?

What is the `data-target` attribute in Bootstrap 3?

data-target is used by bootstrap to make your life easier. You (mostly) do not need to write a single line of Javascript to use their pre-made JavaScript components.

The data-target attribute should contain a CSS selector that points to the HTML Element that will be changed.

Modal Example Code from BS3:

<!-- Button trigger modal -->
<button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal>
  Launch demo modal
</button>

<!-- Modal -->
<div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>
  [...]
</div>

In this example, the button has data-target=#myModal, if you click on it, <div id=myModal>...</div> will be modified (in this case faded in).
This happens because #myModal in CSS selectors points to elements that have an id attribute with the myModal value.

Further information about the HTML5 data- attribute: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an id of “basicModal” will appear.

What is the `data-target` attribute in Bootstrap 3?

Leave a Reply

Your email address will not be published.