How to add plugins to Bootstrap

Question

I found this really cool plugin for Bootstrap that measures password strength. It looks good, and I want to use it, but I can't figure out how to make it work. According to the Github page, all you have to do to use it is "Just invoke the plugin on the password fields you want to attach a strength meter to.". Unfortunately, they don't tell you where to put the files, nor which javascript files you actually need to use.

I've been Googling every possible iteration of ways to add or install plugins for Bootstrap, and have come up empty each time. Does anyone have an answer here?

Solution 1

I guess the github pages can be confusing with all those source files. All you need to do is get the latest minified file from this page:

https://github.com/ablanco/jquery.pwstrength.bootstrap/tree/master/dist

Download it, upload it, and load it into your HTML somewhere after your original bootstrap javascript file using

<script type="text/javascript" src="file/location/pwstrength-bootstrap-1.2.3.min.js"></script>

When you've done that, add the following javascript code to invoke the plugin on a class or element:

$(document).ready(function(){
    $(':password').pwstrength();
});

Solution 2

Just include the plugin css and javascripts after defining bootstrap in head of your html page.

something like this:

   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script src="your plugin source"></script>