Scribd
Upload
142 views18 pages

Bootstrap Plugins

Uploaded by

Pratik Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
142 views18 pages

Bootstrap Plugins

Uploaded by

Pratik Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Bootstrap

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

• Bootstrap is a popular front- • Bootstrap plugins are designed


end framework that to be responsive, ensuring a
provides a variety of pre- seamless user experience
built components and plugins across various devices and
to enhance web development. screen sizes.
• Bootstrap plugins are • Bootstrap plugins are easy to
JavaScript extensions that integrate into your project. By
add extra functionality to including the necessary
Bootstrap components. JavaScript and CSS files, you
can quickly enhance your
• Bootstrap plugins are Bootstrap components.
primarily written in • These plugins save developers
JavaScript and often rely on time by offering pre-designed
jQuery for functionality. and pre-implemented
solutions for common web
development features.

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>

2. Provide the HTML Structure:


Create the HTML structure for the component or feature you want to enhance with a Bootstrap plugin.

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">&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>
</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

Bootstrap ensures a Bootstrap has a large


consistent and visually community of developers,
appealing design across ensuring ongoing
different browsers and support, updates, and a
devices, promoting a wealth of third-party
seamless user experience plugins. This community-
through its standardized driven approach
plugins. enhances the framework's
reliability and longevity.

Bootstrap plugins provide Bootstrap's plugins are


pre-built components designed to be
and functionalities, responsive, facilitating
allowing developers to the creation of mobile-
accelerate web friendly websites with
development by components that adapt to
incorporating ready-made various screen sizes and
solutions for common devices.
features.

17
18

You might also like