Step by step how to add Twitter Bootstrap jQuery Plugins to Asp.Net MVC

        By Carmel Schvartzman

In this tutorial we'll learn how to add Twitter Bootstrap jQuery Plugins to an Asp.Net MVC App. For this tutorial we'll import two useful jQuery plugins : the Tooltip & the Popover jQuery Plugins .

The Bootstrap is the more widely used and more popular CSS3 framework for developing responsive web apps,  making front-end web design very fast and easy.

We'll build a responsive web page using the Tooltip & the Popover jQuery Plugins of the Twitter Bootstrap with no effort at all:

First think that's advisable to do is to update the jQuery and the jQueryUI scripts in your MVC application, using NuGet, so that you get the upgraded versions of the scripts :

Having upgraded the jQuery .js files, we next install the Twitter Bootstrap framework, using NuGet: made a search for the keyword "Bootstrap" :

Then go to the Twitter Bootstrap web site , and choose the "JavaScript" Tab :

The Tooltip Twitter Bootstrap jQuery Plugin

Then go to the Tooltip Plugin : 

Copy the markup and paste it inside your own HTML file.

The Popover Twitter Bootstrap jQuery Plugin

Do the same for the Popover Plugin, which is an extension of the former plugin :




At your HTML file, insert all the code inside a "container" :

Then add the links for the Css files :

And also for the JavaScript files :

Finally, to enable the plugins for the DOM elements you want, make a call to the following Plugin methods :

Browse to your page & you'll see the Tooltips on the buttons, made responsive as part of the Twitter Bootstrap:

And this is the Popover Plugin in action :

That's all!!  In this tutorial we've learned how to add Twitter Bootstrap jQuery Plugins to an Asp.Net MVC Application.

Happy programming.....

כתב: כרמל שוורצמן