BS and JS
BS and JS
o Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
o It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others.
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.
o It is very easy to use. Anybody having basic knowledge of HTML and CSS can
use Bootstrap.
CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML
elements style and an advanced grid system.
JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can
easily include them all, or one by one.
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>
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:
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-fluid class provides a full width container, spanning the entire
width of the viewport.
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).
1. container
2. container-fluid
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 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.
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>
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>
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
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>
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>
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:
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.
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.
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>
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>
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>
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>
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>
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>
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>
Class Description
.active It is used to apply the hover color to the table row or table cell
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.
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 Horizontal form
o Inline form
o Always use <form role="form"> (helps improve accessibility for people using
screen readers)
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>
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 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.
Example:
<body>
<div class="container">
<h2>Well Example</h2>
<div class="well">Hi! I am a Basic Well.</div>
</div>
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
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.
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>
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.
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>
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>
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.
o Panel header
o Panel content
o Panel footer
For a panel group, you have to wrap a <div> with class .panel-group around them.
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>
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.
Table:
Class Description
.disabled, you can customize links by using .disabled for unclickable links and .active to in
.active
<!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>
<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>
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.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h2>Active State Pagination: Example</h2>
14. <p>Specify the current active state of the user.</p>
15. <ul class="pagination">
16. <li><a href="#">1</a></li>
17. <li class="active"><a href="#">2</a></li>
18. <li><a href="#">3</a></li>
19. <li><a href="#">4</a></li>
20. <li><a href="#">5</a></li>
21. </ul>
22. </div>
23.
24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
25. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
26.
27. </body>
28. </html>
Add class .disabled to disable the links you don't need more.
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.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h2>Disabled State Pagination Example:</h2>
14. <p>Here, 4 and 5 links are disabled.</p>
15. <ul class="pagination">
16. <li><a href="#">1</a></li>
17. <li><a href="#">2</a></li>
18. <li><a href="#">3</a></li>
19. <li class="disabled"><a href="#">4</a></li>
20. <li><a href="#">5</a></li>
21. </ul>
22. </div>
23.
24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
25. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
26.
27. </body>
28. </html>
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.
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.
9. </head>
10. <body>
11.
12. <div class="container">
13. <h2>Pagination - Sizing</h2>
14. <p>Add class .pagination-lg for larger blocks or .pagination-
sm for smaller blocks:</p>
15. <ul class="pagination pagination-lg">
16. <li><a href="#">1</a></li>
17. <li><a href="#">2</a></li>
18. <li><a href="#">3</a></li>
19. <li><a href="#">4</a></li>
20. <li><a href="#">5</a></li>
21. </ul>
22.
23. <ul class="pagination pagination-sm">
24. <li><a href="#">1</a></li>
25. <li><a href="#">2</a></li>
26. <li><a href="#">3</a></li>
27. <li><a href="#">4</a></li>
28. <li><a href="#">5</a></li>
29. </ul>
30. </div>
31.
32. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><
/script>
33. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
34.
35. </body>
36. </html>
Bootstrap Breadcrumbs
It is another form of pagination. It indicates the current page's location within a
navigational hierarchy.
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>
The classes ".previous" and ".next" is used to align the buttons previous and next
respectively.
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Pager Align Button</h2>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><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 Images
Bootstrap supports for images. There are three classes in Bootstrap that can be used
to apply some simple style to the images.
Classes Uses
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>
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>
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>
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>
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. </head>
9. <body>
10.
<div class="container">
<h2>Responsive Embed</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-
item" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
</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.
14. </body>
15. </html>
Bootstrap Glyphicons
Glyphicons are the icon fonts that are used in web projects. Bootstrap provides 260
Glyphicons from the Glyphicons Halflings set.
o Envelope glyphicon
o Print glyphicon
o Search glyphicon
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. <!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. </head>
9. <body>
10.
11. <div class="container">
12. <h2>Glyphicon Examples</h2>
13. <p>Envelope icon: <span class="glyphicon glyphicon-
envelope"></span></p>
14. <p>Envelope icon as a link:
15. <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
16. </p>
17. <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
18. <p>Search icon on a button:
19. <button type="button" class="btn btn-default">
20. <span class="glyphicon glyphicon-search"></span> Search
21. </button>
22. </p>
23. <p>Search icon on a styled button:
24. <button type="button" class="btn btn-info">
25. <span class="glyphicon glyphicon-search"></span> Search
26. </button>
27. </p>
28. <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
29. <p>Print icon on a styled link button:
30. <a href="#" class="btn btn-success btn-lg">
31. <span class="glyphicon glyphicon-print"></span> Print
32. </a>
33. </p>
34. </div>
35.
36. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
37. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
"></script>
38. </body>
39. </html>
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.
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 class="item">
<img src="images/jokes2.jpg" alt="jokes 2" >
</div>
<div class="item">
<img src="images/jokes3.jpg" alt="jokes 3" >
</div>
</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. <!-- Indicators -->
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. <!-- Wrapper for slides -->
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. <!-- Left and right controls -->
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><!-- corousel end -->
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>
The class .progress within a <div> element is used to create a default progress bar
in bootstrap.
You have to remove the .sr-only class from the progress bar to show a visible
percentage.
<!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>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>
<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>
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
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Colored Progress Bars</h2>
<p>The contextual classes colors the progress bars:</p>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-
valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-
valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-
valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-
valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
</div>
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Striped Progress Bars</h2>
<p>The .progress-bar-striped class adds stripes to the progress bars:</p>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-
striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-
striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-
valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-
striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-
valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-
striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-
valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
</div>
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Animated Progress Bar</h2>
<p>The .active class animates the progress bar:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-
valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</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>
17. </html>
Bootstrap Stacked Progress bar (Multi-colored
progress bar)
You can create stacked progress bar by placing multiple bars into the same <div
class="progress">
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Stacked Progress Bars</h2>
<p>Create a stacked progress bar by placing multiple bars into the same div with clas
s .progress:</p>
<div class="progress">
<div class="progress-bar progress-bar-
success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-
warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-
danger" role="progressbar" style="width:20%">
Danger
</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.
15. </body>
16. </html>
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.
</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>
You have to create a <span> element with class ".badge" inside the list item to
create a badge.
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>List Group With Badges</h2>
<ul class="list-group">
<li class="list-group-item"><span class="badge">12</span> New</li>
<li class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</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>
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>List Group With Linked Items</h2>
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third 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>
Test it Now
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Active Item in a List Group</h2>
<div class="list-group">
<a href="#" class="list-group-item active">First item (This is active item)</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third 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>
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>List Group With a Disabled Item</h2>
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third 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>
o .list-group-item-success
o .list-group-item-info
o .list-group-item-warning
o .list-group-item-danger
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>List Group With Contextual Classes</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
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:
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min
.js"></script>
</body>
</html>
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>
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>Here, CSS is disable.</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 class="disabled"><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 Collapse
Bootstrap collapse is used when you want to hide and show large amount of content.
<!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/bo
otstrap.min.css">
</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>
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 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.
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">.
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>
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>
If you want the tabs to fade in and out when clicking on them, add the .fade
class to .tab-pane .
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">.
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>
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>
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>
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">
<h2>Dynamic Pills</h2>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
<li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
</ul>
<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>
You can create a standard navigation bar at the top of the page with with <nav
class="navbar navbar-default">.
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>
<body>
<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>
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><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>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>
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>
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 Checkbox
Checkbox facilitates you to select any number of options from a list of present options.
<!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>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:
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Inline checkbox</h2>
<p>The following checkboxes appear in the same line :</p>
<form role="form">
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Option 2
</label>
</form>
</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>
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.
9. </head>
10. <body>
<div class="container">
<h2>Input type: Radio buttons</h2>
<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:
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Inline radio buttons</h2>
<p>The following radio boxes appear in the same line:</p>
<form role="form">
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
</form>
</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 Modals
The bootstrap modal plugin is a dialog box / popup window that is displayed on top of
the current page.
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-
target="#myModal">Open Modal</button>
</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>
The size class is added to the <div> element with class .modal-dialog.
Small Modal:
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Small Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-
target="#myModal">Open Small Modal</button>
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.
9. </head>
10. <body>
11.
<div class="container">
<h2>Large Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-
target="#myModal">Open Large Modal</button>
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.
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. </head>
11. <body>
12.
13. <div class="container">
14. <h3>Popover Example</h3>
15. <a href="#" data-toggle="popover" title="Popover Header" data-
content="Some content inside the popover">Toggle popover</a>
16. </div>
17.
18. <script>
19. $(document).ready(function(){
20. $('[data-toggle="popover"]').popover();
21. });
22. </script>
23.
24. </body>
25. </html>
Use the data-placement attribute to set the position of the popover on top, bottom,
left or the right side of the element.
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. </head>
11. <body>
12.
13. <div class="container">
14. <h3>Popover Example</h3>
15. <ul class="list-inline">
16. <li><a href="#" title="Header" data-toggle="popover" data-
placement="top" data-content="Content">Top</a></li>
17. <li><a href="#" title="Header" data-toggle="popover" data-
placement="bottom" data-content="Content">Bottom</a></li>
18. <li><a href="#" title="Header" data-toggle="popover" data-
placement="left" data-content="Content">Left</a></li>
19. <li><a href="#" title="Header" data-toggle="popover" data-
placement="right" data-content="Content">Right</a></li>
20. </ul>
21. </div>
22.
23. <script>
24. $(document).ready(function(){
25. $('[data-toggle="popover"]').popover();
26. });
27. </script>
28.
29. </body>
30. </html>
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. </head>
11. <body>
12.
13. <div class="container">
14. <h3>Popover Example</h3>
15. <a href="#" title="Dismissible popover" data-toggle="popover" data-
trigger="focus" data-
content="Click anywhere in the document to close this popover">Click me</a>
16. </div>
17.
18. <script>
19. $(document).ready(function(){
20. $('[data-toggle="popover"]').popover();
21. });
22. </script>
23.
24. </body>
25. </html>
Bootstrap Scrollspy
The Bootstrap Scrollspy plugin is used to automatically update links in a navigation list
based on scroll position.
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.
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.
o Client-side validation
o Displaying popup windows and dialog boxes (like alert dialog box, confirm
dialog box and prompt dialog box)
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.
1. <script type="text/javascript">
2. document.write("JavaScript is a simple language for atharva learners");
3. </script>
The text/javascript is the content type that provides information to the browser
about the data.
1. <script type="text/javascript">
2. alert("Hello Atharva");
3. </script>
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>
It provides code re usability because single JavaScript file can be used in several
html pages.
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.
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.
1. Single-line Comment
2. Multi-line Comment
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>
It is represented by forward slash with asterisk then asterisk with forward slash. For
example:
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).
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";
1. <script>
2. var x = 10;
3. var y = 20;
4. var z=x+y;
5. document.write(z);
6. </script>
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>
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>
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. }
1. var value=50;
2. function a(){
3. alert(window.value);//accessing global variable
4. }
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:
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands.
For example:
1. var sum=10+20;
1. Arithmetic Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
/ Division 20/10 = 2
= Assign 10+10 = 20
Operator Description
(?:) Conditional Operator returns value based on the condition. It is like if-
else.
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. }
1. <script>
2. var a=20;
3. if(a>10){
4. document.write("value of a is greater than 10");
5. }
6. </script>
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. }
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>
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. }
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>
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.
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. }
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>
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.
1. for loop
2. while loop
3. do-while loop
4. for-in loop
1. <script>
2. for (i=1; i<=5; i++)
3. {
4. document.write(i + "<br/>")
5. }
6. </script>
Output:
1
2
3
4
5
1. while (condition)
2. {
3. code to be executed
4. }
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
1. do{
2. code to be executed
3. }while (condition);
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
JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function
many times to reuse the code.
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. <script>
2. function msg(){
3. alert("hello! this is message");
4. }
5. </script>
6. <input type="button" onclick="msg()" value="call function"/>
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>
1. <script>
2. function getInfo(){
3. return "hello atharva! How r u?";
4. }
5. </script>
6. <script>
7. document.write(getInfo());
8. </script>
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 template based not class based. Here, we don't create class to get the
object. But, we direct create objects.
1. By object literal
1. object={property1:value1,property2:value2.....propertyN:valueN}
1. <script>
2. emp={id:102,name:"Shyam Kumar",salary:40000}
3. document.write(emp.id+" "+emp.name+" "+emp.salary);
4. </script>
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>
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>
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>
JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.
1. By array literal
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>
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>
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>
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
1. By string literal
1) By string literal
The string literal is created using double quotes. The syntax of creating string using
string literal is given below:
1. <script>
2. var str="This is string literal";
3. document.write(str);
4. </script>
Output:
1. <script>
2. var stringname=new String("hello javascript string");
3. document.write(stringname);
4. </script>
Output:
o charAt(index)
o concat(str)
o indexOf(str)
o lastIndexOf(str)
o toLowerCase()
o toUpperCase()
o slice(beginIndex, endIndex)
o trim()
1. <script>
2. var str="javascript";
3. document.write(str.charAt(2));
4. </script>
Output:
1. <script>
2. var s1="javascript ";
3. var s2="concat example";
4. var s3=s1.concat(s2);
5. document.write(s3);
6. </script>
Output:
1. <script>
2. var s1="javascript from atharva indexof";
3. var n=s1.indexOf("from");
4. document.write(n);
5. </script>
Output:
11
1. <script>
2. var s1="javascript from atharva indexof";
3. var n=s1.lastIndexOf("java");
4. document.write(n);
5. </script>
Output:
16
1. <script>
2. var s1="JavaScript toLowerCase Example";
3. var s2=s1.toLowerCase();
4. document.write(s2);
5. </script>
Output:
1. <script>
2. var s1="JavaScript toUpperCase Example";
3. var s2=s1.toUpperCase();
4. document.write(s2);
5. </script>
Output:
1. <script>
2. var s1="abcdefgh";
3. var s2=s1.slice(2,5);
4. document.write(s2);
5. </script>
Output:
cde
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
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.
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.
setTimeout() performs action after specified time like calling function, evaluating
expressions etc.
1. <script type="text/javascript">
2. function msg(){
3. alert("Hello Alert Box");
4. }
5. </script>
6. <input type="button" value="click" onclick="msg()"/>
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()"/>
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()"/>
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()"/>
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()"/>
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.
Or,
1. history
The JavaScript navigator object is used for browser detection. It can be used to get
browser information such as appName, appCodeName, userAgent etc.
1. window.navigator
Or,
1. navigator
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
The JavaScript screen object holds information of browser screen. It can be used to
display screen width, height, colorDepth, pixelDepth etc.
1. window.screen
Or,
1. screen
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
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.
Method Description
Here, document is the root element that represents the html document.
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>
Enter Name:
Javascript - document.getElementById()
method
1. getElementById() method
2. Example of getElementById()
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>
Enter No:
Javascript -
document.getElementsByName() method
1. getElementsByName() method
2. Example of getElementsByName()
1. document.getElementsByName("name")
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>
Male: Female:
Javascript -
document.getElementsByTagName()
method
1. getElementsByTagName() method
2. Example of getElementsByTagName()
1. document.getElementsByTagName("name")
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>
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>
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
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.
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.
Javascript - innerText
1. javascript innerText
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.
Strength:no strength
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.
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>
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/>
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
There are many criteria that need to be follow to validate the email id such as:
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>
Events Description