Scribd
Upload
19 views

Unit-5(Bootstrap)

Uploaded by

rahulrathava0003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Unit-5(Bootstrap)

Uploaded by

rahulrathava0003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

What is Bootstrap

o Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website.
o It is absolutely free to download and use.
o It is a front-end framework used for easier and faster web development.
o It includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many others.
o It can also use JavaScript plug-ins.
o It facilitates you to create responsive designs.
o It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and Opera
etc.

History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.It was released as an open
source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub.

What is a responsive website


A website is called responsive website which can automatically adjust itself to look good on all devices,
from smart phones to desktops etc.

What Bootstrap package contains


Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, and background.
CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML elements style and
an advanced grid system.
Components: Bootstrap contains a lot of reusable components built to provide iconography,
dropdowns, navigation, alerts, pop-overs, and much more.
JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can easily include
them all, or one by one.
Customize: Bootstrap components are customizable and you can customize Bootstrap's components,
LESS variables, and jQuery plugins to get your own style.

And HTML file contains:


Add the HTML 5 doctype: Bootstrap uses HTML elements and CSS properties, so you have to add
the HTML 5 doctype at the beginning of the page with lang attribute and correct character set.
Bootstrap is mobile friendly: Bootstrap 3 is designed to be responsive to mobile devices.
Mobile-first styles are part of the core framework of Bootstrap.You have to add the following <meta>
tag inside the <head> element for proper rendering and touch zooming
<meta name="viewport" content="width=device-width, initial-scale=1">
The .container class provides a responsive fixed width container.
The .container-fluid class provides a full width container, spanning the entire width of the viewport.

Bootstrap Container
In Bootstrap, container is used to set the content's margins dealing with the responsive behaviors of
your layout. It contains the row elements and the row elements are the container of columns (known as
grid system).
The container class is used to create boxed content.
There are two container classes in Bootstrap:
1. container
2. container-fluid

<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.m
in.css"/>
</head>
<body>

<div class="container">
<h1>Container</h1>
<p>container content</p>
</div>

<div class="container-fluid">
<h1>Container-fluid</h1>
<p>container-fluid content</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap Components
Bootstrap 4 provides a variety of customizable and reusable components which makes the development
faster and easier. They are heavily based on the base modifier nomenclature i.e. the base class has
many groups of shared properties together while the modifier class has a group of individual styles. For
example, .btn is a base class and .btn-primary or .btn-success is a modifier class. The bootstrap
components range from alerts, buttons, badges, cards to various other components.

List of components:
1. Jumbotron: It simply put extra attention to particular content or information by making it
larger and more eye-catching.
2. Alerts: It is a popup with a predefined message that appears after a particular action.
3. Buttons: It is customized buttons that are used to perform an action in the form, dialogue box,
etc. They are in multiple states, sizes and have predefined styles.
4. Button group: It is a group of buttons aligned in a single line and they can be arranged both
vertically as well as horizontally.
5. Badge: It Is a labeling component that is used to add additional information.
6. Progress Bar: It is used to show the progress of a particular operation with a custom progress
bar. They have text labels, stacked bars, and animated backgrounds.
7. Spinner: The spinner displays the loading state of websites or projects. They are built with
HTML, CSS and don’t require any JavaScript.
8. Scrollspy: It keeps updating the navigation bar to the currently active link based on the scroll
position in the viewport.
9. List group: It is used to display an unordered series of content in a proper way.
10. Card: It provides a customizable, extensible, and flexible content container.
11. Dropdown: It is used to drop the menu in the format of a list of links, they are contextual and
toggleable overlays.
12. Navs: It is used to create a basic and simple navigation menu with a .nav base class.
13. Navbar: The navigation bar is the headers at the top of a website or webpage.
14. Forms: Forms are used to take multiple inputs at once from the user. Bootstrap has two layouts
available stacked and inline.
15. Input groups: They have extended form controls by adding a button, button group or text on
either side of inputs.
16. Breadcrumb: It provides the location of the current page in a navigational hierarchy and also
adds separators through CSS.
17. Carousel: It is a slide show of image or text content built with CSS 3D and JavaScript.
18. Toast: It displays a message for a small amount of time, a few seconds. They are alert messages
designed to imitate push notifications popular in desktop and mobile systems.
19. Tooltip: It provides small information about the element/link when the mouse hovers over the
element.
20. Popovers: It displays extra information about the element/link when clicked on it.
21. Collapse: It is a JavaScript plugin that is used to show or hide the content.
22. Modal: It is a small popup window positioned over the actual window.
23. Pagination: It is used to easily navigate between different pages, a large block of connected
links is used for making them accessible.
24. Media Object: The Media object is used for repetitive and complex components like tweets or
blogs. The images or videos are placed/aligned to the left or the right of the content.

Bootstrap Jumbotron
A Bootstrap jumbotron specifies a big box for getting extra attention to some special content or
information. It is displayed as a grey box with rounded corners. It can also enlarge the font sizes of the
text inside it.
You can put any valid HTML or other Bootstrap elements/ classes inside a jumbotron.
The class .jumbotron within the <div> element is used to create a jumbotron.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.
css">
</head>
<body>
<div class="jumbotron">
<h1>This is Jumbotron outside container!</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or informati
on.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Full-width Jumbotron
To get a jumbotron without rounded borders, you have to add the .jumbotron-fluid class and a .container
or .container-fluid inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></scrip
t>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Full-width Jumbotron</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or
information.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>

Bootstrap Page Header


A page header is like a section divider. It adds a horizontal line under the heading.
The .page-header class is used to create a page header.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.
css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Buttons
There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different
button styles:
o .btn-default
o .btn-primary
o .btn-success
o .btn-info
o .btn-warning
o .btn-danger
o .btn-link
There are 3 types of new buttons added in Bootstrap 4 along with 7 buttons given in Bootstrap 3.
These 3 buttons are:
o Secondary
o Dark
o Light
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></scrip
t>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button class="btn btn-default">default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
Bootstrap Button Size
In Bootstrap, you can choose a button according to your requirement. It provides four button sizes.
The following classes define the different sizes:
o .btn-lg
o .btn-md
o .btn-sm
o .btn-xs
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.
css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
</div>
</body>
</html>
Bootstrap Enable/Disable Buttons
You can set a button disable or unclickable state.
The .active class is used to make a button appear pressed, and the class .disabled makes a button
unclickable:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.
css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>
</body>
</html>
Bootstrap Block level buttons
The block level button covers the entire width of the parent element.
The .btn-block class is used to create a block level button:
<button type="button" class="btn btn-primary btn-block">Button 1</button>

Bootstrap Grid
"In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting
straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and
content structure in print design. In web design, it is a very effective method to create a consistent layout
rapidly and effectively using HTML and CSS."

Bootstrap Grid System


The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns
individually or you can groups the columns together to create wider columns.

Bootstrap Grid System is responsive and the columns are re-arranged automatically according to the
screen size.
Grid Classes:
There are four classes in Bootstrap Grid System:
o xs (for phones)
o sm (for tablets)
o md (for desktops)
o lg (for larger desktops)
You can combine the above classes to create more dynamic and flexible layouts.
Follow the below instructions while creating a Bootstrap Grid:
o Create a row (<div class="row">).
o Add the number of columns, you want in the grid (tags with appropriate .col-*-* classes).
o Note that numbers in .col-*-* should always add up to 12 for each row.

Bootstrap 4 Grid Classes


There are 5 classes in Bootstrap 4 grid system.
o .col- (extra small devices - screen width less than 576px)
o .col-sm- (small devices - screen width equal to or greater than 576px)
o .col-md- (medium devices - screen width equal to or greater than 768px)
o .col-lg- (large devices - screen width equal to or greater than 992px)
o .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
You can also combine the above classes to create more dynamic and flexible layouts.
Equal Columns Example
Let's take an example to see how to create an equal width column on all devices and screen widths:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></scrip
t>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Three equal-width columns</h2>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
</div>
</div>
</body>
</html>
Unequal Column Example
Let's take an example to see how to create an unequal width column which supports tablets and scaling
to large extra desktops:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></scrip
t>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>Unequal Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576p
x wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>

Bootstrap Alerts
Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style
to your messages to make it more appealing to the users.
There are four classes that are used within <div> element for alerts.
Alerts are created with the .alert class, followed by one of the contextual classes.
List of all contextual classes:
o .alert-success
o .alert-info
o .alert-warning
o .alert-danger
o .alert-primary
o .alert-secondary
o .alert-light
o .alert-dark

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></scrip
t>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Alert Links</h2>
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-
link">read this message</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> You should <a href="#" class="alert-
link">read this message</a>.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> You should <a href="#" class="alert-
link">read this message</a>.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> You should <a href="#" class="alert-
link">read this message</a>.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> You should <a href="#" class="alert-
link">read this message</a>.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
<div class="alert alert-light">
<strong>Light!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
</div>
</body>
</html>
Closing Alerts
If you want to close the alert message, you have to add an .alert-dismissable class to the alert container.
Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on the
close sign, the alert box will be closed.)
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

Bootstrap Table
The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to
add basic styling to a table.
<div class="container">
<h1>Basic Table Example</h1>
<table class="table">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
Bootstrap Striped Rows Table:
The .table-striped class is used to add zebra-stripes to a table:
<table class="table table-striped">
Bootstrap Bordered table:
The .table-bordered class is used to add borders on all sides of the table and cells:
<table class="table table-striped table-bordered">
Bootstrap Forms
In Bootstrap, there are three types of form layouts:
o Vertical form (this is default)
o Horizontal form
o Inline form
Bootstrap Vertical Form (Default)
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.mi
n.css"/>
</head>
<body>
<div class="container">
<h1>Vertical Form Example</h1>
<form style="width:300px">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap Inline Form
In Bootstrap Inline forms, all elements are inline, left-aligned, and the labels are alongside.
This example is only applied to forms within viewports that are at least 768px wide!
<form class="form-inline" role="form">
Bootstrap Horizontal Form
You have to add some additional rules if you want to create a horizontal form.
Additional rules for a horizontal form:
o Add class .form-horizontal to the <form> element
o Add class .control-label to all <label> elements
<form class="form-horizontal" role="form">

Bootstrap Labels
Bootstrap labels are used to specify the additional information about something like offering counts,
tips, or other makeup for pages.
The class .label is used to display the labels.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Contextual Label</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.
css">
</head>
<body>
<div class="container">
<h2>Contextual Label Classes</h2>
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Panels
In Bootstrap, a panel is a bordered box with some padding around its element. The panel components
are used when you want to put your DOM component in a box.
The class .panel is used within the <div> element to create Bootstrap panels. The content inside the
panel has a .panel-body class.
Generally a panel contains three parts:
o Panel header
o Panel content
o Panel footer

Contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or


.panel-danger) are used to color the panels.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.
css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-primary">


<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-success">


<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-info">


<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-warning">


<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-danger">


<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap plug-ins
Bootstrap comes bundled with 12 jQuery plugins that extend the features and can add more interaction
to your site. To get started with the Bootstrap’s JavaScript plugins, you don’t need to be an advanced
JavaScript developer. By utilizing Bootstrap Data API, most of the plugins can be triggered without
writing a single line of code.
Bootstrap Plugins can be included on your site in two forms −
 Individually − Using Bootstrap's individual *.js files. Some plugins and CSS components
depend on other plugins. If you include plugins individually, make sure to check for these
dependencies in the docs.
 Or compiled (all at once) − Using bootstrap.js or the minified bootstrap.min.js. Do not
attempt to include both, as both bootstrap.js and bootstrap.min.js contain all plugins in a single
file.
All plugins depend on jQuery. So jQuery must be included before the plugin files.

Data Attributes
 All of the Bootstrap plugins are accessible using the included Data API. Hence, you don’t need
to include a single line of JavaScript to invoke any of the plugin features.
 In some situations it may be desirable to turn this functionality of Data API off. If you need to
turn off the Data API, you can unbind the attributes by adding the following line of JavaScript
−
$(document).off('.data-api')
 To turn off a specific/single plugin, just include the plugin's name as a namespace along with
the data-api namespace like this −
$(document).off('.alert.data-api')

Programmatic API
The developers of Bootstrap believe that you should be able to use all of the plugins purely through the
JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon say
for example −
$(".btn.danger").button("toggle").addClass("fat")
All methods accept an optional options object, a string which targets a particular method, or nothing
(which initiates a plugin with default behavior) as shown below −
// initialized with defaults
$("#myModal").modal()

// initialized with no keyboard


$("#myModal").modal({ keyboard: false })

// initializes and invokes show immediately


$("#myModal").modal('show')
Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If
you'd like to get a particular plugin instance, retrieve it directly from an element −
$('[rel = popover]').data('popover').

No Conflict
Bootstrap plugins can sometimes be used with other UI frameworks. In these circumstances, namespace
collisions can occasionally occur. To overcome this call .noConflict on the plugin you wish to revert
the value of.
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality


$.fn.bootstrapBtn = bootstrapButton

Events
Bootstrap provides custom events for most plugin's unique actions. Generally, these events come in two
forms −
 Infinitive form − This is triggered at the start of an event. E.g. show. Infinitive events
provide preventDefault functionality. This provides the ability to stop the execution of an action
before it starts.
$('#myModal').on('show.bs.modal', function (e) {
// stops modal from being shown
if (!data) return e.preventDefault()
})

You might also like