CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapplugins
blainarmstrong
blainarmstrong

Reputation: 1010

How to add plugins to Bootstrap

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?

Upvotes: 6

Views: 12681

Answers (3)

J.J.
J.J.

Reputation: 360

To add to previous solutions: also make sure to include jquery in your html because it's required by bootstrap's js.

Upvotes: 0

sv88
sv88

Reputation: 216

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();
});

Upvotes: 9

Super Hornet
Super Hornet

Reputation: 2907

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>

Upvotes: 1

Related Questions