❮ Bootstrap Buttons Bootstrap Progress Bars ❯

Bootstrap Plugin Overview

The components discussed in the Layout Components section earlier are just the beginning. Bootstrap comes with 12 jQuery plugins that extend functionality and add more interactivity to your site. Even if you are not an advanced JavaScript developer, you can start learning and using Bootstrap's JavaScript plugins. Most of these plugins can be triggered without writing any code, thanks to the Bootstrap Data API.

There are two ways to include Bootstrap plugins in your site:

Individual Inclusion: Use individual Bootstrap .js files. Some plugins and CSS components depend on others. If you include plugins individually, make sure to understand the dependencies between them.
Compiled (Combined) Inclusion: Use bootstrap.js or the minified version bootstrap.min.js.

Both bootstrap.js and bootstrap.min.js include all plugins.

Data Attributes

You can use all Bootstrap plugins purely through the data attribute API without writing a single line of JavaScript. This is Bootstrap's primary API and should be your first choice.
However, in some cases, you might need to disable this feature. Therefore, we provide a method to disable the data attribute API by unbinding events that are namespaced with data-api from the document. Here's how:
```
$(document).off('.data-api')
```
To disable a specific plugin, simply add the plugin's name as a namespace before the data-api namespace, like this:
```
$(document).off('.alert.data-api')
```

Programmatic API

We provide a pure JavaScript API for all Bootstrap plugins. All public APIs are callable individually or in a chain and return the collection of elements they operate on (similar to jQuery's calling style). For example:

$(".btn.danger").button("toggle").addClass("fat")

All methods can accept an optional options object, a string representing a specific method, or no parameters (in which case, the plugin will initialize with default behavior), as shown below:

// Initialize with default behavior
$("#myModal").modal()    
// Initialize with keyboard disabled               
$("#myModal").modal({ keyboard: false })  
// Initialize and immediately call show
$("#myModal").modal('show')

Each plugin also exposes its original constructor on the Constructor property: $.fn.popover.Constructor. If you need to get an instance of a specific plugin, you can directly retrieve it from an element:

$('[rel=popover]').data('popover')

Avoiding Namespace Conflicts

Sometimes Bootstrap plugins may need to be used alongside other UI frameworks, which can lead to namespace conflicts. If this happens, you can restore the original value by calling the plugin's .noConflict method.

// Return the previous value of $.fn.button
var bootstrapButton = $.fn.button.noConflict() 
// Assign Bootstrap functionality to $().bootstrapBtn                
$.fn.bootstrapBtn = bootstrapButton

Events

Bootstrap provides custom events for most plugins' unique actions. Generally, these events come in two forms:

Infinitive: This is triggered at the start of an action. For example, show. Infinitive events provide the preventDefault functionality, allowing you to stop the action before it starts.
```
$('#myModal').on('show.bs.modal', function (e) {
// Prevent the modal from showing
  if (!data) return e.preventDefault() 
})
```
Past participle: This is triggered after the action is completed. For example, shown.

❮ Bootstrap Buttons Bootstrap Progress Bars ❯