Bootstrap Modal Plugin

The Modal Plugin

The Modal plugin is a dialog box/popup window that is displayed on top of the current page:

Tip: Plugins can be included individually (using Bootstrap’s individual “modal.js” file), or all at once (using “bootstrap.js” or “bootstrap.min.js”).

How To Create a Modal

The following example shows how to create a basic modal:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

Bootstrap Dropdown Components

Dropdowns

Class Description
.dropdown Indicates a dropdown menu
.dropdown-menu Builds the dropdown menu
.dropdown-menu-right Right-aligns a dropdown menu
.dropdown-header Adds a header inside the dropdown menu
.dropup Indicates a dropup menu
.disabled Disables an item in the dropdown menu

Bootstrap Buttons Styles

Bootstrap provides seven styles of buttons:

111

To achieve the button styles above, Bootstrap has the following classes:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

The following example shows the code for the different button styles:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Animated Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

Bootstrap provides several types of progress bars.

<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>

Vertical Pills With Dropdown Menu

Most web pages have some kind of a menu.

In HTML, a menu is often defined in an unordered list(and styled afterwards),

Bootstrap provides two ways to display the menu above: tabs and pills.

Tabs are created with

<ul class="nav nav-tabs">.

Tip: Also mark the current page with

<li class="active">.

Vertical Pills

Pills can also be displayed vertically. Just add the .nav-stacked class.

The following example places the vertical pill menu inside the last column. So, on a large screen the menu will be displayed to the right. But on a small screen, the content will automatically adjust itself into a single-column layout.

Pills With Dropdown Menu

Pills can also hold dropdown menus.

The following example adds a dropdown menu to “Menu 1”:

<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>

How To Create a Tooltip

To create a tooltip, add the data-toggle=”tooltip” attribute to an element.

Use the title attribute to specify the text that should be displayed inside the tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

The following code will enable all tooltips in the document:

Example

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Create Popover Plugin

The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

How To Create a Popover:

To create a popover, add the data-toggle="popover" attribute to an element. Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover’s body:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method. The following code will enable all popovers in the document:

Example

 
<script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>