Showing popover using Bootstrap


Redirecting to a new page for a single text-box filling is not a good idea. We can show popup to accomplish these kind of tasks. there are lot of Jquery Popup plugins which you can use according to your requirements. Today i will show you how to create a bootstrap popup. if you are already using bootstrap in your project then it is a good idea to reuse this plugin for this purpose. Ok lets begin

Create new MVC project. Visual studio automatically add bootstrap required CSS and JS Files in your project.

Create a controller in controllers folder and add corresponding view. if you are using default theme which visual studio create for you at the time of project creation then a good news for you. Visual studio already add Bootsrap bundle reference in your main layout file. you can find this file under Shared->_Layout.cshtml. Below line of code make sure that your project contain Bootsrap reference.


Now Add your view code

Razor View Code

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<a href="#" class="btn btn-primary btn-lg" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover Title" data-content="Content of Popover like a simple form etc.">Show popup</a>

<script type="text/javascript">

    $(document).ready(function () {




Code Explanation

data-toggle,data-content and data-trigger are HTML5 attributes tabindex defined the index of button in navigation. JQUERY code bind bootstrap popover function In DOM with each attribute contain data-toggle="popover".

Result bootstrap popover