If you close this alert, your PC will start formatting your drive.

This alert uses the closed.bs.alert event to show another alert.

× Holy guacamole! Best check yo self, you're not looking too good.

This alert has some handlers attached to close.bs.alert and closed.bs.alert events, so check your console.

Like all components of the library you can access the initialization object even if it was done via the DATA API:

After inserting a new alert into the page, you can initialize it via JavaScript. Considering the above markup, you can do the following:

The component will initialize all elements with proper DATA API found in the DOM. Note that the data-dismiss="alert" attribute is required for the triggering button.

The component's original events are same as with the original jQuery Plugin. The event.target of the events is the <div class="alert"> element, and not the initialization target with the data-dismiss="alert" attribute.

The Alert component exposes two public methods to be used via JavaScript:

The Alert component covers the specific original events and public methods, but does not provide any option. The component covers most essential JavaScript and DATA API, and does not require the class alert-dismissible for the initialization to work.

In addition, the component will also work outside the <div class="btn-group"> .

You should open your console to test the handler functions bound by the change.bs.button event of the following checkboxes and radio buttons. You should notice that the event isn't triggered twice.

Since the native change event isn't consistent in most legacy browsers, with the help of polyfills and the original change.bs.button event you can easily bind other functions into the context of a .btn-group and / or it's child inputs.

The only thing left to do is to attach handlers to the original events:

The myRadioButtonGroup element now stores store the initialization object, just like the other components of the library:

If the above markup is present in the DOM when the library is loaded, it will initialize via DATA API, if inserted later into the DOM, here's how to initialize it:

The component will initialize all .btn-group elements with the data-toggle="buttons" and works with radio buttons and checkboxes that use this markup:

Unlike the original jQuery Plugin, the Button component comes with an original event, consistent in all supported browsers. The event.target can be the element with the data-toggle="buttons" attribute and the button that just changed it's active state.

Button doesn't cover the single toggle functionality The supported toggle feature could very much fill the same purpose. The component covers accessibility features instead:

The Button component provides toggle functionality for checkboxes and radio buttons and a custom event for the button groups' toggling, not covered by the original jQuery plugin.

This highlights the fact that we don't need to use href="#myCarousel" attribute for the carousel controls, if the carousel itself has an ID, the above markup shows you how to do it, easily:

These three independent buttons use some inline JavaScript to control the carousel:

This is a test demonstrating the component capabilities and it's events, so open your console, and start clicking, you will be noticed before and after the animation. Also know that there was no active item set by default in the markup, proving the component can successfully manage this case by setting the first item as active on initialization.

As you probably expect by now, this component also stores the initialization in the element it targets on initialization, even for instances where the DATA API was used:

And now we can play with the methods:

The component grants full access to the internal working via JavaScript; whether via the public methods or the original events, you can do a whole bunch of things. Assuming the above markup have been injected into the DOM, let's go ahead and initialize it:

The component covers most of the original implementation in regards to DATA API, except that you can ignore some of the attributes for the controls, but they must have at least their specific class in order to work. This is a basic template markup followed by a complete attribute breakdown:

All the component's original event are triggered for the <div class="carousel"> element, and the event.relatedTarget is the newly activated carousel item.

The Carousel component covers the original events, as well as a set of essential options and public methods. In addition it also provides a solid DATA API, it adds a paused class to the target element when in paused state, and a solid event handling implementation.

Remember that all triggering buttons must reference the accordion via data-parent="selector" as described above in order to collapse current opened collapsible element.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Here's an Accordion example, built with a set of Panel s wrapped in a <div class="panel-group"> element. When the toggle links are clicked, our Collapse component will look for the closest <div class="accordion-className"> or <div id="accordion-id"> via data-parent="selector" and will hide any visible collapsible element.

Here's a quick demo with a single collapsible element, using the .well as the container, exactly as described in the Usage section. The demo also features the original events.

The component grants access to the initialization even for instances where the DATA API was used.

Alright, now let's say the above accordion template have been inserted into the DOM, you need to initialize its collapsible elements right away via JavaScript.

Also we can attach some handlers to the original events:

This now enables you to work with the public methods.

If the above single collapse template have been inserted into the DOM, you need to initialize it via JavaScript.

Now if we stack multiple collapsible elements and wrap them into one parent with an ID attribute and some helper CSS classes, we can easily create an accordion.

In the following markup, the component will initialize the two .btn elements with the data-toggle="collapse" attribute, both refferencing the same collapsible element via specific atttributes.

All the component's events are attached to the collapsible element and not its targeting button / element, with other words, the event.target is the element with the class="collapse" attribute.

Calling any of the public methods while animation is running, will produce no effect.

The option below allow you to connect a collapse to a parent accordion.

The Collapse component covers the original events and methods of the jQuery plugin counterpart. This component understands there is a triggering element that finds its target collapsible element via the data-target="#collapse-id" attribute or the href="#collapse-id" attribute if it's a link.

In this example we've showcased the direction to which the dropdown menus are displayed via the class="dropdown dropleft" and class="dropdown right" attributes.

A quick last example is with nested dropdown-menus, as the component will look for the child elements and will prevent itself from closing if the click target is a child item with data-toggle attribute.

That's all there is to do with Dropdown initialization, let's check a quick demo.

Ok now let's insert a new dropdown-menu and initialize right after via JavaScript.

Right out of the box, the above dropdown template is initialized via DATA-API right away.

Also you can do a simple check for the existence of 'Dropdown' in myDropdown element to make sure you don't go the wrong way.

Now, the Dropdown component also stores the initialization object in the targeted elements, just as for the modal triggering buttons:

When your dropdown-menus have a different structure and the myDropdown.parentNode is NOT the <div class="dropdown"> element, you might consider a getClosest() function to find it so you can then attach the original events to it.

Also assuming the above HTML was used for your dropdown-menu, we can also attach the original events to the parent of the triggering element, which is the <div class="dropdown"> element:

All right, now we have an initialization reference, we can get to work with the component's methods:

When you want full control or you need a way to handle dynamically generated dropdown-menus, you can do it via JavaScript. Considering the above HTML was inserted into the DOM, let's initialize it real quick:

Notice we use same markup as the original example, the triggering element with the data-toggle="dropdown" attribute will initialize the Dropdown component.

If you dismiss the dropdown via JavaScript, the Esc key or by clicking outside the triggering button, the event.relatedTarget is null.

The Dropdown component covers original events. The target of all events is the <div class="dropdown"> element, while the event.relatedTarget can be either the triggering element with the specific data-toggle="dropdown" attribute or a child element of the <div class="dropdown-menu"> element, depending on which one you click.

The Dropdown component covers most of the functionality from the original plugin and offers an additional option enabling the ability to handle click event in a way that you can toggle nested dropdowns and other uses.

Modal

The Modal component comes with small changes to options, events and public methods when compared to the original plugin. It provides an initialization option and a public method to write directly into your modal content.

In addition to adjusting the spacing (padding) of the <body> , elements like <nav class="navbar fixed-top"> are also adjusted in the same manner to get the smoothest possible transition. Like all components of the library, the component grants access to the initialization object even if your modal is automatically initialized via DATA API.

Modal Options With native JavaScript we don't need the show option because we can immediatelly access the component's public methods right after initialiation, we'll have a look at an example in a minute. Name type default description backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify 'static' for a backdrop which doesn't close the modal on click. keyboard boolean true Option to dismiss the current modal via Esc key. content markup The Modal component comes with a template system. This option can be used with JavaScript only. The default options' values are same as their jQuery plugin equivalents so you can expect same behavior. When your modal title and/or content is in fact an HTML markup string, please make sure you sanitize the content of that markup string.

Modal Methods For full control the Modal component exposes a couple of public methods to be used via JavaScript : .show() The method that shows an initialized modal. When called, it will also hide any other visible modal before showing the one requested, making sure to keep the backdrop in place. .hide() This hides an initialized modal. Additionally it will also close (if enabled) the backdrop. .toggle() When called it shows the modal if hidden and hides it otherwise, using one of the above two methods. .setContent() The method to enable you to set/overwrite the content of <div class="modal-content"> element of your modal at any time, but you might want to avoid using this method while the modal is animating. Make sure your content is sanitized. .update() This allows you to update the modal layout (handling overflowing/non-overflowing body and/or modal) after you have changed it's content or other layout changes occured. This would naturally follow the previous .setContent() method. .dispose() New with BSN 3.0 is the addition of .dispose() method that allow you to remove the modal functionality from a target element. If the modal is shown, this method will close it first by calling the .hide() method before the removal of the functionality.

Modal Events All original events are triggered for the <div class="modal"> element and not the initialization target with its usual data-toggle="modal" attribute. Event Type Description show.bs.modal This event fires immediately when the .show() method is called. If the called came via click and the click target is a modal triggering element, that element is then marked as the event.relatedTarget property of the event object.

This event can be default prevented. shown.bs.modal This event is fired when the modal has been made visible to the user. The event.relatedTarget is same as for the above. hide.bs.modal This event is fired immediately when the .hide() instance method has been called.

This event can be default prevented. hidden.bs.modal This event is fired when the modal has finished being hidden from the user. If modal is opened via JavaScript methods, or by clicking on another element that is not a modal triggering element, the relatedTarget is null.

Modal DATA API You can initialize Modal without writing any code as long as you have a modal and a trigger with data-target or a link with href referencing that modal. The component will initialize for all elements with data-toggle="modal" found in the DOM. <!-- provide a trigger button --> <button id="myModalTrigger" type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> <!-- Alternatively provide a link --> <a id="myModalTrigger" data-toggle="modal" href="#myModal">Launch modal</a> <!-- also the modal itself --> <div id="myModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> Some content </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success">Save changes</button> </div> </div> </div> </div> The DATA API is best suited for static content dialogs.

Modal JavaScript API Generally you can initialize Modal for any instance of <div class="modal"> and immediately get access to methods. Alternativelly you can initialize on a triggering element, similar to how the DATA API works, in this case the data-toggle="modal" is not required, but you need to specify a modal reference via a specific attribute: data-target="#modalId" which is suitable for <button> elements;

which is suitable for elements; href="#modalId" which is specific for <a> anchor link elements. The JavaScript API covers the only way to deal with dynamic content, the later added modals. Let's create a very basic modal template for this guide. <!-- blank modal template --> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- the .setContent() method will update this element's HTML --> </div> </div> </div> Next we can initialize this modal and get access to public methods right away: // initialize on a <div class="modal"> with all options // Note: options object is optional var myModalInstance = new BSN.Modal( '#myModal', // target selector { // options object content: '<div class="modal-body">Some content to be set on init</div>', // sets modal content backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target keyboard: false // we don't want to dismiss Modal on pressing Esc key } ); Now you can re-initialize your target elements very much like the original plugin, but with native JavaScript syntax: // re-initialize on a target with different options // also call the .show() method right away var myNewModalInstance = new BSN.Modal('#myModal', { backdrop: true }).show(); Keep in mind that re-initializing will make use of the .dispose() method to clear memory allocated for previous initialization, which involves two things: reseting the other options' values to the DATA API specified, or default values if not specified on re-initialization AND lastly, if the modal is open, on re-initialization the modal will be hidden via .hide() , but you can still access the .show() method right away. In other cases you can designate one or multiple triggering elements to open your modal, they will be the target of the constructor initialization and allow you to use same modal as a template to handle contents pushed by the triggering elements. <!-- <button> referencing the modal --> <button type="button" id="buttonID" class="btn btn-primary" data-target="#modalID">My Button</button> <!-- <a> referencing the modal --> <a id="anchorID" class="btn btn-primary" href="#modalID">My Link</a> Now let's initialize one of them right away: // initiate Modal on a triggering element var myModalInstance = new BSN.Modal('#myButton', { // options object content: '<div class="modal-body">Some content to be set on init</div>', // sets modal content keyboard: false // we don't want to dismiss Modal on pressing Esc key }); Now we have an initialization reference in myModalInstance , regardless of which element is the target of our constructor, we can start applying the component's public methods. // show the modal at any time myModalInstance.show(); // hide the modal myModalInstance.hide(); // toggle the modal (show/hide) myModalInstance.toggle(); // change the modal content myModalInstance.setContent('<div class="modal-body">Some different content</div>'); // if the above method is used while modal was shown, you can then ask for a layout update myModalInstance.update(); // when initialization is no longer needed, you can destroy it myModalInstance.dispose(); Any element initialized via DATA API or JavaScript, automatically grants access to the component's original events. // GET THE EVENT TARGET, THE MODAL // when we are certain which modal ID to work with var myModal = document.getElementById('modalID'); // also button trigger related (especially when modals are targeted by multiple triggering elements) // a triggering element is a link var myModal = document.getElementById(myModalTriggerButton.getAttribute('href').replace('#','')); // OR triggering element is not a link var myModal = document.getElementById(myModalTriggerButton.getAttribute('data-target').replace('#','')); // ATTACH HANDLERS // show.bs.modal event myModal.addEventListener('show.bs.modal', function(event){ // do something when this event triggers // event.target is the modal referenced in myModal // event.relatedTarget is the button referenced with myModalTriggerButton }, false); // shown.bs.modal event myModal.addEventListener('shown.bs.modal', function(event){ // do something when this event triggers // event.target is the modal referenced in myModal // event.relatedTarget is the button referenced with myModalTriggerButton }, false); // hide.bs.modal event myModal.addEventListener('hide.bs.modal', function(event){ // do something when this event triggers // event.target is the modal referenced in myModal }, false); // hidden.bs.modal event myModal.addEventListener('hidden.bs.modal', function(event){ // do something when this event triggers // event.target is the modal referenced in myModal }, false); Additionally the component will store in the modal OR its triggering elements some references, for the internal execution, hopefully would help you as well. For instance, when a modal is referenced by one or more triggering elements, it will know which one was clicked last time to execute the .show() instance method. // for modals with multiple triggering elements, the value changes every time the triggering element was clicked var lastModalTrigger = myModal.modalTrigger; // for modals targeted directly by the component with no triggering element // you can access the initialization object from the modal itself var myModalInit = myModal.Modal; Also each triggering element holds the initialization of the Modal component: // when a modal was initialized via DATA API // OR a triggering element is the target of the Modal constructor var myModalInstance === document.getElementById('myModalTrigger').Modal; These references are used internally to hide currently visible modals when showing another one. When the component is used via JavaScript only without a triggering element, you need to manually hide (via .hide() instance method) any visible modal before showing another modal (via the .show() instance method).