0% found this document useful (0 votes)

32 views

BS and JS

Bootstrap is a free and open-source front-end framework for building responsive, mobile-first websites and web applications. It contains HTML and CSS templates for common user interface components like buttons, navigation, and grids as well as optional JavaScript extensions. The document provides details on what Bootstrap is, its history and advantages, how to get started with a basic Bootstrap page, and examples of key components like containers, jumbotron, buttons, and more.

Uploaded by

Mansee Naik

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

32 views

BS and JS

Uploaded by

Mansee Naik

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 157

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.

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.

Why use Bootstrap

Following are the main advantage of Bootstrap:

o It is very easy to use. Anybody having basic knowledge of HTML and CSS can
use Bootstrap.

o It facilitates users to develop a responsive website.

o It is compatible on most of browsers like Chrome, Firefox, Internet Explorer,
Safari and Opera etc.

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.

First Bootstrap Example

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.

Ex:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head><meta http-equiv="Content-Type" content="text/html; charset=windows-
1252">
4.
5. <title>Any title</title>
6. </head>
7. <body>
8. //write code
9. </body>
10. </html>

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:

1. <meta name="viewport" content="width=device-width, initial-scale=1">

Note: The "width=device-width" part is used to set the width of the page to follow
the screen-width of the device (vary according to the devices).

The initial-scale=1 part is used to set the initial zoom level when the page is first
loaded by the browser.

Containers: container is used to wrap the site contents. There are two container
classes.

o The .container class provides a responsive fixed width container.

o The .container-fluid class provides a full width container, spanning the entire
width of the viewport.

Note: A container cannot be placed inside a container.

First Bootstrap Example (with responsive fixed width

container)

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>This is a Bootstrap example</title>
5.
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8. </head>
9. <body>
10. <div class="container">
11. <h1> First Bootstrap web page</h1>
12. <p>Write your text here..</p>
13. </div>
14.
15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
16. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
17. </body>
18. </html>

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

See the basic layout of a container:

1. <html>
2. <body>
3. <div class="container">
4. <div class="row">
5. <div class="col-md-xx"></div>
6. ...
7. </div>
8. <div class="row">
9. <div class="col-md-xx"></div>
10. ...
11. </div>
12. </div>
13. </body>
14. </html>

Bootstrap container example

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Job</title>
5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/
css/bootstrap.min.css"/>
6. </head>
7. <body>
8.
9. <div class="container">
10. <h1>Container</h1>
11. <p>container content</p>
12. </div>
13.
14. <div class="container-fluid">
15. <h1>Container-fluid</h1>
16. <p>container-fluid content</p>
17. </div>
18.
19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
20. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
21. </body>
22. </html>

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.

Jumbotron Inside Container

The Inside container is used in jumbotron, if you want the jumbotron to not extend to
the edge of the screen.

Put the jumbotron inside the <div class="container">.

Example:

1. <body>
2.
3. <div class="container">
4. <div class="jumbotron">
5. <h1>This is Jumbotron inside container!</h1>
6. <p>Jumbotron specifies a big box for getting extra attention to some special cont
ent or information.</p>
7. </div>
8. <p>This is some text.</p>
9. <p>This is another text.</p>
10. </div>
11.
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
14. </body>

Jumbotron Outside Container

It is used when you want the jumbotron to extend to the screen edges.

Put the jumbotron outside the <div class="container">.

Example:

1. <body>
2.
3. <div class="jumbotron">
4. <h1>This is Jumbotron outside container!</h1>
5. <p>Jumbotron specifies a big box for getting extra attention to some special conte
nt or information.</p>
6. </div>
7.
8. <div class="container">
9. <p>This is some text.</p>
10. <p>This is another text.</p>
11. </div>
12.
13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
14. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
15. </body>

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:

1. <body>
2.
<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>
3.
4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
5. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
6. </body>

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

Bootstrap Button Example: specifying seven

styles
1. <body>
2. <h1>Button Example!</h1>
3.
<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>
4.
5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
6. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
7. </body>

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:

1. <body>
2.
3. <div class="container">
4. <h2>Button Sizes</h2>
5. <button type="button" class="btn btn-primary btn-lg">Large</button>
6. <button type="button" class="btn btn-primary btn-md">Medium</button>
7. <button type="button" class="btn btn-primary btn-sm">Small</button>
8. <button type="button" class="btn btn-primary btn-xs">XSmall</button>
9. </div>
10.
11. </body>

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:

1. <body>
2.
3. <div class="container">
4. <h2>Button States</h2>
5. <button type="button" class="btn btn-primary">Primary Button</button>
6. <button type="button" class="btn btn-
primary active">Active Primary</button>
7. <button type="button" class="btn btn-
primary disabled">Disabled Primary</button>
8. </div>
9.
10. </body>

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:

Example:

1. <body>
2.
3. <div class="container">
4. <h2>Block Level Buttons</h2>
5. <button type="button" class="btn btn-primary btn-block">Button 1</button>
6. <button type="button" class="btn btn-default btn-block">Button 2</button>
7.
8. <h2>Large Block Level Buttons</h2>
9. <button type="button" class="btn btn-primary btn-lg btn-
block">Button 1</button>
10. <button type="button" class="btn btn-default btn-lg btn-
block">Button 2</button>
11.
12. <h2>Small Block Level Buttons</h2>
13. <button type="button" class="btn btn-primary btn-sm btn-
block">Button 1</button>
14. <button type="button" class="btn btn-default btn-sm btn-
block">Button 2</button>
15. </div>
16.
17. </body>

Bootstrap Grid
Wikipedia says:

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

Basic Structure of a Bootstrap Grid:

1. <div class="row">
2. <div class="col-*-*"></div>
3. </div>
4. <div class="row">
5. <div class="col-*-*"></div>
6. <div class="col-*-*"></div>
7. <div class="col-*-*"></div>
8. </div>
9. <div class="row">
10. ...
11. </div>

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

For equal columns:

1. <body>
2.
3. <div class="container">
4. <h1>Grid Example</h1>
5.
6. <div class="row">
7. <div class="col-md-3"style="background-color:lavender;">Rahul</div>
8. <div class="col-md-3"style="background-color:lavenderblush;">Vijay</div>
9. <div class="col-md-3"style="background-color:lavender;">Kartik</div>
10. <div class="col-md-3"style="background-color:lavenderblush;">Ajeet</div>
11. </div>
12.
13. </div>
14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
15. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
16. </body>

For unequal columns:

1. <body>
2.
3. <div class="container">
4. <h1>Grid Example</h1>
5.
6. <div class="row">
7. <div class="col-md-1"style="background-color:lavender;">Rahul</div>
8. <div class="col-md-2"style="background-color:lavenderblush;">Vijay</div>
9. <div class="col-md-4"style="background-color:lavender;">Kartik</div>
10. <div class="col-md-5"style="background-color:lavenderblush;">Ajeet</div>
11. </div>
12.
13. </div>
14.
15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
16. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
17. </body>

Bootstrap Basic 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.

Example:

1. <body>
2.
3. <div class="container">
4. <h1>Basic Table Example</h1>
5.
6. <table class="table">
7. <tr><th>Id</th><th>Name</th><th>Age</th></tr>
8. <tr><td>101</td><td>Rahul</td><td>23</td></tr>
9. <tr><td>102</td><td>Umesh</td><td>22</td></tr>
10. <tr><td>103</td><td>Max</td><td>29</td></tr>
11. <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
12. </table>
13.
14. </div>
15.
16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
17. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
18. </body>

Bootstrap Striped Rows Table:

The .table-striped class is used to add zebra-stripes to a table:

1. <body>
2.
3. <div class="container">
4. <h1>Striped Table Example</h1>
5.
6. <table class="table table-striped">
7. <tr><th>Id</th><th>Name</th><th>Age</th></tr>
8. <tr><td>101</td><td>Rahul</td><td>23</td></tr>
9. <tr><td>102</td><td>Umesh</td><td>22</td></tr>
10. <tr><td>103</td><td>Max</td><td>29</td></tr>
11. <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
12. </table>
13.
14. </div>
15.
16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
17. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
18. </body>

Bootstrap Bordered table:

The .table-bordered class is used to add borders on all sides of the table and cells:

1. <body>
2.
3. <div class="container">
4. <h1>Bordered Table Example</h1>
5.
6. <table class="table table-striped table-bordered">
7. <tr><th>Id</th><th>Name</th><th>Age</th></tr>
8. <tr><td>101</td><td>Rahul</td><td>23</td></tr>
9. <tr><td>102</td><td>Umesh</td><td>22</td></tr>
10. <tr><td>103</td><td>Max</td><td>29</td></tr>
11. <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
12. </table>
13.
14. </div>
15.
16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
17. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
18. </body>

Bootstrap Hover rows Table:

The .table-hover class is used to enable a hover state on table rows:

1. <body>
2.
3. <div class="container">
4. <h1>Hower rows Table Example</h1>
5.
6. <table class="table table-hover">
7. <tr><th>Id</th><th>Name</th><th>Age</th></tr>
8. <tr><td>101</td><td>Rahul</td><td>23</td></tr>
9. <tr><td>102</td><td>Umesh</td><td>22</td></tr>
10. <tr><td>103</td><td>Max</td><td>29</td></tr>
11. <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
12. </table>
13.
14. </div>
15.
16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
17. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
18. </body>

Bootstrap Condensed table:

The .table-condensed class is used to make a table more compact by cutting cell
padding in half:

1. <body>
2.
3. <div class="container">
4. <h1>Condensed Table Example</h1>
5.
6. <table class="table table-condensed">
7. <tr><th>Id</th><th>Name</th><th>Age</th></tr>
8. <tr><td>101</td><td>Rahul</td><td>23</td></tr>
9. <tr><td>102</td><td>Umesh</td><td>22</td></tr>
10. <tr><td>103</td><td>Max</td><td>29</td></tr>
11. <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
12. </table>
13.
14. </div>
15.
16.
17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
18. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
19. </body>

Bootstrap Contextual classes:.

Contextual classes are used to color table rows (<tr>) or table cells (<td>):

Following are the different contextual classes:

Class Description

.active It is used to apply the hover color to the table row or table cell

.success It indicates a successful or positive action

.info It indicates a neutral informative change or action

.warning It specifies a warning that might need attention

.danger It indicates a dangerous or potentially negative action

Example:

1. <body>
2.
3. <div class="container">
4. <h1>Contextual classes</h1>
5.
6. <table class="table">
7. <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
8. <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
9. <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
10. <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
11. <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
12. </table>
13.
14. </div>
15.
16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
17. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
18. </body>

Responsive tables:
The .table-responsive class is used to create a responsive table. You can open the
responsible table even on small devices (under 768px). Then the table will be scrolled
horizontally. Displays larger than 768px wide, there is no difference.

See this example:

1. <body>
2.
3. <div class="container">
4. <h1>Contextual classes</h1>
5. <div class="table-responsive">
6.
7. <table class="table">
8. <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
9. <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
10. <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
11. <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
12. <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
13. </table>
14.
15. </div>
16.
17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
18. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
19. </body>

Bootstrap Forms
In Bootstrap, there are three types of form layouts:

o Vertical form (this is default)

o Horizontal form

o Inline form

Bootstrap Form Rules

There are three standard rules for these 3 form layouts:

o Always use <form role="form"> (helps improve accessibility for people using
screen readers)

o Wrap labels and form controls in <div class="form-group"> (needed for

optimum spacing)

o Add class .form-control to all textual <input>, <textarea>, and <select>

elements

1) Bootstrap Vertical Form (Default)

1. <body>
2.
3. <div class="container">
4. <h1>Vertical Form Example</h1>
5.
6. <form style="width:300px">
7. <div class="form-group">
8. <label for="exampleInputEmail1">Email address</label>
9. <input type="email" class="form-
control" id="exampleInputEmail1" placeholder="Email">
10. </div>
11. <div class="form-group">
12. <label for="exampleInputPassword1">Password</label>
13. <input type="password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
14. </div>
15.
16. <button type="submit" class="btn btn-default">Login</button>
17. </form>
18.
19. </div>
20.
21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
22. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
23. </body>

2) 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!

Example:

1. <body>
2.
3. <div class="container">
4. <h2>Inline form Example</h2>
5. <form class="form-inline" role="form">
6. <form style="width:300px">
7. <div class="form-group">
8. <label for="exampleInputEmail1">Email address</label>
9. <input type="email" class="form-
control" id="exampleInputEmail1" placeholder="Email">
10. </div>
11. <div class="form-group">
12. <label for="exampleInputPassword1">Password</label>
13. <input type="password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
14. </div>
15.
16. <button type="submit" class="btn btn-default">Login</button>
17. </form>
18.
19. </div>
20. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
21. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
22.
23. </body>

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

Example:

1. <body>
2.
3. <div class="container">
4. <h2>Horizontal form Example</h2>
5. <form class="form-horizontal" role="form">
6. <form style="width:300px">
7. <div class="form-group">
8. <label class="control-label col-sm-2" for="email">Email:</label>
9. <div class="col-sm-10">
10. <input type="email" class="form-
control" id="email" placeholder="Enter email">
11. </div>
12. </div>
13. <div class="form-group">
14. <label class="control-label col-sm-2" for="pwd">Password:</label>
15. <div class="col-sm-10">
16. <input type="password" class="form-
control" id="pwd" placeholder="Enter password">
17. </div>
18. </div>
19.
20. <div class="form-group">
21. <div class="col-sm-offset-2 col-sm-10">
22. <button type="submit" class="btn btn-default">Submit</button>
23. </div>
24. </div>
25. </form>
26. </div>
27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
28. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
29.
30. </body>

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.

o .alert-success

o .alert-info
o .alert-warning

o .alert-danger

Bootstrap Alert Example

1. <body>
2.
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box indicates a successful or positive action
.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box indicates a neutral informative change or a
ction.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box indicates a warning that might need att
ention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box indicates a dangerous or potentially neg
ative action.
</div>
</div>
3.
4. </body>

Bootstrap Wells
In Bootstrap, wells are used to add a rounded border around an element with a gray
background color and some padding. It is like a container that displays the content.

The class .well is used with <div> element to add well.

Example:

<body>
<div class="container">
<h2>Well Example</h2>
<div class="well">Hi! I am a Basic Well.</div>
</div>

Bootstrap Wells Size

By Default, wells size is medium but you can change the size of the well according to
your need. The .well-sm class is used for small wells and .well-lg class is used for
large wells.

Example:

1. <body>
2.
<div class="container">
<h2>Well Size</h2>
<div class="well well-sm">This is Small Well</div>
<div class="well">This is Medium Well (By Default)</div>
<div class="well well-lg">This is Large Well</div>
</div>
3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
4. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
5.
6. </body>

Bootstrap Badges and Labels

Bootstrap Badges
Bootstrap Badges are numerical indicators used to show that how many items are
associated with the specific link. Badges are used to highlight new or unread items.

The class .badge within the <span> element is used to create badges.

Bootstrap Badge Example

1. <body>
2.
<div class="container">
<h2>Badges</h2>
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
</div>
3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
4. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
5. </body>

Bootstrap Badge Example 2

You can also use badges inside other elements, such as buttons.

Let's take an example to see how to add badges to button.

1. <body>
2.
3.
<div class="container">
<h2>Badges on Buttons</h2>
<button type="button" class="btn btn-
primary">Primary <span class="badge">7</span></button>
<button type="button" class="btn btn-
success">Success <span class="badge">3</span></button>
<button type="button" class="btn btn-
danger">Danger <span class="badge">5</span></button>
</div>
4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
5. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
6. </body>
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.

Bootstrap Label Example

1. <body>
2.
3. <div class="container">
4. <h2>Labels Example</h2>
5. <h1>Update <span class="label label-default">New</span></h1>
6. <h2>Update<span class="label label-default">New</span></h2>
7. <h3>Update <span class="label label-default">New</span></h3>
8. <h4>Update<span class="label label-default">New</span></h4>
9. <h5>Update<span class="label label-default">New</span></h5>
10. <h6>Update<span class="label label-default">New</span></h6>
11. </div>
12.
13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
14. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
15.
16. </body>

Bootstrap Label Example 2: changing colors

We can change the label colors by using contextual label classes.

1. <body>
2.
3. <div class="container">
4. <h2>Contextual Label Classes</h2>
5. <span class="label label-default">Default Label</span>
6. <span class="label label-primary">Primary Label</span>
7. <span class="label label-success">Success Label</span>
8. <span class="label label-info">Info Label</span>
9. <span class="label label-warning">Warning Label</span>
10. <span class="label label-danger">Danger Label</span>
11. </div>
12.
13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
14. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
15.
16. </body>

Bootstrap Label Example 3

1. <body>
2.
3. <div class="container">
4. <h2>Labels Example</h2>
5. <h3>Update <span class="label label-default">new</span>
6. <h3>Update <span class="label label-primary">new</span>
7. <h3>Update <span class="label label-success">new</span>
8. <h3>Update <span class="label label-info">new</span>
9. <h3>Update <span class="label label-warning">new</span>
10. <h3>Update <span class="label label-danger">new</span>
11.
12. </div>
13.
14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
15. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
16.
17. </body>

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

Bootstrap Panel Example

1. <body>
2.
3. <div class="container">
4. <h1>Panel Example</h1>
5.
6. <div class="panel panel-primary">
7. <div class="panel-heading">
8. <h3 class="panel-title"><strong>Panel title</strong></h3>
9. </div>
10. <div class="panel-body">
11. Panel content
12. </div>
13. <div class="panel-footer">
14. <strong>Panel footer</strong>
15. </div>
16. </div>
17.
18. </div>
19.
20. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
21. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
22. </body>
Bootstrap Panel Group
Panel group is used to groups many panel together.

For a panel group, you have to wrap a <div> with class .panel-group around them.

The .panel-group class clears the bottom-margin of each panel.

See this example:

1. <body>
2.
3. <div class="container">
4. <h2>Panel Group</h2>
5. <p>The panel-group class clears the bottom-
margin. Try to remove the class and see what happens.</p>
6. <div class="panel-group">
7. <div class="panel panel-default">
8. <div class="panel-heading">Panel Header</div>
9. <div class="panel-body">Panel Content</div>
10. </div>
11. <div class="panel panel-default">
12. <div class="panel-heading">Panel Header</div>
13. <div class="panel-body">Panel Content</div>
14. </div>
15. <div class="panel panel-default">
16. <div class="panel-heading">Panel Header</div>
17. <div class="panel-body">Panel Content</div>
18. </div>
19. </div>
20. </div>
21.
22. </body>

Bootstrap Panel with contextual classes

Contextual classes (.panel-default, .panel-primary, .panel-success, .panel-
info, .panel-warning, or .panel-danger) are used to color the panels.

Example:
1. <body>
2.
3. <div class="container">
4. <h2>Panels with Contextual Classes</h2>
5. <div class="panel-group">
6. <div class="panel panel-default">
7. <div class="panel-heading">Panel with panel-default class</div>
8. <div class="panel-body">Panel Content</div>
9. </div>
10.
11. <div class="panel panel-primary">
12. <div class="panel-heading">Panel with panel-primary class</div>
13. <div class="panel-body">Panel Content</div>
14. </div>
15.
16. <div class="panel panel-success">
17. <div class="panel-heading">Panel with panel-success class</div>
18. <div class="panel-body">Panel Content</div>
19. </div>
20.
21. <div class="panel panel-info">
22. <div class="panel-heading">Panel with panel-info class</div>
23. <div class="panel-body">Panel Content</div>
24. </div>
25.
26. <div class="panel panel-warning">
27. <div class="panel-heading">Panel with panel-warning class</div>
28. <div class="panel-body">Panel Content</div>
29. </div>
30.
31. <div class="panel panel-danger">
32. <div class="panel-heading">Panel with panel-danger class</div>
33. <div class="panel-body">Panel Content</div>
34. </div>
35. </div>
36. </div>
37.
38. </body>

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

Following is a list of classes that Bootstrap provides to handle pagination.

Table:

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 in
.active

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

.pagination-
sm

Bootstrap Pagination Example

Add the .pagination class to an <ul> element to create a basic pagination.

See this 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bo
otstrap.min.css">

</head>
<body>

<div class="container">
<h2>A basic pagination example:</h2>
<p>The .pagination class provides pagination links:</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>

</body>
</html>

Bootstrap Active State

The active state specifies the current page on which user is active.

The class .active is used to specify active state.

See this example:

Bootstrap Disabled State

The disabled state specifies that you cannot click on the link.

Add class .disabled to disable the links you don't need more.

See this example:

Bootstrap Pagination Sizing

You can also size pagination blocks larger or smaller accordingly.

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.

See this example:

Bootstrap Breadcrumbs
It is another form of pagination. It indicates the current page's location within a
navigational hierarchy.

The .breadcrumb class is used to create breadcrumbs.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
6.
7. </head>
8. <body>
9.
<div class="container">
<h2>Breadcrumbs Example:</h2>
<p>The .breadcrumb class indicates the current page's location within a navigational h
ierarchy:</p>
<ul class="breadcrumb">
<li><a href="#">Java</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Php</a></li>
<li class="active">.Net</li>
</ul>
</div>
10.
11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
12. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
13.
14. </body>
15. </html>

Bootstrap Pager
Bootstrap pager is a form of pagination. It is used to create previous and next buttons
(links).

The ".pager" class is used within the <ul> element to create the previous / next
buttons.
Bootstrap Pager Example
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Pager Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
<div class="container">
<h2>Pager Example</h2>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Pager Align Buttons

You can align the previous and next buttons to each side of the page.

The classes ".previous" and ".next" is used to align the buttons previous and next
respectively.

See this example:

Bootstrap Images
Bootstrap supports for images. There are three classes in Bootstrap that can be used
to apply some simple style to the images.

The following classes add style to the images:

Classes Uses

.img-rounded It adds border-radius:6px to give the image rounded corners.

.img-circle It makes the entire image round by adding border-radius:500px.

.img-thumbnail It adds a bit of padding and a gray border.

Bootstrap Image-rounded Example
The class .img-rounded is used to add rounded corners to an image ( IE8 does not
support rounded corners).

Example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap image</title>
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/
bootstrap.min.css">
6. </head>
7. <body>
<div class="container">
<h2>Rounded Corners</h2>
<img src="abc.jpg" class="img-rounded" alt="abc" width="300" height="250">
</div>
8.
9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
10. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
11. </body>
12. </html>

Bootstrap Image-circle Example

The class .img-circle is used to shape the image to a circle (IE8 does not support
rounded corners).

Example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap image</title>
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/
bootstrap.min.css">
6. </head>
7. <body>
8. <div class="container">
9. <h2>Circle</h2>
10. <img src="abc.jpg" class="img-circle" alt="abc" width="300" height="250">
11. </div>
12.
13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
14. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
15. </body>
16. </html>

Bootstrap Thumbnail Image Example

The class .img-thumbnail is used to shape an image to a thumbnail.

Example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap image</title>
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/
bootstrap.min.css">
6. </head>
7. <body>
<div class="container">
<h2>Thumbnail</h2>
<img src="abc.jpg" class="img-thumbnail" alt="abc" width="300" height="250">
</div>
8.
9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
10. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
11. </body>
12. </html>

Bootstrap Responsive images

The responsive images can adjust themselves automatically to fit the size of screen.
You can create responsive images by adding an .img-responsive class to the <img>
tag. The image will then scale nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and
height: auto; to the image.

Example:

1. <!DOCTYPE html>
2. <html lang="en">
3.
4. <head>
5. <title>Bootstrap Example</title>
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
9. </head>
10. <body>
11.
<div class="container">
<h2>Responsive Image</h2>
<img class="img-responsive" src="abc.jpg" alt="abc" width="460" height="345">
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14.
15. </body>
16. </html>

Bootstrap Responsive Videos / Embeds

In Bootstrap, you can also add videos and scale them properly on any devices.
The class .embed-responsive-item is used to create a responsive video. Class can
be applied directly to <iframe>, <embed>, <video>, and <object> elements.

Let's take an example:

In the following example, we add .embed-responsive-item class to an <iframe>

tag to make the video responsive. It can scale the video nicely according to the parent
element.

Example:

Bootstrap Glyphicons
Glyphicons are the icon fonts that are used in web projects. Bootstrap provides 260
Glyphicons from the Glyphicons Halflings set.

Some examples of Glyphicons are:

o Envelope glyphicon

o Print glyphicon

o Search glyphicon

o Download glyphicon etc.

Glyphicons Syntax
1. <span class="glyphicon glyphicon-name"></span>

To create the desired Glyphicon, the "name" part of the syntax must be replaced
accordingly.

For example: If you want to create "envelope" glyphicon, then you must write the
following syntax:

1. <span class="glyphicon glyphicon-envelope"></span>

Bootstrap Glyphicon Example

Let's take an example to see the different ways to use glyphicons:

Bootstrap carousel
The Bootstrap carousel is a flexible, responsive way that is used to add a slider to your
webpage. It is very responsive and flexible enough to allow, images, iframes, videos,
or any other type of content that you want to add.

The Carousel Plugin:

The carousel plugin is a component for cycling through element, like a carousel. If you
want to add plugin functionality individually, then you have to use carousel.js file or
all at once (using "bootstrap.js" or "bootstrap.min.js").

Bootstrap carousel Example

Let's take a carousel example and see how to create a basic carousel.

1.
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <title>Bootstrap Carousel</title>
6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/
css/bootstrap.min.css"/>
7. </head>
8. <style>
9. .carousel-inner > .item > img,
10. .carousel-inner > .item > a > img {
11. width: 80%;
12. margin: auto;
13. }
14. </style>
15.
16. <body>
17.
<div class="container">
<h1>Carousel Example</h1>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

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

<a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

</div>
18.
19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
20. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
21. </body>
22. </html>
Bootstrap carousel Example: add captions to
slides
If you want to add captions to the slides, then you have to add <div class="carousel-
caption"> within each <div class="item"> .

1.
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <title>Job</title>
6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/
css/bootstrap.min.css"/>
7. </head>
8. <style>
9. .carousel-inner > .item > img,
10. .carousel-inner > .item > a > img {
11. width: 80%;
12. margin: auto;
13. }
14. </style>
15. <body>
16.
17. <div class="container">
18. <h1>Carousel Example</h1>
19.
20. <div id="myCarousel" class="carousel slide" data-ride="carousel">
21. 
22. <ol class="carousel-indicators">
23. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
24. <li data-target="#myCarousel" data-slide-to="1"></li>
25. <li data-target="#myCarousel" data-slide-to="2"></li>
26. </ol>
27.
28. 
29. <div class="carousel-inner" role="listbox">
30. <div class="item active">
31. <img src="images/jokes1.jpg" alt="jokes 1" >
32. <h3>Santa-Banta</h3>
33. <p>Read Santa-Banta jokes at atharva.</p>
34. </div>
35.
36. <div class="item">
37. <img src="images/jokes2.jpg" alt="jokes 2" >
38. <h3>Santa-Banta</h3>
39. <p>Read Santa-Banta jokes at atharva.</p>
40. </div>
41.
42. <div class="item">
43. <img src="images/jokes3.jpg" alt="jokes 3" >
44. <h3>Santa-Banta</h3>
45. <p>Read Santa-Banta jokes at atharva.</p>
46. </div>
47. </div>
48.
49. 
50. <a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
51. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
52. <span class="sr-only">Previous</span>
53. </a>
54. <a class="right carousel-control" href="#myCarousel" role="button" data-
slide="next">
55. <span class="glyphicon glyphicon-chevron-right" aria-
hidden="true"></span>
56. <span class="sr-only">Next</span>
57. </a>
58. </div>
59.
60. </div>
61. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
62. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
"></script>
63. </body>
64. </html>

Bootstrap Progress Bar

The progress bar shows how far a user is in a process. In Bootstrap, there are several
types of progress bars.

The class .progress within a <div> element is used to create a default progress bar
in bootstrap.

Bootstrap Progress Bar Example

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Progress bar</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
<div class="container">
<h2>Default Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-
valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>
Bootstrap Progress bar with Label
The progress bar with label specifies the percentage of progress of a specific process.

You have to remove the .sr-only class from the progress bar to show a visible
percentage.

See this example:

</head>
<body>

<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="76" aria-
valuemin="0" aria-valuemax="100" style="width:76%">
76%
</div>
</div>
</div>

</body>
</html>
Bootstrap Colored Progress bar
You can use contextual classes to create colored progress bar.

The contextual classes that are used to create colored progress bar:

o .progress-bar-success

o .progress-bar-info

o .progress-bar-warning

o .progress-bar-danger

12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><

/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14.
15. </body>
16. </html>

Bootstrap Stripped Progress bar

You can create stripped progress bar by using class .progress-bar-striped .

12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><

/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14.
15. </body>
16. </html>

Bootstrap Animated progress bar

You have to use class .active to create animated progress bar.

Bootstrap List Groups

Bootstrap list group is used to create a group of list with list items. The most basic list
group is an unordered list containing list items.

The class ".list-group" within the <ul> element and the class ".list-group-
item" within the <li>element are used to create a basic list group.

Bootstrap List Group Example

</head>
<body>

<div class="container">
<h2>Basic List Group Example</h2>
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></sc
ript>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><
/script>
</body>
</html>

Bootstrap List Group with Badges

The badges can also be added to a list group. They will automatically be positioned to
the right side.

You have to create a <span> element with class ".badge" inside the list item to
create a badge.

Bootstrap List Groups with Hyperlinks

You can also link items to the list group. This provides a grey background color on
hover. You have to use <div> instead of <ul> and <a> instead of <li> element to
create a list group with linked items.

Bootstrap List Group: Display active item

The class ".active" is used to highlight the current item. It specifies that the specific
item is in active state.

Bootstrap List Group: Display a disable item

The class ".disabled" is used to disable a specific item in the list group.

Bootstrap List Group: Contextual Classes

You can add colors to the list items by using contextual classes.

The following classes are used for coloring list items:

o .list-group-item-success

o .list-group-item-info

o .list-group-item-warning

o .list-group-item-danger

<h2>Linked Items With Contextual Classes</h2>

<a href="#" class="list-group-item list-group-item-success">First item</a>
<a href="#" class="list-group-item list-group-item-info">Second item</a>
<a href="#" class="list-group-item list-group-item-warning">Third item</a>
<a href="#" class="list-group-item list-group-item-danger">Fourth item</a>
</div>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

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

You have to wrap dropdown menu within the class .dropdown to create Bootstrap
Dropdown.
Bootstrap Dropdown Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
6.
7. </head>
8. <body>
9.
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-
toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-
toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
10.
11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
12. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
13.
14. </body>
15. </html>
Bootstrap Dropdown Divider
The class .divider is used to separate links inside the dropdown menu:

See this example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/
css/bootstrap.min.css">

</head>
<body>

<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu:</p>

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-
toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>

Bootstrap Dropdown Header

The class .dropdown-header is used to add headers inside the dropdown menu.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
6.
7. </head>
8. <body>
9.
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-
header class is used to add headers inside the dropdown menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-
toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header 2</li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
10.
11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
12. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
13.
14. </body>
15. </html>

Bootstrap Dropdown: Disable an item

Use the class .disabled to disable an item in the dropdown menu.

See this example:

10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><

/script>
11. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
12.
13. </body>
14. </html>

Bootstrap Collapse
Bootstrap collapse is used when you want to hide and show large amount of content.

The ".collapse" class is used to specify the collapsible element.

Bootstrap Collapse Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
6.
7. </head>
8. <body>
9.
<div class="container">
<h2>Basic Collapse Example</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-
target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Tigers and Lions are the most ferocious animals on the earth. They belong to the felidae(
cat) family.
They are both from the four big cats. These four big cats are Lion, Tiger, Leopard, and J
aguar.
These animals reside on the top of the food chain and don't have any predators.
</div>
</div>
10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
11. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
12. </body>
13. </html>

Bootstrap Collapsible Panel

You can also collapse a panel.

See this example:

</head>
<body>

<div class="container">
<h2>Collapsible Panel</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></sc
ript>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><
/script>
</body>
</html>

Bootstrap Collapsible List Group

You can also create a collapsible panel with a list group inside.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
6.
7. </head>
8. <body>
9.
10. <div class="container">
11. <h2>Collapsible List Group</h2>
12. <div class="panel-group">
13. <div class="panel panel-default">
14. <div class="panel-heading">
15. <h4 class="panel-title">
16. <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
17. </h4>
18. </div>
19. <div id="collapse1" class="panel-collapse collapse">
20. <ul class="list-group">
21. <li class="list-group-item">One</li>
22. <li class="list-group-item">Two</li>
23. <li class="list-group-item">Three</li>
24. </ul>
25. <div class="panel-footer">Footer</div>
26. </div>
27. </div>
28. </div>
29. </div>
30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
31. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
32. </body>
33. </html>

Bootstrap Tabs and Pills

Bootstrap Menus
Menus are used in most of the web pages. These are defined in an unordered list <ul>.
You have to add the .list-inline class to <ul> to create a horizontal menu.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h3>Inline List</h3>
14. <ul class="list-inline">
15. <li><a href="#">Home</a></li>
16. <li><a href="#">Menu 1</a></li>
17. <li><a href="#">Menu 2</a></li>
18. <li><a href="#">Menu 3</a></li>
19. </ul>
20. </div>
21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
22. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
23. </body>
24. </html>

Bootstrap Tabs
You can create a basic navigation tag with <ul class="nav nav-tabs">. You can also
mark the current page with <liclass="active">.

The following example specifies how to create a simple navigation tab.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h3>Tabs</h3>
14. <ul class="nav nav-tabs">
15. <li class="active"><a href="#">Home</a></li>
16. <li><a href="#">Menu 1</a></li>
17. <li><a href="#">Menu 2</a></li>
18. <li><a href="#">Menu 3</a></li>
19. </ul>
20. <br>
21.
22. </div>
23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
24. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
25. </body>
26. </html>

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h3>Tabs With Dropdown Menu</h3>
14. <ul class="nav nav-tabs">
15. <li class="active"><a href="#">Home</a></li>
16. <li class="dropdown">
17. <a class="dropdown-toggle" data-
toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
18. <ul class="dropdown-menu">
19. <li><a href="#">Submenu 1-1</a></li>
20. <li><a href="#">Submenu 1-2</a></li>
21. <li><a href="#">Submenu 1-3</a></li>
22. </ul>
23. </li>
24. <li><a href="#">Menu 2</a></li>
25. <li><a href="#">Menu 3</a></li>
26. </ul>
27. </div>
28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
29. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
30. </body>
31. </html>

Bootstrap Toggleable / Dynamic Tabs

Add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with
a unique ID for every tab and wrap them inside a <div> element with class .tab-
content, to make tags toggleable.

If you want the tabs to fade in and out when clicking on them, add the .fade
class to .tab-pane .

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h2>Dynamic Tabs</h2>
14. <ul class="nav nav-tabs">
15. <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
16. <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
17. <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
18. <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
19. </ul>
20.
21. <div class="tab-content">
22. <div id="home" class="tab-pane fade in active">
23. <h3>HOME</h3>
24. <p>A markup language is a programming language that is used make text more

25. interactive and dynamic. It can turn a text into images, tables, links etc.</p
>
26. </div>
27. <div id="menu1" class="tab-pane fade">
28. <h3>Menu 1</h3>
29. <p>Java is a high level, robust, secured and object-
oriented programming language.</p>
30. </div>
31. <div id="menu2" class="tab-pane fade">
32. <h3>Menu 2</h3>
33. <p>SQL is just a query language, it is not a database. To perform SQL queries,

34. you need to install any database for example Oracle, MySQL, MongoDB, PostGre
SQL, SQL Server, DB2 etc.</p>
35. </div>
36. <div id="menu3" class="tab-pane fade">
37. <h3>Menu 3</h3>
38. <p>The C Language is developed for creating system applications that direct
39. interacts to the hardware devices such as drivers, kernals etc.</p>
40. </div>
41. </div>
42. </div>
43. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
44. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
45. </body>
46. </html>

Bootstrap Pills
You can create pills with <ul class="nav nav-pills">. You can also mark the current
page with <li class="active">.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
<div class="container">
<h3>Pills</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Vertical Pills

Add the .nav-stacked class to display the pills vertically.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
<div class="container">
<h3>Vertical Pills</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
<div class="container">
<h3>Pills With Dropdown Menu</h3>
<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>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></sc
ript>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><
/script>
12. </body>
13. </html>

Bootstrap Toggleable Dynamic Pills

It is same as toggleable dynamic tabs, the only change is the data-toggle attribute
to data-toggle="pill" .

See this example:

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>A markup language is a programming language that is used make text more int
eractive and
dynamic. It can turn a text into images, tables, links etc.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Java is a high level, robust, secured and object-
oriented programming language.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>SQL is just a query language, it is not a database. To perform SQL queries,
you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQ
L, SQL Server, DB2 etc.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>The C Language is developed for creating system applications that direct
interacts to the hardware devices such as drivers, kernals etc.</p>
</div>
</div>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Navigation Bar

A navigation bar is like a navigation header that is placed at the top of the page. You
can collapse or extend it according to the screen size.

You can create a standard navigation bar at the top of the page with with <nav
class="navbar navbar-default">.
See this example:

<nav class="navbar navbar-default">

<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>

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

Bootstrap Inverted Navigation Bar

Inverted navigation bar provides an alternative black navbar. It can be used to style
the default navigation bar by changing .navbar-default class into .navbar-inverse
class .

See this example:

<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Navigation Bar with Dropdown

You can also add dropdown menu with navigation bars. The following example adds a
dropdown menu for the "page 1" button.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-
toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar
.</p>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Right-Aligned Navigation Bar

Use the .navbar-right class to right-align navigation bar buttons. In the following
example, we add "Sign Up"and "Log in" button to the right in the navigation bar.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Case</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8.
9. </head>
10. <body>
11.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-
toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-
user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-
in"></span> Login</a></li>
</ul>
</div>
</nav>

<div class="container">
<h3>Right Aligned Navbar</h3>
<p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Inputs

Bootstrap Input Types

Input type: checkbox

Input type: radio button

Bootstrap Checkbox
Checkbox facilitates you to select any number of options from a list of present options.

See this example:

</head>
<body>

<div class="container">
<h2>Input type: checkbox</h2>
<form role="form">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>

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

Use the .checkbox-inline class if you want the checkboxes to appear on the same
line:

See this example:

Bootstrap Radio Buttons

Radio buttons also facilitates you to select any number of options from a list of present
options.

See this example:

<form role="form">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
</form>
</div>
11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
12. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
13. </body>
14. </html>

Use the .radio-inline class if you want the radio buttons to appear on the same line:

See this example:

Bootstrap Modals
The bootstrap modal plugin is a dialog box / popup window that is displayed on top of
the current page.

Bootstrap Modal Example

<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>Write your 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>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Modal Size

You can change the size of the modal by adding the .modal-sm class for small modals
or .modal-lg class for large modals.

The size class is added to the <div> element with class .modal-dialog.

Small Modal:
See this example:

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<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>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

Bootstrap Large Modal

See this example:

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<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>This is a large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
14. </body>
15. </html>

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

To create a popover, add the data-toggle="popover" attribute to an element and

the title attribute to specify the header text of the popover, the data-content attribute
to specify the text that should be displayed inside the popover's body.

See this example:

Bootstrap Positioning Popovers

By default the popover is appeared on the ride side of the element but you can set a
position of the popover where ever you want such as top, bottom, side and left.

Use the data-placement attribute to set the position of the popover on top, bottom,
left or the right side of the element.

See this example:

Bootstrap Closing Popovers

By default, the popover is closed when you click on the element again. But you can
use the attribute data-trigger="focus" to close the popover when clicking outside
the element.

See this example:

Bootstrap Scrollspy
The Bootstrap Scrollspy plugin is used to automatically update links in a navigation list
based on scroll position.

See this example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Bootstrap Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
9. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
10. <style>
11. body {
12. position: relative;
13. }
14. #section1 {padding-top:50px;height:500px;color: #fff; background-
color: #1E88E5;}
15. #section2 {padding-top:50px;height:500px;color: #fff; background-
color: #673ab7;}
16. #section3 {padding-top:50px;height:500px;color: #fff; background-
color: #ff9800;}
17. #section41 {padding-top:50px;height:500px;color: #fff; background-
color: #00bcd4;}
18. #section42 {padding-top:50px;height:500px;color: #fff; background-
color: #009688;}
19. </style>
20. </head>
21. <body data-spy="scroll" data-target=".navbar" data-offset="50">
22.
23. <nav class="navbar navbar-inverse navbar-fixed-top">
24. <div class="container-fluid">
25. <div class="navbar-header">
26. <button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
27. <span class="icon-bar"></span>
28. <span class="icon-bar"></span>
29. <span class="icon-bar"></span>
30. </button>
31. <a class="navbar-brand" href="#">WebSiteName</a>
32. </div>
33. <div>
34. <div class="collapse navbar-collapse" id="myNavbar">
35. <ul class="nav navbar-nav">
36. <li><a href="#section1">Section 1</a></li>
37. <li><a href="#section2">Section 2</a></li>
38. <li><a href="#section3">Section 3</a></li>
39. <li class="dropdown"><a class="dropdown-toggle" data-
toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
40. <ul class="dropdown-menu">
41. <li><a href="#section41">Section 4-1</a></li>
42. <li><a href="#section42">Section 4-2</a></li>
43. </ul>
44. </li>
45. </ul>
46. </div>
47. </div>
48. </div>
49. </nav>
50.
51. <div id="section1" class="container-fluid">
52. <h1>Section 1</h1>
53. <p>Try to scroll this section and look at the navigation bar while scrolling!
54. Try to scroll this section and look at the navigation bar while scrolling!</p>
55. <p>Try to scroll this section and look at the navigation bar while scrolling!
56. Try to scroll this section and look at the navigation bar while scrolling!</p>
57. </div>
58. <div id="section2" class="container-fluid">
59. <h1>Section 2</h1>
60. <p>Try to scroll this section and look at the navigation bar while scrolling!
61. Try to scroll this section and look at the navigation bar while scrolling!</p>
62. <p>Try to scroll this section and look at the navigation bar while scrolling!
63. Try to scroll this section and look at the navigation bar while scrolling!</p>
64. </div>
65. <div id="section3" class="container-fluid">
66. <h1>Section 3</h1>
67. <p>Try to scroll this section and look at the navigation bar while scrolling!
68. Try to scroll this section and look at the navigation bar while scrolling!</p>
69. <p>Try to scroll this section and look at the navigation bar while scrolling!
70. Try to scroll this section and look at the navigation bar while scrolling!</p>
71. </div>
72. <div id="section41" class="container-fluid">
73. <h1>Section 4 Submenu 1</h1>
74. <p>Try to scroll this section and look at the navigation bar while scrolling!
75. Try to scroll this section and look at the navigation bar while scrolling!</p>
76. <p>Try to scroll this section and look at the navigation bar while scrolling!
77. Try to scroll this section and look at the navigation bar while scrolling!</p>
78. </div>
79. <div id="section42" class="container-fluid">
80. <h1>Section 4 Submenu 2</h1>
81. <p>Try to scroll this section and look at the navigation bar while scrolling!
82. Try to scroll this section and look at the navigation bar while scrolling!</p>
83. <p>Try to scroll this section and look at the navigation bar while scrolling!
84. Try to scroll this section and look at the navigation bar while scrolling!</p>
85. </div>
86.
87. </body>
88. </html>
Bootstrap Vertical Scrollspy Menu
You can also use vertical navigation pills as menu.

See this example:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Bootstrap Example</title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css
/bootstrap.min.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
9. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
10. <style>
11. body {
12. position: relative;
13. }
14. ul.nav-pills {
15. top: 20px;
16. position: fixed;
17. }
18. div.col-sm-9 div {
19. height: 250px;
20. font-size: 28px;
21. }
22. #section1 {color: #fff; background-color: #1E88E5;}
23. #section2 {color: #fff; background-color: #673ab7;}
24. #section3 {color: #fff; background-color: #ff9800;}
25. #section41 {color: #fff; background-color: #00bcd4;}
26. #section42 {color: #fff; background-color: #009688;}
27.
28. @media screen and (max-width: 810px) {
29. #section1, #section2, #section3, #section41, #section42 {
30. margin-left: 150px;
31. }
32. }
33. </style>
34. </head>
35. <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
36.
37. <div class="container">
38. <div class="row">
39. <nav class="col-sm-3" id="myScrollspy">
40. <ul class="nav nav-pills nav-stacked">
41. <li class="active"><a href="#section1">Section 1</a></li>
42. <li><a href="#section2">Section 2</a></li>
43. <li><a href="#section3">Section 3</a></li>
44. <li class="dropdown">
45. <a class="dropdown-toggle" data-
toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
46. <ul class="dropdown-menu">
47. <li><a href="#section41">Section 4-1</a></li>
48. <li><a href="#section42">Section 4-2</a></li>
49. </ul>
50. </li>
51. </ul>
52. </nav>
53. <div class="col-sm-9">
54. <div id="section1">
55. <h1>Section 1</h1>
56. <p>Try to scroll this section and look at the navigation list while scrolling!</p
>
57. </div>
58. <div id="section2">
59. <h1>Section 2</h1>
60. <p>Try to scroll this section and look at the navigation list while scrolling!</p
>
61. </div>
62. <div id="section3">
63. <h1>Section 3</h1>
64. <p>Try to scroll this section and look at the navigation list while scrolling!</p
>
65. </div>
66. <div id="section41">
67. <h1>Section 4-1</h1>
68. <p>Try to scroll this section and look at the navigation list while scrolling!</p
>
69. </div>
70. <div id="section42">
71. <h1>Section 4-2</h1>
72. <p>Try to scroll this section and look at the navigation list while scrolling!</p
>
73. </div>
74. </div>
75. </div>
76. </div>
77.
78. </body>
79. </html>
JavaScript
JavaScript Tutorial for beginners and professionals is a solution of client side
dynamic pages.

JavaScript is an object-based scripting language that is lightweight and cross-

platform.

JavaScript is not compiled but translated. The JavaScript Translator (embedded in

browser) is responsible to translate the JavaScript code.

Where JavaScript is used

JavaScript is used to create interactive websites. It is mainly used for:

o Client-side validation

o Dynamic drop-down menus

o Displaying data and time

o Displaying popup windows and dialog boxes (like alert dialog box, confirm
dialog box and prompt dialog box)

o Displaying clocks etc.

JavaScript Example
Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript
code: within body tag, within head tag and external JavaScript file.

Let’s create the first JavaScript example.

1. <script type="text/javascript">
2. document.write("JavaScript is a simple language for atharva learners");
3. </script>

The script tag specifies that we are using JavaScript.

The text/javascript is the content type that provides information to the browser
about the data.

The document.write() function is used to display dynamic content through

JavaScript. We will learn about document object in detail later.
3 Places to put JavaScript code
1. Between the body tag of html

2. Between the head tag of html

3. In .js file (external javaScript)

1) JavaScript Example : code between the body tag

In the above example, we have displayed the dynamic content using JavaScript. Let’s
see the simple example of JavaScript that displays alert dialog box.

1. <script type="text/javascript">
2. alert("Hello Atharva");
3. </script>

2) JavaScript Example : code between the head tag

Let’s see the same example of displaying alert dialog box of JavaScript that is
contained inside the head tag.

In this example, we are creating a function msg(). To create function in JavaScript,

you need to write function with function_name as given below.

To call function, you need to work on event. Here we are using onclick event to call
msg() function.

1. <html>
2. <head>
3. <script type="text/javascript">
4. function msg(){
5. alert("Hello Atharva");
6. }
7. </script>
8. </head>
9. <body>
10. <p>Welcome to JavaScript</p>
11. <form>
12. <input type="button" value="click" onclick="msg()"/>
13. </form>
14. </body>
15. </html>

External JavaScript file

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several
html pages.

An external JavaScript file must be saved by .js extension. It is recommended to

embed all JavaScript files into a single file. It increases the speed of the webpage.

Let’s create an external JavaScript file that prints Hello Atharva in a alert dialog box.

message.js

1. function msg(){
2. alert("Hello Atharva");
3. }

Let’s include the JavaScript file into html page. It calls the JavaScript function on
button click.

index.html

1. <html>
2. <head>
3. <script type="text/javascript" src="message.js"></script>
4. </head>
5. <body>
6. <p>Welcome to JavaScript</p>
7. <form>
8. <input type="button" value="click" onclick="msg()"/>
9. </form>
10. </body>
11. </html>
JavaScript Comment
The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, warnings or suggestions so that end user can easily
interpret the code.

The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the
browser.

Advantages of JavaScript comments

There are mainly two advantages of JavaScript comments.

1. To make code easy to understand It can be used to elaborate the code so

that end user can easily understand the code.

2. To avoid the unnecessary code It can also be used to avoid the code being
executed. Sometimes, we add the code to perform some action. But after
sometime, there may be need to disable the code. In such case, it is better to
use comments.

Types of JavaScript Comments

There are two types of comments in JavaScript.

1. Single-line Comment

2. Multi-line Comment

JavaScript Single line Comment

It is represented by double forward slashes (//). It can be used before and after the
statement.

Let’s see the example of single-line comment i.e. added before the statement.

1. <script>
2. // It is single line comment
3. document.write("hello javascript");
4. </script>

Let’s see the example of single-line comment i.e. added after the statement.
1. <script>
2. var a=10;
3. var b=20;
4. var c=a+b;//It adds values of a and b variable
5. document.write(c);//prints sum of 10 and 20
6. </script>

JavaScript Multi line Comment

It can be used to add single as well as multi line comments. So, it is more convenient.

It is represented by forward slash with asterisk then asterisk with forward slash. For
example:

1. /* your code here */

It can be used before, after and middle of the statement.

1. <script>
2. /* It is multi line comment.
3. It will not be displayed */
4. document.write("example of javascript multiline comment");
5. </script>

JavaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )

sign.

2. After first letter we can use digits (0 to 9), for example value1.

3. JavaScript variables are case sensitive, for example x and X are different
variables.
Correct JavaScript variables
1. var x = 10;
2. var _value="sonoo";

Incorrect JavaScript variables

1. var 123=30;
2. var *aa=320;

Example of JavaScript variable

Let’s see a simple example of JavaScript variable.

1. <script>
2. var x = 10;
3. var y = 20;
4. var z=x+y;
5. document.write(z);
6. </script>

Output of the above example

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within
the function or block only. For example:

1. <script>
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>

Or,

1. <script>
2. If(10<13){
3. var y=20;//JavaScript local variable
4. }
5. </script>

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e. declared
outside the function or declared with window object is known as global variable. For
example:

1. <script>
2. var data=200;//gloabal variable
3. function a(){
4. document.writeln(data);
5. }
6. function b(){
7. document.writeln(data);
8. }
9. a();//calling JavaScript function
10. b();
11. </script>

JavaScript Global Variable

A JavaScript global variable is declared outside the function or declared with
window object. It can be accessed from any function.

Let’s see the simple example of global variable in JavaScript.

1. <script>
2. var value=50;//global variable
3. function a(){
4. alert(value);
5. }
6. function b(){
7. alert(value);
8. }
9. </script>
Declaring JavaScript global variable within function
To declare JavaScript global variables inside function, you need to use window
object. For example:

1. window.value=90;

Now it can be declared inside any function and can be accessed from any function. For
example:

1. function m(){
2. window.value=100;//declaring global variable by window object
3. }
4. function n(){
5. alert(window.value);//accessing global variable from other function
6. }

Internals of global variable in JavaScript

When you declare a variable outside the function, it is added in the window object
internally. You can access it through window object also. For example:

1. var value=50;
2. function a(){
3. alert(window.value);//accessing global variable
4. }

Javascript Data Types

JavaScript provides different data types to hold different types of values. There are
two types of data types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of the
variable because it is dynamically used by JavaScript engine. You need to use var here
to specify the data type. It can hold any type of values such as numbers, strings etc.
For example:

1. var a=40;//holding number

2. var b="Rahul";//holding string

JavaScript primitive data types

There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

JavaScript non-primitive data types

The non-primitive data types are as follows:

Data Type Description

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

We will have great discussion on each data type later.

JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands.
For example:

1. var sum=10+20;

Here, + is the arithmetic operator and = is the assignment operator.

There are following types of operators in JavaScript.

1. Arithmetic Operators

2. Comparison (Relational) Operators

3. Bitwise Operators

4. Logical Operators

5. Assignment Operators

6. Special Operators

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on the operands. The
following operators are known as JavaScript arithmetic operators.

Operator Description Example

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

JavaScript Comparison Operators

The JavaScript comparison operator compares the two operands. The comparison
operators are as follows:

Operator Description Example

== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators

The bitwise operators perform bitwise operations on operands. The bitwise operators
are as follows:

Operator Description Example

& Bitwise AND (10==20 & 20==33) =

false

| Bitwise OR (10==20 | 20==33) = false

^ Bitwise XOR (10==20 ^ 20==33) =

false

~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

>>> Bitwise Right Shift with Zero (10>>>2) = 2

JavaScript Logical Operators

The following operators are known as JavaScript logical operators.
Operator Description Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

JavaScript Assignment Operators

The following operators are known as JavaScript assignment operators.

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

= Multiply and assign var a=10; a=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

JavaScript Special Operators

The following operators are known as JavaScript special operators.

Operator Description

(?:) Conditional Operator returns value based on the condition. It is like if-
else.

, Comma Operator allows multiple expressions to be evaluated as single

statement.
delete Delete Operator deletes a property from the object.

in In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

new creates an instance (object)

typeof checks the type of object.

void it discards the expression's return value.

yield checks what is returned in a generator by the generator's iterator.

JavaScript If-else
The JavaScript if-else statement is used to execute the code whether condition is
true or false. There are three forms of if statement in JavaScript.

1. If Statement

2. If else statement

3. if else if statement

JavaScript If statement
It evaluates the content only if expression is true. The signature of JavaScript if
statement is given below.

1. if(expression){
2. //content to be evaluated
3. }

Flowchart of JavaScript If statement

Let’s see the simple example of if statement in javascript.

1. <script>
2. var a=20;
3. if(a>10){
4. document.write("value of a is greater than 10");
5. }
6. </script>

Output of the above example

value of a is greater than 10

JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of JavaScript if-
else statement is given below.

1. if(expression){
2. //content to be evaluated if condition is true
3. }
4. else{
5. //content to be evaluated if condition is false
6. }

Flowchart of JavaScript If...else statement

Let’s see the example of if-else statement in JavaScript to find out the even or odd
number.
1. <script>
2. var a=20;
3. if(a%2==0){
4. document.write("a is even number");
5. }
6. else{
7. document.write("a is odd number");
8. }
9. </script>

Output of the above example

a is even number

JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions. The
signature of JavaScript if else if statement is given below.

1. if(expression1){
2. //content to be evaluated if expression1 is true
3. }
4. else if(expression2){
5. //content to be evaluated if expression2 is true
6. }
7. else if(expression3){
8. //content to be evaluated if expression3 is true
9. }
10. else{
11. //content to be evaluated if no expression is true
12. }

Let’s see the simple example of if else if statement in javascript.

1. <script>
2. var a=20;
3. if(a==10){
4. document.write("a is equal to 10");
5. }
6. else if(a==15){
7. document.write("a is equal to 15");
8. }
9. else if(a==20){
10. document.write("a is equal to 20");
11. }
12. else{
13. document.write("a is not equal to 10, 15 or 20");
14. }
15. </script>

Output of the above example

a is equal to 20

JavaScript Switch
The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in previous page. But
it is convenient than if..else..if because it can be used with numbers, characters etc.

The signature of JavaScript switch statement is given below.

1. switch(expression){
2. case value1:
3. code to be executed;
4. break;
5. case value2:
6. code to be executed;
7. break;
8. ......
9.
10. default:
11. code to be executed if above values are not matched;
12. }

Let’s see the simple example of switch statement in javascript.

1. <script>
2. var grade='B';
3. var result;
4. switch(grade){
5. case 'A':
6. result="A Grade";
7. break;
8. case 'B':
9. result="B Grade";
10. break;
11. case 'C':
12. result="C Grade";
13. break;
14. default:
15. result="No Grade";
16. }
17. document.write(result);
18. </script>

Output of the above example

B Grade

Let’s understand the behaviour of switch statement in JavaScript.

1. <script>
2. var grade='B';
3. var result;
4. switch(grade){
5. case 'A':
6. result+=" A Grade";
7. case 'B':
8. result+=" B Grade";
9. case 'C':
10. result+=" C Grade";
11. default:
12. result+=" No Grade";
13. }
14. document.write(result);
15. </script>

Output of the above example

undefined B Grade C Grade No Grade

JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while
or for-in loops. It makes the code compact. It is mostly used in array.

There are four types of loops in JavaScript.

1. for loop

2. while loop

3. do-while loop

4. for-in loop

1) JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of times. It should
be used if number of iteration is known. The syntax of for loop is given below.

1. for (initialization; condition; increment)

2. {
3. code to be executed
4. }

Let’s see the simple example of for loop in javascript.

1. <script>
2. for (i=1; i<=5; i++)
3. {
4. document.write(i + "<br/>")
5. }
6. </script>
Output:

1
2
3
4
5

2) JavaScript while loop

The JavaScript while loop iterates the elements for the infinite number of times. It
should be used if number of iteration is not known. The syntax of while loop is given
below.

1. while (condition)
2. {
3. code to be executed
4. }

Let’s see the simple example of while loop in javascript.

1. <script>
2. var i=11;
3. while (i<=15)
4. {
5. document.write(i + "<br/>");
6. i++;
7. }
8. </script>

Output:

11
12
13
14
15

3) JavaScript do while loop

The JavaScript do while loop iterates the elements for the infinite number of
times like while loop. But, code is executed at leastonce whether condition is true or
false. The syntax of do while loop is given below.

1. do{
2. code to be executed
3. }while (condition);

Let’s see the simple example of do while loop in javascript.

1. <script>
2. var i=21;
3. do{
4. document.write(i + "<br/>");
5. i++;
6. }while (i<=25);
7. </script>

Output:

21
22
23
24
25

4) JavaScript for in loop

The JavaScript for in loop is used to iterate the properties of an object. We will
discuss about it later.

JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function
many times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

1. Code reusability: We can call a function several times so it save coding.

2. Less coding: It makes our program compact. We don’t need to write many
lines of code each time to perform a common task.
JavaScript Function Syntax
The syntax of declaring function is given below.

1. function functionName([arg1, arg2, ...argN]){

2. //code to be executed
3. }

JavaScript Functions can have 0 or more arguments.

JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has arguments.

1. <script>
2. function msg(){
3. alert("hello! this is message");
4. }
5. </script>
6. <input type="button" onclick="msg()" value="call function"/>

Output of the above example

JavaScript Function Arguments

We can call function by passing arguments. Let’s see the example of function that has
one argument.

1. <script>
2. function getcube(number){
3. alert(number*number*number);
4. }
5. </script>
6. <form>
7. <input type="button" value="click" onclick="getcube(4)"/>
8. </form>

Output of the above example

Function with Return Value
We can call function that returns a value and use it in our program. Let’s see the
example of function that returns value.

1. <script>
2. function getInfo(){
3. return "hello atharva! How r u?";
4. }
5. </script>
6. <script>
7. document.write(getInfo());
8. </script>

Output of the above example

hello atharva! How r u?

JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method).
For example: car, pen, bike, chair, glass, keyboard, monitor etc.

JavaScript is an object-based language. Everything is an object in JavaScript.

JavaScript is template based not class based. Here, we don't create class to get the
object. But, we direct create objects.

Creating Objects in JavaScript

There are 3 ways to create objects.

1. By object literal

2. By creating instance of Object directly (using new keyword)

3. By using an object constructor (using new keyword)

1) JavaScript Object by object literal
The syntax of creating object using object literal is given below:

1. object={property1:value1,property2:value2.....propertyN:valueN}

As you can see, property and value is separated by : (colon).

Let’s see the simple example of creating object in JavaScript.

1. <script>
2. emp={id:102,name:"Shyam Kumar",salary:40000}
3. document.write(emp.id+" "+emp.name+" "+emp.salary);
4. </script>

Output of the above example

102 Shyam Kumar 40000

2) By creating instance of Object

The syntax of creating object directly is given below:

1. var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

1. <script>
2. var emp=new Object();
3. emp.id=101;
4. emp.name="Ravi Malik";
5. emp.salary=50000;
6. document.write(emp.id+" "+emp.name+" "+emp.salary);
7. </script>

Output of the above example

101 Ravi 50000
3) By using an Object constructor
Here, you need to create function with arguments. Each argument value can be
assigned in the current object by using this keyword.

The this keyword refers to the current object.

The example of creating object by object constructor is given below.

1. <script>
2. function emp(id,name,salary){
3. this.id=id;
4. this.name=name;
5. this.salary=salary;
6. }
7. e=new emp(103,"Vimal Jaiswal",30000);
8.
9. document.write(e.id+" "+e.name+" "+e.salary);
10. </script>

Output of the above example

103 Vimal Jaiswal 30000

Defining method in JavaScript Object

We can define method in JavaScript object. But before defining method, we need to
add property in the function with same name as method.

The example of defining method in object is given below.

1. <script>
2. function emp(id,name,salary){
3. this.id=id;
4. this.name=name;
5. this.salary=salary;
6.
7. this.changeSalary=changeSalary;
8. function changeSalary(otherSalary){
9. this.salary=otherSalary;
10. }
11. }
12. e=new emp(103,"Sonoo Jaiswal",30000);
13. document.write(e.id+" "+e.name+" "+e.salary);
14. e.changeSalary(45000);
15. document.write("<br>"+e.id+" "+e.name+" "+e.salary);
16. </script>

Output of the above example

103 Sonoo Jaiswal 30000
103 Sonoo Jaiswal 45000

JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript

1. By array literal

2. By creating instance of Array directly (using new keyword)

3. By using an Array constructor (using new keyword)

1) JavaScript array literal

The syntax of creating array using array literal is given below:

1. var arrayname=[value1,value2.....valueN];

As you can see, values are contained inside [ ] and separated by , (comma).

Let’s see the simple example of creating and using array in JavaScript.

1. <script>
2. var emp=["Sonoo","Vimal","Ratan"];
3. for (i=0;i<emp.length;i++){
4. document.write(emp[i] + "<br/>");
5. }
6. </script>

The .length property returns the length of an array.

Output of the above example

Sonoo
Vimal
Ratan

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

1. var arrayname=new Array();

Here, new keyword is used to create instance of array.

Let’s see the example of creating array directly.

1. <script>
2. var i;
3. var emp = new Array();
4. emp[0] = "Arun";
5. emp[1] = "Varun";
6. emp[2] = "John";
7.
8. for (i=0;i<emp.length;i++){
9. document.write(emp[i] + "<br>");
10. }
11. </script>

Output of the above example

Arun
Varun
John
3) JavaScript array constructor (new keyword)
Here, you need to create instance of array by passing arguments in constructor so that
we don't have to provide value explicitly.

The example of creating object by array constructor is given below.

1. <script>
2. var emp=new Array("Jai","Vijay","Smith");
3. for (i=0;i<emp.length;i++){
4. document.write(emp[i] + "<br>");
5. }
6. </script>

Output of the above example

Jai
Vijay
Smith

JavaScript String
The JavaScript string is an object that represents a sequence of characters.

There are 2 ways to create string in JavaScript

1. By string literal

2. By string object (using new keyword)

1) By string literal
The string literal is created using double quotes. The syntax of creating string using
string literal is given below:

1. var stringname="string value";

Let’s see the simple example of creating string literal.

1. <script>
2. var str="This is string literal";
3. document.write(str);
4. </script>

Output:

This is string literal

2) By string object (using new keyword)

The syntax of creating string object using new keyword is given below:

1. var stringname=new String("string literal");

Here, new keyword is used to create instance of string.

Let’s see the example of creating string in JavaScript by new keyword.

1. <script>
2. var stringname=new String("hello javascript string");
3. document.write(stringname);
4. </script>

Output:

hello javascript string

JavaScript String Methods

Let's see the list of JavaScript string methods with examples.

o charAt(index)

o concat(str)

o indexOf(str)

o lastIndexOf(str)

o toLowerCase()

o toUpperCase()

o slice(beginIndex, endIndex)
o trim()

1) JavaScript String charAt(index) Method

The JavaScript String charAt() method returns the character at the given index.

1. <script>
2. var str="javascript";
3. document.write(str.charAt(2));
4. </script>

Output:

2) JavaScript String concat(str) Method

The JavaScript String concat(str) method concatenates or joins two strings.

1. <script>
2. var s1="javascript ";
3. var s2="concat example";
4. var s3=s1.concat(s2);
5. document.write(s3);
6. </script>

Output:

javascript concat example

3) JavaScript String indexOf(str) Method

The JavaScript String indexOf(str) method returns the index position of the given
string.

1. <script>
2. var s1="javascript from atharva indexof";
3. var n=s1.indexOf("from");
4. document.write(n);
5. </script>
Output:

4) JavaScript String lastIndexOf(str) Method

The JavaScript String lastIndexOf(str) method returns the last index position of the
given string.

1. <script>
2. var s1="javascript from atharva indexof";
3. var n=s1.lastIndexOf("java");
4. document.write(n);
5. </script>

Output:

5) JavaScript String toLowerCase() Method

The JavaScript String toLowerCase() method returns the given string in lowercase
letters.

1. <script>
2. var s1="JavaScript toLowerCase Example";
3. var s2=s1.toLowerCase();
4. document.write(s2);
5. </script>

Output:

javascript tolowercase example

6) JavaScript String toUpperCase() Method

The JavaScript String toUpperCase() method returns the given string in uppercase
letters.

1. <script>
2. var s1="JavaScript toUpperCase Example";
3. var s2=s1.toUpperCase();
4. document.write(s2);
5. </script>

Output:

JAVASCRIPT TOUPPERCASE EXAMPLE

7) JavaScript String slice(beginIndex, endIndex) Method

The JavaScript String slice(beginIndex, endIndex) method returns the parts of string
from given beginIndex to endIndex. In slice() method, beginIndex is inclusive and
endIndex is exclusive.

1. <script>
2. var s1="abcdefgh";
3. var s2=s1.slice(2,5);
4. document.write(s2);
5. </script>

Output:

cde

8) JavaScript String trim() Method

The JavaScript String trim() method removes leading and trailing whitespaces from
the string.

1. <script>
2. var s1=" javascript trim ";
3. var s2=s1.trim();
4. document.write(s2);
5. </script>

Output:

javascript trim
Browser Object Model
1. Browser Object Model (BOM)

The Browser Object Model (BOM) is used to interact with the browser.

The default object of browser is window means you can call all the functions of window
by specifying window or directly. For example:

1. window.alert("hello atharva");

is same as:

1. alert("hello atharva");

You can use a lot of properties (other objects) defined underneath the window object
like document, history, screen, navigator, location, innerHeight, innerWidth,

Window Object
1. Window Object

2. Properties of Window Object

3. Methods of Window Object

4. Example of Window Object

The window object represents a window in browser. An object of window is created

automatically by the browser.

Window is the object of browser, it is not the object of javascript. The javascript
objects are string, array, date etc.

Note: if html document contains frame or iframe, browser creates additional window
objects for each frame.

Methods of window object

The important methods of window object are as follows:

Method Description
alert() displays the alert box containing message with ok button.

confirm() displays the confirm dialog box containing message with ok and
cancel button.

prompt() displays a dialog box to get input from the user.

open() opens the new window.

close() closes the current window.

setTimeout() performs action after specified time like calling function, evaluating
expressions etc.

Example of alert() in javascript

It displays alert dialog box. It has message and ok button.

1. <script type="text/javascript">
2. function msg(){
3. alert("Hello Alert Box");
4. }
5. </script>
6. <input type="button" value="click" onclick="msg()"/>

Output of the above example

Example of confirm() in javascript

It displays the confirm dialog box. It has message with ok and cancel buttons.

1. <script type="text/javascript">
2. function msg(){
3. var v= confirm("Are u sure?");
4. if(v==true){
5. alert("ok");
6. }
7. else{
8. alert("cancel");
9. }
10.
11. }
12. </script>
13.
14. <input type="button" value="delete record" onclick="msg()"/>

Output of the above example

Example of prompt() in javascript

It displays prompt dialog box for input. It has message and textfield.

1. <script type="text/javascript">
2. function msg(){
3. var v= prompt("Who are you?");
4. alert("I am "+v);
5.
6. }
7. </script>
8.
9. <input type="button" value="click" onclick="msg()"/>

Output of the above example

Example of open() in javascript

It displays the content in a new window.

1. <script type="text/javascript">
2. function msg(){
3. open("http://www.atharva.com");
4. }
5. </script>
6. <input type="button" value="atharva" onclick="msg()"/>

Output of the above example

Example of setTimeout() in javascript

It performs its task after the given milliseconds.

1. <script type="text/javascript">
2. function msg(){
3. setTimeout(
4. function(){
5. alert("Welcome to Atharva after 2 seconds")
6. },2000);
7.
8. }
9. </script>
10.
11. <input type="button" value="click" onclick="msg()"/>

Output of the above example

JavaScript History Object

1. History Object

2. Properties of History Object

3. Methods of History Object

4. Example of History Object

The JavaScript history object represents an array of URLs visited by the user. By
using this object, you can load previous, forward or any particular page.

The history object is the window property, so it can be accessed by:

1. window.history

Or,

1. history

Property of JavaScript history object

There are only 1 property of history object.

No. Property Description

1 length returns the length of the history URLs.

Methods of JavaScript history object

There are only 3 methods of history object.

No. Method Description

1 forward() loads the next page.

2 back() loads the previous page.

3 go() loads the given page number.

Example of history object

Let’s see the different usage of history object.

1. history.back();//for previous page

2. history.forward();//for next page
3. history.go(2);//for next 2nd page
4. history.go(-2);//for previous 2nd page

JavaScript Navigator Object

1. Navigator Object
2. Properties of Navigator Object

3. Methods of Navigator Object

4. Example of Navigator Object

The JavaScript navigator object is used for browser detection. It can be used to get
browser information such as appName, appCodeName, userAgent etc.

The navigator object is the window property, so it can be accessed by:

1. window.navigator

Or,

1. navigator

Property of JavaScript navigator object

There are many properties of navigator object that returns information of the browser.

No. Property Description

1 appName returns the name

2 appVersion returns the version

3 appCodeName returns the code name

4 cookieEnabled returns true if cookie is enabled otherwise false

5 userAgent returns the user agent

6 language returns the language. It is supported in Netscape and

Firefox only.

7 userLanguage returns the user language. It is supported in IE only.

8 plugins returns the plugins. It is supported in Netscape and

Firefox only.

9 systemLanguage returns the system language. It is supported in IE only.

10 mimeTypes[] returns the array of mime type. It is supported in
Netscape and Firefox only.

11 platform returns the platform e.g. Win32.

12 online returns true if browser is online otherwise false.

Methods of JavaScript navigator object

The methods of navigator object are given below.

No. Method Description

1 javaEnabled() checks if java is enabled.

2 taintEnabled() checks if taint is enabled. It is deprecated since

JavaScript 1.2.

Example of navigator object

Let’s see the different usage of history object.

1. <script>
2. document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName);
3. document.writeln("<br/>navigator.appName: "+navigator.appName);
4. document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);
5. document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled);
6. document.writeln("<br/>navigator.language: "+navigator.language);
7. document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);
8. document.writeln("<br/>navigator.platform: "+navigator.platform);
9. document.writeln("<br/>navigator.onLine: "+navigator.onLine);
10. </script>

navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36
navigator.cookieEnabled: true
navigator.language: en-US
navigator.userAgent: Mozilla/5.0 (Windows NT 6.2; WOW64)
AppleWebKit/537.36
(KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36
navigator.platform: Win32
navigator.onLine: true

JavaScript Screen Object

1. Screen Object

2. Properties of Screen Object

3. Methods of Screen Object

4. Example of Screen Object

The JavaScript screen object holds information of browser screen. It can be used to
display screen width, height, colorDepth, pixelDepth etc.

The navigator object is the window property, so it can be accessed by:

1. window.screen

Or,

1. screen

Property of JavaScript Screen Object

There are many properties of screen object that returns information of the browser.

No. Property Description

1 width returns the width of the screen

2 height returns the height of the screen

3 availWidth returns the available width

4 availHeight returns the available height

5 colorDepth returns the color depth

6 pixelDepth returns the pixel depth.

Example of JavaScript Screen Object

Let’s see the different usage of screen object.

1. <script>
2. document.writeln("<br/>screen.width: "+screen.width);
3. document.writeln("<br/>screen.height: "+screen.height);
4. document.writeln("<br/>screen.availWidth: "+screen.availWidth);
5. document.writeln("<br/>screen.availHeight: "+screen.availHeight);
6. document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);
7. document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);
8. </script>

screen.width: 1366
screen.height: 768
screen.availWidth: 1366
screen.availHeight: 728
screen.colorDepth: 24
screen.pixelDepth: 24

Document Object Model

1. Document Object

2. Properties of document object

3. Methods of document object

4. Example of document object

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is

the root element that represents the html document. It has properties and methods.
By the help of document object, we can add dynamic content to our web page.

As mentioned earlier, it is the object of window. So

1. window.document

Is same as

1. document

According to W3C - "The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to dynamically access and
update the content, structure, and style of a document."
Properties of document object
Let's see the properties of document object that can be accessed and modified by the
document
object.

Methods of document object

We can access and change the contents of document by its methods.

The important methods of document object are as follows:

Method Description

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with
newline character at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name

value.

getElementsByTagName() returns all the elements having the given tag

name.

getElementsByClassName() returns all the elements having the given class

name.

Accessing field value by document object

In this example, we are going to get the value of input text by user. Here, we are
using document.form1.name.value to get the value of name field.

Here, document is the root element that represents the html document.

form1 is the name of the form.

name is the attribute name of the input text.

value is the property, that returns the value of the input text.

Let's see the simple example of document object that prints name with welcome
message.

1. <script type="text/javascript">
2. function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome: "+name);
5. }
6. </script>
7.
8. <form name="form1">
9. Enter Name:<input type="text" name="name"/>
10. <input type="button" onclick="printvalue()" value="print name"/>
11. </form>

Output of the above example

Enter Name:

Javascript - document.getElementById()
method
1. getElementById() method

2. Example of getElementById()

The document.getElementById() method returns the element of specified id.

In the previous page, we have used document.form1.name.value to get the value

of the input value. Instead of this, we can use document.getElementById() method to
get value of the input text. But we need to define id for the input field.

Let's see the simple example of document.getElementById() method that prints cube
of the given number.

1. <script type="text/javascript">
2. function getcube(){
3. var number=document.getElementById("number").value;
4. alert(number*number*number);
5. }
6. </script>
7. <form>
8. Enter No:<input type="text" id="number" name="number"/><br/>
9. <input type="button" value="cube" onclick="getcube()"/>
10. </form>

Output of the above example

Enter No:
Javascript -
document.getElementsByName() method
1. getElementsByName() method

2. Example of getElementsByName()

The document.getElementsByName() method returns all the element of specified

name.

The syntax of the getElementsByName() method is given below:

1. document.getElementsByName("name")

Here, name is required.

Example of document.getElementsByName() method

In this example, we going to count total number of genders. Here, we are using
getElementsByName() method to get all the genders.

1. <script type="text/javascript">
2. function totalelements()
3. {
4. var allgenders=document.getElementsByName("gender");
5. alert("Total Genders:"+allgenders.length);
6. }
7. </script>
8. <form>
9. Male:<input type="radio" name="gender" value="male">
10. Female:<input type="radio" name="gender" value="female">
11.
12. <input type="button" onclick="totalelements()" value="Total Genders">
13. </form>

Output of the above example

Male: Female:
Javascript -
document.getElementsByTagName()
method
1. getElementsByTagName() method

2. Example of getElementsByTagName()

The document.getElementsByTagName() method returns all the element of

specified tag name.

The syntax of the getElementsByTagName() method is given below:

1. document.getElementsByTagName("name")

Here, name is required.

Example of document.getElementsByTagName() method

In this example, we going to count total number of paragraphs used in the document.
To do this, we have called the document.getElementsByTagName("p") method that
returns the total paragraphs.

1. <script type="text/javascript">
2. function countpara(){
3. var totalpara=document.getElementsByTagName("p");
4. alert("total p tags are: "+totalpara.length);
5.
6. }
7. </script>
8. <p>This is a pragraph</p>
9. <p>Here we are going to count total number of paragraphs by getElementByTagNa
me() method.</p>
10. <p>Let's see the simple example</p>
11. <button onclick="countpara()">count paragraph</button>

Output of the above example

This is a pragraph
Here we are going to count total number of paragraphs by getElementByTagName()
method.

Let's see the simple example

count paragraph

Another example of
document.getElementsByTagName() method
In this example, we going to count total number of h2 and h3 tags used in the
document.

1. <script type="text/javascript">
2. function counth2(){
3. var totalh2=document.getElementsByTagName("h2");
4. alert("total h2 tags are: "+totalh2.length);
5. }
6. function counth3(){
7. var totalh3=document.getElementsByTagName("h3");
8. alert("total h3 tags are: "+totalh3.length);
9. }
10. </script>
11. <h2>This is h2 tag</h2>
12. <h2>This is h2 tag</h2>
13. <h3>This is h3 tag</h3>
14. <h3>This is h3 tag</h3>
15. <h3>This is h3 tag</h3>
16. <button onclick="counth2()">count h2</button>
17. <button onclick="counth3()">count h3</button>

Output of the above example

This is h2 tag
This is h2 tag

This is h3 tag

This is h3 tag
This is h3 tag
count h2 count h3

Javascript - innerHTML
1. javascript innerHTML

2. Example of innerHTML property

The innerHTML property can be used to write the dynamic html on the html
document.

It is used mostly in the web pages to generate the dynamic html such as registration
form, comment form, links etc.

Example of innerHTML property

In this example, we are going to create the html form when user clicks on the button.

In this example, we are dynamically writing the html form inside the div name having
the id mylocation. We are identifing this position by calling the
document.getElementById() method.

1. <script type="text/javascript" >

2. function showcommentform() {
3. var data="Name:<input type='text' name='name'><br>Comment:<br><textare
a rows='5' cols='80'></textarea>
4. <br><input type='submit' value='Post Comment'>";
5. document.getElementById('mylocation').innerHTML=data;
6. }
7. </script>
8. <form name="myForm">
9. <input type="button" value="comment" onclick="showcommentform()">
10. <div id="mylocation"></div>
11. </form>

Output of the above example

Show/Hide Comment Form Example using
innerHTML
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First JS</title>
5. <script>
6. var flag=true;
7. function commentform(){
8. var cform="<form action='Comment'>Enter Name:<br><input type='text' name=
'name'/><br/>
9. Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/
>
10. <textarea rows='5' cols='70'></textarea><br><input type='submit' value='Pos
t Comment'/></form>";
11. if(flag){
12. document.getElementById("mylocation").innerHTML=cform;
13. flag=false;
14. }else{
15. document.getElementById("mylocation").innerHTML="";
16. flag=true;
17. }
18. }
19. </script>
20. </head>
21. <body>
22. <button onclick="commentform()">Comment</button>
23. <div id="mylocation"></div>
24. </body>
25. </html>

Output of the above example

Comment

Javascript - innerText
1. javascript innerText

2. Example of innerText property

The innerText property can be used to write the dynamic text on the html document.
Here, text will not be interpreted as html text but a normal text.

It is used mostly in the web pages to generate the dynamic content such as writing
the validation message, password strength etc.

Javascript innerText Example

In this example, we are going to display the password strength when releases the key
after press.

1. <script type="text/javascript" >

2. function validate() {
3. var msg;
4. if(document.myForm.userPass.value.length>5){
5. msg="good";
6. }
7. else{
8. msg="poor";
9. }
10. document.getElementById('mylocation').innerText=msg;
11. }
12.
13. </script>
14. <form name="myForm">
15. <input type="password" value="" name="userPass" onkeyup="validate()">
16. Strength:<span id="mylocation">no strength</span>
17. </form>

Output of the above example

Strength:no strength

JavaScript Form Validation

It is important to validate the form submitted by the user because it can have
inappropriate values. So validation is must.

The JavaScript provides you the facility the validate the form on the client side so
processing will be fast than server-side validation. So, most of the web developers
prefer JavaScript form validation.

Through JavaScript, we can validate name, password, email, date, mobile number etc
fields.

JavaScript form validation example

In this example, we are going to validate the name and password. The name can’t be
empty and password can’t be less than 6 characters long.

Here, we are validating the form on form submit. The user will not be forwarded to the
next page until given values are correct.

1. <script>
2. function validateform(){
3. var name=document.myform.name.value;
4. var password=document.myform.password.value;
5.
6. if (name==null || name==""){
7. alert("Name can't be blank");
8. return false;
9. }else if(password.length<6){
10. alert("Password must be at least 6 characters long.");
11. return false;
12. }
13. }
14. </script>
15. <body>
16. <form name="myform" method="post" action="abc.jsp" onsubmit="return validatef
orm()" >
17. Name: <input type="text" name="name"><br/>
18. Password: <input type="password" name="password"><br/>
19. <input type="submit" value="register">
20. </form>
JavaScript Retype Password Validation
1. <script type="text/javascript">
2. function matchpass(){
3. var firstpassword=document.f1.password.value;
4. var secondpassword=document.f1.password2.value;
5.
6. if(firstpassword==secondpassword){
7. return true;
8. }
9. else{
10. alert("password must be same!");
11. return false;
12. }
13. }
14. </script>
15.
16. <form name="f1" action="register.jsp" onsubmit="return matchpass()">
17. Password:<input type="password" name="password" /><br/>
18. Re-enter Password:<input type="password" name="password2"/><br/>
19. <input type="submit">
20. </form>

JavaScript Number Validation

Let's validate the textfield for numeric value only. Here, we are using isNaN() function.

1. <script>
2. function validate(){
3. var num=document.myform.num.value;
4. if (isNaN(num)){
5. document.getElementById("numloc").innerHTML="Enter Numeric value only";
6. return false;
7. }else{
8. return true;
9. }
10. }
11. </script>
12. <form name="myform" onsubmit="return validate()" >
13. Number: <input type="text" name="num"><span id="numloc"></span><br/>

14. <input type="submit" value="submit">

15. </form>

JavaScript validation with image

Let’s see an interactive JavaScript form validation example that displays correct and
incorrect image if input is correct or incorrect.

1. <script>
2. function validate(){
3. var name=document.f1.name.value;
4. var password=document.f1.password.value;
5. var status=false;
6.
7. if(name.length<1){
8. document.getElementById("nameloc").innerHTML=
9. " <img src='unchecked.gif'/> Please enter your name";
10. status=false;
11. }else{
12. document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
13. status=true;
14. }
15. if(password.length<6){
16. document.getElementById("passwordloc").innerHTML=
17. " <img src='unchecked.gif'/> Password must be at least 6 char long";
18. status=false;
19. }else{
20. document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>";
21. }
22. return status;
23. }
24. </script>
25.
26. <form name="f1" action="#" onsubmit="return validate()">
27. <table>
28. <tr><td>Enter Name:</td><td><input type="text" name="name"/>
29. <span id="nameloc"></span></td></tr>
30. <tr><td>Enter Password:</td><td><input type="password" name="password"
/>
31. <span id="passwordloc"></span></td></tr>
32. <tr><td colspan="2"><input type="submit" value="register"/></td></tr>
33. </table>
34. </form>

Output:

Enter Name:

Enter Password:
register

JavaScript email validation

We can validate the email by the help of JavaScript.

There are many criteria that need to be follow to validate the email id such as:

o email id must contain the @ and . character

o There must be at least one character before and after the @.

o There must be at least two characters after . (dot).

Let's see the simple example to validate the email field.

1. <script>
2. function validateemail()
3. {
4. var x=document.myform.email.value;
5. var atposition=x.indexOf("@");
6. var dotposition=x.lastIndexOf(".");
7. if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
8. alert("Please enter a valid e-
mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
9. return false;
10. }
11. }
12. </script>
13. <body>
14. <form name="myform" method="post" action="#" onsubmit="return validateemail
();">
15. Email: <input type="text" name="email"><br/>
16.
17. <input type="submit" value="register">
18. </form>

HTML/DOM events for JavaScript

HTML or DOM events are widely used in JavaScript code. JavaScript code is executed
with HTML/DOM events. So before learning JavaScript, let’s have some idea about
events.

Events Description

onclick occurs when element is clicked.

ondblclick occurs when element is double-clicked.

onfocus occurs when an element gets focus such as button, input,

textarea etc.

onblur occurs when form looses the focus from an element.

onsubmit occurs when form is submitted.

onmouseover occurs when mouse is moved over an element.

onmouseout occurs when mouse is moved out from an element (after

moved over).
onmousedown occurs when mouse button is pressed over an element.

onmouseup occurs when mouse is released from an element (after mouse

is pressed).

onload occurs when document, object or frameset is loaded.

onunload occurs when body or frameset is unloaded.

onscroll occurs when document is scrolled.

onresized occurs when document is resized.

onreset occurs when form is reset.

onkeydown occurs when key is being pressed.

onkeypress occurs when user presses the key.

onkeyup occurs when key is released.

The C# Player's Guide - 5th Edition - 5.0.0
83% (18)
The C# Player's Guide - 5th Edition - 5.0.0
497 pages
Corce
70% (46)
Corce
206 pages
Introduction To Computer Theory by Cohen Solutions Manual
80% (5)
Introduction To Computer Theory by Cohen Solutions Manual
198 pages
Ap Computer Science Principles Practice Exam and Notes 2021
100% (6)
Ap Computer Science Principles Practice Exam and Notes 2021
108 pages
The Ethical Slut PDF
55% (69)
The Ethical Slut PDF
298 pages
Hacking The Art of Exploitation 2nd Edition Jon Erickson
100% (20)
Hacking The Art of Exploitation 2nd Edition Jon Erickson
492 pages
Typography For Lawyers
20% (5)
Typography For Lawyers
9 pages
PrepTest 83 - Print and Take Test - 7sage Lsat
100% (3)
PrepTest 83 - Print and Take Test - 7sage Lsat
46 pages
50 Phone Hacks DR - Brad
58% (19)
50 Phone Hacks DR - Brad
29 pages
One-Page Mythic GME
100% (8)
One-Page Mythic GME
11 pages
C# Cheat Sheet
100% (6)
C# Cheat Sheet
12 pages
Learn Python in A Day
100% (14)
Learn Python in A Day
141 pages
All Codes Mobile
100% (1)
All Codes Mobile
53 pages
The Difference Between A SWIFT ACK and SWIFT NACK
67% (3)
The Difference Between A SWIFT ACK and SWIFT NACK
2 pages
Unit-5(Bootstrap)
No ratings yet
Unit-5(Bootstrap)
21 pages
Bootstrap Notes
No ratings yet
Bootstrap Notes
146 pages
Bootstrap Tutorial
No ratings yet
Bootstrap Tutorial
46 pages
BootStrap 5
No ratings yet
BootStrap 5
148 pages
Lecture 2
No ratings yet
Lecture 2
9 pages
Web Lecture5
No ratings yet
Web Lecture5
29 pages
Bootstrap 3 Tutorial: Printed by
No ratings yet
Bootstrap 3 Tutorial: Printed by
33 pages
Section 2_Unit 1 Bootstrap
No ratings yet
Section 2_Unit 1 Bootstrap
55 pages
bootstrap ppt
No ratings yet
bootstrap ppt
20 pages
Ch5 Bootstrap
No ratings yet
Ch5 Bootstrap
31 pages
Chapter 4 Bootstrap
No ratings yet
Chapter 4 Bootstrap
37 pages
Bootstrap PDF
No ratings yet
Bootstrap PDF
32 pages
Responsive Web Design
No ratings yet
Responsive Web Design
22 pages
Bootstrap
No ratings yet
Bootstrap
32 pages
What Is Bootstrap?
No ratings yet
What Is Bootstrap?
166 pages
UNIT3newpptx 2023 10 13 10 47 03
No ratings yet
UNIT3newpptx 2023 10 13 10 47 03
190 pages
bootsstrap
No ratings yet
bootsstrap
3 pages
Bootstrap
No ratings yet
Bootstrap
77 pages
INTRODUCTION-TO-BOOTSRAP
No ratings yet
INTRODUCTION-TO-BOOTSRAP
90 pages
Bootstrap Quick Guide
No ratings yet
Bootstrap Quick Guide
27 pages
WEEK 8 Introduction To Bootstrap 1577604054
No ratings yet
WEEK 8 Introduction To Bootstrap 1577604054
90 pages
Intro To Bootstrap
No ratings yet
Intro To Bootstrap
27 pages
Bootstrap_ Comprehensive Guide
No ratings yet
Bootstrap_ Comprehensive Guide
8 pages
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
No ratings yet
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
28 pages
CDBBB 4521711186739687
No ratings yet
CDBBB 4521711186739687
52 pages
Responsive Web Design
No ratings yet
Responsive Web Design
29 pages
ICT Lab Session 5
No ratings yet
ICT Lab Session 5
8 pages
Responsive Web Design Using Bootstrap
No ratings yet
Responsive Web Design Using Bootstrap
23 pages
Introduction To BOOTSTRAP
0% (1)
Introduction To BOOTSTRAP
48 pages
Web Technologies Week 05-06 (Bootstrap and JavaScript)
No ratings yet
Web Technologies Week 05-06 (Bootstrap and JavaScript)
47 pages
Unit - 2_2 Bootstrap
No ratings yet
Unit - 2_2 Bootstrap
24 pages
T7 Bootstrap
No ratings yet
T7 Bootstrap
20 pages
Chapter 5 Bootstrap
No ratings yet
Chapter 5 Bootstrap
31 pages
Bootstrap
No ratings yet
Bootstrap
15 pages
Module 4 Notes
No ratings yet
Module 4 Notes
41 pages
Introduction to Bootstrap (2)
No ratings yet
Introduction to Bootstrap (2)
21 pages
Bootstrap Manual
No ratings yet
Bootstrap Manual
32 pages
04 Bootstrap Responsive Design 2023
No ratings yet
04 Bootstrap Responsive Design 2023
49 pages
Getting Started With Bootstrap
No ratings yet
Getting Started With Bootstrap
8 pages
GMR Institute of Technology Rajam, Ap: Class Course Coursecode Preparedby Lecturetopic
No ratings yet
GMR Institute of Technology Rajam, Ap: Class Course Coursecode Preparedby Lecturetopic
13 pages
9 Responsive Website Development Bootstrap Class Note
No ratings yet
9 Responsive Website Development Bootstrap Class Note
8 pages
Bootstrap-Php Applications
No ratings yet
Bootstrap-Php Applications
32 pages
Bootstrap
No ratings yet
Bootstrap
152 pages
Web Application Development: Bootstrap
No ratings yet
Web Application Development: Bootstrap
17 pages
Exercise: Getting Started With Bootstrap: Index - HTML
No ratings yet
Exercise: Getting Started With Bootstrap: Index - HTML
3 pages
05 Bootstrap
No ratings yet
05 Bootstrap
30 pages
38 42 Bootstrap
No ratings yet
38 42 Bootstrap
78 pages
Lecture 12
No ratings yet
Lecture 12
27 pages
UNIT 5 Bootstrap
No ratings yet
UNIT 5 Bootstrap
10 pages
Web Development Lesson Nine
No ratings yet
Web Development Lesson Nine
12 pages
Bootstrap: Mark Otto and
No ratings yet
Bootstrap: Mark Otto and
12 pages
Bootstrap
No ratings yet
Bootstrap
4 pages
Unit V
No ratings yet
Unit V
30 pages
Bootstrap
No ratings yet
Bootstrap
17 pages
Bootstrap
No ratings yet
Bootstrap
39 pages
Bootstrap-3 - Cheat-Sheets
No ratings yet
Bootstrap-3 - Cheat-Sheets
14 pages
CSS Grid Layout: 5 Practical Projects
From Everand
CSS Grid Layout: 5 Practical Projects
Craig Buckler
No ratings yet
Your First Week With Bootstrap
From Everand
Your First Week With Bootstrap
Syed Fazle Rahman
No ratings yet
Html5: QuickStudy Laminated Reference Guide
From Everand
Html5: QuickStudy Laminated Reference Guide
Robin Nixon
No ratings yet
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
From Everand
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
Stephen J Link
5/5 (3)
AI Tools and Prompts
100% (4)
AI Tools and Prompts
94 pages
Introduction To Computer Science
100% (6)
Introduction To Computer Science
202 pages
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
100% (1)
Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153
247 pages
Linux Cheat Sheet
No ratings yet
Linux Cheat Sheet
4 pages
Eat That Frog
100% (10)
Eat That Frog
124 pages
NWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. Links
No ratings yet
NWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. Links
47 pages
Simple Sabotage Field Manual
100% (2)
Simple Sabotage Field Manual
16 pages
Learn To Code Getting Started Guide
100% (4)
Learn To Code Getting Started Guide
23 pages
Structured and Unstructured Maintenance With Example
0% (1)
Structured and Unstructured Maintenance With Example
9 pages
The JavaScript Beginner's Handbook
90% (10)
The JavaScript Beginner's Handbook
76 pages
Learn To Code HTML and CSS Develop Style Websites PDF
100% (2)
Learn To Code HTML and CSS Develop Style Websites PDF
595 pages
Credit Card Processing System
No ratings yet
Credit Card Processing System
18 pages
Do You Speak Java
No ratings yet
Do You Speak Java
186 pages
Python Programming For Beginners - A Crash Course To Learn Python and Other Recommended Coding
83% (6)
Python Programming For Beginners - A Crash Course To Learn Python and Other Recommended Coding
86 pages
LINUX COMMAND LINE An Introduction To Linux Command Line Environment
No ratings yet
LINUX COMMAND LINE An Introduction To Linux Command Line Environment
174 pages
How To Use PATS Module Initialization Function
No ratings yet
How To Use PATS Module Initialization Function
5 pages
Learning Liquid
100% (1)
Learning Liquid
89 pages
Fbiscan
No ratings yet
Fbiscan
78 pages
Latest Log
No ratings yet
Latest Log
48 pages
EG860 User Guide (V200R002C00 - 06) (PDF) - EN
No ratings yet
EG860 User Guide (V200R002C00 - 06) (PDF) - EN
110 pages
KNN MCQs 3
No ratings yet
KNN MCQs 3
14 pages
Zenith’s Cos 101 PDF
No ratings yet
Zenith’s Cos 101 PDF
6 pages
2024-07-29 تكييف
No ratings yet
2024-07-29 تكييف
10 pages
CSE 3124Y (5) : Business Intelligence & Big Data Analytics: Data Warehousing and OLAP
No ratings yet
CSE 3124Y (5) : Business Intelligence & Big Data Analytics: Data Warehousing and OLAP
104 pages
EPP-ICT-MATATAG Lesson Plan LC N1 Day 2
No ratings yet
EPP-ICT-MATATAG Lesson Plan LC N1 Day 2
11 pages
NIFOG Ver 2.0 508 Version FINAL 9-23-2021 (Signed)
No ratings yet
NIFOG Ver 2.0 508 Version FINAL 9-23-2021 (Signed)
192 pages
Copia de Beige and Brown Vintage Scrapbook Literature Lesson Plan Classic Novels Presentation
No ratings yet
Copia de Beige and Brown Vintage Scrapbook Literature Lesson Plan Classic Novels Presentation
28 pages
Torrent Downloaded From
No ratings yet
Torrent Downloaded From
1 page
Download ebooks file Digital Image Enhancement Restoration and Compression Digital Image Processing and Analysis for True Epub Scott E Umbaugh all chapters
100% (2)
Download ebooks file Digital Image Enhancement Restoration and Compression Digital Image Processing and Analysis for True Epub Scott E Umbaugh all chapters
55 pages
Navision Fixed Assets 3.60
No ratings yet
Navision Fixed Assets 3.60
147 pages
Dberr
No ratings yet
Dberr
49 pages
User Manual: Model Qc444
No ratings yet
User Manual: Model Qc444
28 pages
Adbms Notes
No ratings yet
Adbms Notes
18 pages
A Data Locality For Z-Curve Cache Oblivious Matrix Multiplication Algorithms
No ratings yet
A Data Locality For Z-Curve Cache Oblivious Matrix Multiplication Algorithms
5 pages
MS Powerpoint
No ratings yet
MS Powerpoint
1 page
14 Network Address Translation
No ratings yet
14 Network Address Translation
30 pages
Numerical Linear Algebra in Data Mining: Lars Eld en
No ratings yet
Numerical Linear Algebra in Data Mining: Lars Eld en
58 pages
Jurisprudence & Scope of Cyber Law
No ratings yet
Jurisprudence & Scope of Cyber Law
20 pages
State of Local Governance Report 2011
100% (1)
State of Local Governance Report 2011
103 pages
Proposal Wireless PDF
No ratings yet
Proposal Wireless PDF
7 pages
Digital Patterns: Designed by Steve Good
No ratings yet
Digital Patterns: Designed by Steve Good
9 pages
Notes SE Module 3
No ratings yet
Notes SE Module 3
19 pages
Microprocessors 01 - Laboratory - Exercise - 1 (15) - RMZS
No ratings yet
Microprocessors 01 - Laboratory - Exercise - 1 (15) - RMZS
10 pages
Xii Sci It-Practicals Exp1 To 13
No ratings yet
Xii Sci It-Practicals Exp1 To 13
24 pages
LG Compare - LG India
No ratings yet
LG Compare - LG India
5 pages
Llama 4
No ratings yet
Llama 4
5 pages