Velvet Star Monitor

Standout celebrity highlights with iconic style.

updates

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

Writer Matthew Barrera

Can you tell me what is the system or behavior behind the data-target attribute used by Bootstrap 3?

I know that data-toggle used to aim API JavaScript of Bootstrap of graphical functionality.

2 Answers

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> Launch demo modal
</button>
<!-- Modal -->
<div tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"> [...]
</div>

In this example, the button has data-target="#myModal", if you click on it, <div>...</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:

2

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.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy