UNIT-III FRONT –END FRAMEWORK

INTRODUCTION
• Bootstrap is a free front-end framework for faster and easier web development.
• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
• Bootstrap also gives you the ability to easily create responsive designs.

History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as
an open source product in August 2011 on GitHub.

Features
Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the development of
informative web pages (as opposed to web apps).
• Mobile first approach − Bootstrap framework consists of Mobile first styles throughout the
entire library instead them of in separate files.
• Browser Support − It is supported by all popular browsers.
• Easy to get started − With just the knowledge of HTML and CSS anyone can get started
with Bootstrap. Also the Bootstrap official site has a good documentation.
• Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
• Provides a clean and uniform solution for building an interface for developers.
• It contains beautiful and functional built-in components which are easy to customize.
• It also provides web based customization.
• And best of all it is an open source.

The most prominent components of Bootstrap are its layout components, as they affect an entire
web page. The basic layout component is called "Container", as every other element in the page is placed
in it. Developers can choose between a fixed-width container and a fluid-width container. While the latter
always fills the width of the web page, the former uses one of the five predefined fixed widths, depending
on the size of the screen showing the page:

• Smaller than 576 pixels

• 576–768 pixels
• 768–992 pixels
• 992–1200 pixels
• Larger than 1200 pixels

Once a container is in place, other Bootstrap layout components implement a CSS Flexbox layout
through defining rows and columns.
 A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files
that can be readily added to any project. The raw form of Bootstrap, however, enables developers to
implement further customization and size optimizations. This raw form is modular, meaning that the
developer can remove unneeded components, apply a theme and modify the uncompiled Sass files.

Bootstrap Package
Bootstrap package consists of
• Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and
background. This is covered in detail in the section Bootstrap Basic Structure
• CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML
elements styled and enhanced with extensible classes, and an advanced grid system.
• Components − Bootstrap contains over a dozen reusable components built to provide
iconography, dropdowns, navigation, alerts, pop-overs, and much more.
• JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can
easily include them all, or one by one.
• Customize − You can customize Bootstrap's components, LESS variables, and jQuery
plugins to get your very own version.

GRID SYSTEM
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.

Grids in web design organise and structure content, makes the websites easy to scan and reduces
the cognitive load on users.

Bootstrap Grid System

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up
to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout
options for generating more semantic layouts.

Bootstrap Grid System is responsive and the columns are re-arranged automatically
according to the screen size.

Grid Classes
There are 5 classes in Bootstrap 4 grid system.
• .col- (extra small devices - screen width less than 576px)
• .col-sm- (small devices - screen width equal to or greater than 576px)
• .col-md- (medium devices - screen width equal to or greater than 768px)
 • .col-lg- (large devices - screen width equal to or greater than 992px)
• .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

You can combine the above classes to create more dynamic and flexible layouts.

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that
house your content. Here's how the Bootstrap grid system works.
• Rows must be placed within a .container class for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within the columns, and only columns may be the immediate
children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid
layouts. LESS mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset
in rows for the first and the last column via negative margin on .rows.
• Grid columns are created by specifying the number of twelve available columns you wish
to span. For example, three equal columns would use three .col-xs-4.

Grid options
The following table summarizes aspects of how Bootstrap grid system works across multiple
devices.

Extra small Small devices Medium devices Large devices

devices Tablets Desktops Desktops (≥1200px)
Phones (≥768px) (≥992px)
(<768px)

Collapsed to Collapsed to start, Collapsed to start,

start, horizontal above horizontal above
Grid Horizontal at
horizontal breakpoints breakpoints
behavior all times
above
breakpoints

Max None (auto) 750px 970px 1170px

container
width

Class prefix .col-xs- .col-sm- .col-md- .col-lg-

# of 12 12 12 12
columns

Max column Auto 60px 78px 95px

width
 30px 30px 30px 30px
(15px on (15px on each (15px on each (15px on each side of
Gutter width
each side of side of a side of a a column)
a column) column) column)

Nestable Yes Yes Yes Yes

Offsets Yes Yes Yes Yes

Column Yes Yes Yes Yes

ordering

Example 1:

<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>

Example 2:

<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
BUTTONS

There are seven styles to add a button in Bootstrap. Use the following classes to achieve the
different button styles.

Class Description

btn Default/ Standard button.

Provides extra visual weight and identifies the primary action

btn-primary
in a set of buttons.

btn-success Indicates a successful or positive action.

btn-info Contextual button for informational alert messages.

btn-warning Indicates caution should be taken with this action.

btn-danger Indicates a dangerous or potentially negative action.

btn-link Deemphasize a button by making it look like a link while

maintaining button behavior.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<linkrel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<h1>Button Example!</h1>

<button class="btn btn-default">default</button>

<button class="btn btn-primary">primary</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-link">Link</button>

<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>

Output

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:
• .btn-lg
• .btn-md
• .btn-sm
• .btn-xs

Example
<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>
Output

Outline buttons
In need of a button, but not the hefty background colors they bring, Replace the default modifier
classes with the .btn-outline-* ones to remove all background images and colors on any button.

Ex: btn-outline-primary

Disabled state
Make buttons look inactive by adding the disabled boolean attribute to
any <button> element. The .active class is used to make a button appear pressed, and the class
.disabled makes a button unclickable.

BUTTON GROUP
It groups a series of buttons together on a single line or stack them in a vertical column.
Wrap a series of buttons with .btn in .btn-group.
Example
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Output

Example 2
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
Output

Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use
utility classes as needed to space out groups, buttons, and more.

Example
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
Output

Sizing
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to
each .btn-group, including each one when nesting multiple groups.

Example
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
 <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
Output

FORMS

Form text
Block-level or inline-level form text can be created using .form-text.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address
or number for numerical information) to take advantage of newer input controls like email
verification, number selection, and more.

Bootstrap Form Rules

There are three standard rules for these 3 form layouts:
• Always use <form role="form"> (helps improve accessibility for people using screen readers)
• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements

Bootstrap Forms
In Bootstrap, there are three types of form layouts:
• Vertical form (this is default)
• Horizontal form
• Inline form

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/boots
trap.min.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"></scri
pt>
</body>
</html>
Output

Inline Form
In Bootstrap Inline forms, all elements are inline, left-aligned, and the labels are alongside.

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/bootstr
ap.min.css">
 </head>
<body>

<div class="container">
<h2>Inline form Example</h2>
<form class="form-inline" role="form">
<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.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></scri
pt>

</body>
</html>

Output

Horizontal Form
You have to add some additional rules if you want to create a horizontal form.
Additional rules for a horizontal form:
• Add class .form-horizontal to the <form> element
• Add class .control-label to all <label> elements
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/bootstr
ap.min.css">

</head>
<body>

<div class="container">
<h2>Horizontal form Example</h2>
<form class="form-horizontal" role="form">
<form style="width:300px">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-
control" id="pwd" placeholder="Enter password">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</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>
Output

INPUTS
Bootstrap 4 supports following types of form controls:
• input
• textarea
• checkbox
• radio
• select
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"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: input example</h2>
<form>
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
 <div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</form>
</div>
</body>
</html>

Output

DROPDOWNS
Dropdown menus are toggleable, contextual menus, used for displaying links in a list
format. It facilitates users to choose one value from a predefined list. This can be made interactive
with the dropdown JavaScript plugin.
Single button
Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s
how you can put them to work with either <button> elements.
Example
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Output

You can do this with any button variant, too.

Example :
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-
toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Output

Split button
Similarly, create split button dropdowns with virtually the same markup as single button
dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown
caret.

Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Example
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-
toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-
toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>

Output
Dark dropdowns
Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-
dark onto an existing .dropdown-menu. No changes are required to the dropdown items.

Directions
Dropup
Trigger dropdown menus above elements by adding .dropup to the parent element.

Example:

<div class="container">
<h2>Dropup Example</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of
downwards:</p>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
Dropup button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
</div>

Output

Disable and Active Items

Add .active to items in the dropdown to style them as active. To convey the active state to
assistive technologies, use the aria-current attribute — using the page value for the current page,
or true for the current item in a set.

Add .disabled to items in the dropdown to style them as disabled.

Example
<div class="container">
<h2>Dropdowns Active and Disable Example</h2>
 <div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Normal</a>
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>
</div>
</div>
Output

NAVIGATION BAR
A navigation bar is like a navigation header that is placed at the top of the page. Navbars
collapse in mobile views and become horizontal as the available viewport width increases. At its
core, the navbar includes styling for site names and basic navigation.

Default Navbar

To create a default navbar −

• Add the classes .navbar, .navbar-default to the <nav> tag.
• Add role = "navigation" to the above element, to help with accessibility.
• Add a header class .navbar-header to the <div> element. Include an <a> element with
class navbar-brand. This will give the text a slightly larger size.
• To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-
nav.
Example
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Output

You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for
positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown
below.

Example

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">
 <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Output

Color schemes
Theming the navbar can be done by using the combination of theming classes and background-
color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for
dark background colors. Then, customize with .bg-* utilities.

Example
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">

 <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">

<!-- Navbar content -->
</nav>
Output

Placement
Navigation bar can be fixed at the top or at the bottom of the page. The fixed navigation bar
stays visible at a fixed position (top or bottom) without depending on page scrolling.
Default
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>

Fixed Top
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>

Fixed Bottom
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
Sticky Top
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>

PAGINATION
Pagination is used to sort the web pages of your website in an organized manner. It becomes
very necessary if your website has a lot of web pages.

List of classes to handle pagination

Class Description

.pagination Add this class to get the pagination on your page.

.disabled, you can customize links by using .disabled for unclickable links and .active to
.active indicate the current page.

.pagination-lg,
.pagination-sm use these classes to get different size items.

Example
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Output
Disabled and active states
Pagination links are customizable for different circumstances. Use .disabled for links that appear
un-clickable and .active to indicate the current page.

Example
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

Output

Sizing
Pagination sizes can be modified using .pagination-lg or .pagination-sm.
Example
<div class="container">

<ul class="pagination pagination-lg">

<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>

</ul>

<ul class="pagination pagination-sm">

<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>

</ul>
</div>
Output

JQUERY

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, animation, and much simpler with an easy-
to-use API that works across a multitude of browsers.
Core features supported by jQuery
• DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them
and modifying their content by using cross-browser open source selector engine
called Sizzle.
• Event handling − The jQuery offers an elegant way to capture a wide variety of events,
such as a user clicking on a link, without the need to clutter the HTML code itself with
event handlers.
• Animations − The jQuery comes with plenty of built-in animation effects which you can
use in your websites.
• Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and
zipped).
• Cross Browser Support − The jQuery has cross-browser support, and works well in most
of the browsers.
There are two ways to use jQuery.
• Local Installation − You can download jQuery library on your local machine and include it
in your HTML code.
• CDN Based Version − You can include jQuery library into your HTML code directly from
Content Delivery Network (CDN).
SYNTAX
The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the element(s).

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery

• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
 $(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Document Ready Event
$(document).ready(function(){

// jQuery methods go here...

});

This function is used to prevent any jQuery code from running before the document is finished
loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with
it. This also allows you to have your JavaScript code before the body of your document, in the head
section.

SELECTORS

A jQuery Selector is a function which makes use of expressions to find out matching
elements from a DOM based on the given criteria.

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and
in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().

Element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")

Example
When a user clicks on a button, all <p> elements will be hidden.

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find
a single, unique element.
Example
To find an element with a specific id, write a hash character, followed by the id of the HTML
element.
$("#test")
Example
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class Selector

The jQuery .class selector finds elements with a specific class. To find elements with a
specific class, write a period character, followed by the name of the class.

$(".test")
Example
When a user clicks on a button, the elements with class="test" will be hidden.
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

Universal Selector
The universal selector selects all the elements available in the document.

$('*')

Example
$(document).ready(function() {
/* This would select all the elements */
$("*").css("background-color", "yellow");
});

Multiple Elements selector

This Multiple Elements selector selects the combined results of all the specified selectors
You can specify any number of selectors to combine into a single result.

Example
$('div, p') − selects all the elements matched by div or p.
EVENTS
Events are actions that can be detected by your Web Application.

Following are the examples events.

• A mouse click
• A web page loading
• Taking mouse over an element
• Submitting an HTML form
• A keystroke on your keyboard, etc.

When these events are triggered, you can then use a custom function to do pretty much whatever
you want with the event. These custom functions call Event Handlers.

Commonly Used jQuery Event Methods

$(document).ready()

$(document).ready() method allows us to execute a function when the document is fully

loaded.

click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.

dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element.
Example
$("p").dblclick(function(){
$(this).hide();
});

mouseenter()
mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element.
Example
$("#p1").mouseenter(function(){
alert("You entered p1!");
});

mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element.
Example
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is pressed down, while
the mouse is over the HTML element.
Example
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the
mouse is over the HTML element.
Example
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

hover()
The hover( ) method takes two functions and is a combination of the mouseenter( ) and
mouseleave( ) methods.
The first function is executed when the mouse enters the HTML element, and the second
function is executed when the mouse leaves the HTML element.

Example
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus.
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus.
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
on()
The on() method attaches one or more event handlers for the selected elements.
Example
$("p").on("click", function(){
$(this).hide();
});
Binding Event Handlers
Using the jQuery Event Model, we can establish event handlers on DOM elements with
the bind() method.

Syntax
selector.bind( eventType[, eventData], handler)

• eventType − A string containing a JavaScript event type, such as click or submit. Refer to
the next section for a complete list of event types.
• eventData − This is optional parameter is a map of data that will be passed to the event
handler.
• handler − A function to execute each time the event is triggered.

Example
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Hi there!');
 });
});
</script>

<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>

<body>
<p>Click on any square below to see the result:</p>

<div class = "div" style = "background-color:blue;">ONE</div>

<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>

Removing Event Handlers

jQuery provides the unbind() command to remove an exiting event handler.
Syntax
selector.unbind(eventType, handler)
or
selector.unbind(eventType)

EFFECTS
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery
methods allow us to quickly apply commonly used effects with a minimum configuration.

Showing and Hiding Elements

The commands for showing and hiding elements are pretty much what we would expect show( ) to
show the elements in a wrapped set and hide() to hide them

Syntax:
$(selector).show( speed, [callback] );

$(selector).hide( speed, [callback] );

• speed − A string representing one of the three predefined speeds ("slow", "normal", or
"fast") or the number of milliseconds to run the animation (e.g. 1000).
 • callback − This optional parameter represents a function to be executed whenever the
animation completes; executes once for each element animated against.

Example
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">

$(document).ready(function() {

$("#show").click(function () {
$(".mydiv").show( 1000 );
});

$("#hide").click(function () {
$(".mydiv").hide( 1000 );
});
});
</script>

<style>
.mydiv{
margin:10px;
padding:12px;
border:2px solid #666;
width:100px;
height:100px;
}
</style>
</head>

<body>
<div class = "mydiv">
This is a SQUARE
</div>

<input id = "hide" type = "button" value = "Hide" />

<input id = "show" type = "button" value = "Show" />
</body>
</html>
Output
Toggling the Elements
jQuery provides methods to toggle the display state of elements between revealed or hidden.
If the element is initially displayed, it will be hidden; if hidden, it will be shown.

Syntax
$(selector).toggle([speed][, callback]);

Example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<p>This is a paragraph with little content.</p>

<p>This is another small paragraph.</p>

</body>
</html>
Output

ANIMATION
With jQuery, you can create custom animations. The jQuery animate() method is used to create
custom animations.

Syntax
$(selector).animate({params},speed,callback);

• The required params parameter defines the CSS properties to be animated.

 • The optional speed parameter specifies the duration of the effect. It can take the following
values: "slow", "fast", or milliseconds.
• The optional callback parameter is a function to be executed after the animation
completes.

Example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>

<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

Output

Similarly multiple properties can be animated at the same time.

Example
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});