Bootstrap Plugins
Bootstrap Plugins
Plugins
What is Bootstrap ?
• Bootstrap is the most popular Front-end
Framework used for developing responsive
and mobile-first websites.
• Bootstrap comes with HTML and CSS based
design templates for different types of features
like forms, buttons, tables, navigation,
modals, image carousals, and many more.
2
What are Plugins ?
A plugin is a piece of software that adds specific features or functionalities to an
existing program. Essentially, it extends or enhances the capabilities of the host
application without modifying its core structure.
3
Bootstrap Plugins
4
How to use Bootstrap Plugins
1. Include the necessary CSS and JavaScript files:
Include Bootstrap CSS and JavaScript files in the <head> of the HTML document:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
<!-- Bootstrap JS and dependencies (Popper.js and jQuery) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
6
Some common Bootstrap Plugins
1. Modal Plugin:
• Used to create modal dialogs, which are popup windows that overlay the current page.
• They are often used for displaying additional content, forms, or messages without
navigating away from the current page.
7
Modal Plugin
<div class="container">
<h2>Modal Example</h2>
<!-- 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 class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>
</div>
8
Some common Bootstrap Plugins
2. Tooltip & Popover:
The Tooltip and Popover plugins are used to add additional information or context to
elements on hover or click.
9
Popover
<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
10
Some common Bootstrap Plugins
3. Carousal Plugin:
The Carousel plugin allows you to create image sliders or carousels to showcase multiple
items.
11
Carousal
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
12
Carousal
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
13
Some common Bootstrap Plugins
4. Collapse Plugin:
The Collapse plugin is used to create collapsible elements, such as navigation menus.
5. Dropdown:
The dropdown plugin is used to create Dropdown menus.
14
Collapse
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple
collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
15
Dropdown
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-
toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
16
Conclusion
17
18