FrontEnd Web Tech Upto Bootstrap Jan 2025 - DONE
Uploaded by
jagadeeshdhangeti17FrontEnd Web Tech Upto Bootstrap Jan 2025 - DONE
Uploaded by
jagadeeshdhangeti17Front-End Web Technologies
[For Any Full Stack Web Developer Course]
BVRAJU DATAPRO COMPUTERS 1
MODULE-1: HTML (Hypertext Markup Language)
Contents
Chapter-1: HTML
Round-1: Basic Tags
1. Introduction to HTML
2. Demonstrates the tags - <html>, <head>, <title>, <body>, <h1>, <h2>, <h6>, <b>, <i>, <br>, <u>
3. Demonstrates the tags - <!--> , <center>, some attributes of <body> tag
4. Demonstrates the attribute – background
5. Demonstrates the tag - <img>
6. Demonstrates the tags - <marquee>
7. Demonstrates the tags - <font>
8. Demonstrates the tags - <ol>, <ul>
9. Demonstrates -  
10. Demonstrates the tags - <pre>
11. Demonstrates the tags - <p>
12. Demonstrates the tags - <hr>, <acronym>
Round-2: Tables
1. Introduction to Tables
2. Demonstrates the tag - <table>
3. Demonstrates the attributes – colspan, rowspan
Round-3: Links/Hyperlinks
1. Introduction to Hyperlinks
2. Demonstrates the 1st type of link
3. Demonstrates the 2nd type of link
4. Demonstrates the 3rd type of link
Round-4: Frames
1. Introduction to HTML Frames
2. Demo on creating HTML Frames
Chapter-2: HTML5
Round-1: <input> tag
1. “color” type
2. “date” type
3. “time” type
4. “email” type
5. “month” type
6. in “file” type “multiple” attribute
7. “number” type
8. “placeholder” attribute
9. “range” type
BVRAJU DATAPRO COMPUTERS 2
10. “required” attribute
Round-2: Miscellaneous topics
1. <video> element
2. <audio> element
BVRAJU DATAPRO COMPUTERS 3
Chapter-1: HTML
Round-1: Basic Tags
Introduction to HTML
What is HTML?
HTML, is the code/script used to create web pages.
It is like a set of instructions that tells a web browser how to display content. Imagine it as the
skeleton of a webpage. It structures everything from text, images, and links to the overall layout,
margins, colors etc.
HTML uses tags (enclosed in angle brackets like <tag>) to define different elements and their
properties. For instance, <h1> tags define a heading, <p> tags create paragraphs, <img> tags display
images, <table> tag displays data in rows and columns, and so on.
When you visit a website, the server sends a HTML page to your browser, then the browser reads the
HTML code/tags and shows you the page based on those instructions.
Some Points:
• No HTML – No Website
• It is the elementary thing for every web page
• 80% of world software uses HTML
• Easiest in the Software field
• Invented by Tim Berners Lee – 1993
• It is a presentation language used to describe the appearance of a web document
• It is a tag based language
Eg: <html> <body> <a>
• It is used to create static web pages
Static web page: Here the user cannot send any data/input to the server and the content is
same/fixed for all.
Dynamic web page: Here the user can send any data/input to the server. Usually
by means of form/ application submission. Dynamic content can be client side - created using
Javascript or server-side - created using Java/PHP/NodeJS/Python etc.
• HTML tags are not case sensitive
• Each tag is to be properly opened & closed
• HTML tags are standardized & looked after by W3C - World Wide Web Consortium
• All browsers support the standard tags, there may be some tags specific to a browser
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
BVRAJU DATAPRO COMPUTERS 4
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
Program1: Demonstrates the tags - <html>, <head>, <title>, <body>, <h1>, <h2>, <h6>, <b>, <i>, <br>,
<u>
<html>
<head>
<title> 1st program </title>
</head>
<body>
<h1> Hello, how r u? </h1>
<h2> This is heading level 2 </h2>
<h6> This is heading level 6 </h6>
<b> This is in bold </b> <br/>
<i> This is in italics </i> <br/>
<u> This is underlined </u>
</body>
</html>
Program2: Demonstrates the tags - <!--> , <center>, some attributes of <body> tag
<html>
<head>
<title> 2nd program </title>
</head>
<body bgcolor = “gold” text = “blue” topmargin = “100”>
<!--hexadecimal form :<body bgcolor=”#FFFFFF”> -->
<center> <h2> Microsoft – The software Giant </h2> </center>
</body>
</html>
Program3: Demonstrates the attribute – background
<html>
<head>
<title> 3rd program </title>
BVRAJU DATAPRO COMPUTERS 5
</head>
<body background = “C:\\Documents and Settings\\Administrator\\Desktop\\workshop.jpg”>
</body>
</html>
Note:
<!-- the path can be:
internet URL: the copy the image address
a image in the current working directory: just give the file name
somewhere in our computer: mention the full path -->
Program4: Demonstrates the tag - <img>
<html>
<body>
<img src = “C:\\Documents and Settings\\administrator\\desktop\\workshop.jpg” width =
“300” height =”300”>
</body>
</html>
Program5: Demonstrates the tags - <marquee>
<html>
<body bgcolor = “yellow”>
<marquee bgcolor = “orange” loop = “2”> INDIA </marquee>
<marquee bgcolor = “white” direction = “right”> INDIA </marquee>
<marquee bgcolor = “green” scrolldelay = “500”> INDIA </marquee>
<br/>
<marquee behavior= “alternate”> England </marquee>
<marquee direction = “up” height=”50%” width=”50%”> USA </marquee>
</body>
</html>
Program6: Demonstrates the tags - <font>
<html>
<body bgcolor = “wheat”>
<font color = “red” size = “5”> This font is in red</font> <br/>
BVRAJU DATAPRO COMPUTERS 6
<font color = “red” size = “6” face = “courier new”> This font is in courier new style</font>
<br/>
<font color = “green” size = “6” face = “verdana”> This font is in verdana style</font>
</body>
</html>
Program7: Demonstrates the tags - <ol>, <ul>
<html>
<body>
<font color = “green” size = “5”>
<ol start = “3” type = “a”>
<li>C</li>
<li>DS</li>
<li>C++</li>
<li>JSE</li>
<li>JEE</li>
</ol>
</font>
<br/><br/><br/>
<font color = “red” size = “6”>
<ul type = “square”> <!–square or disc or circle →
<li>Vizag</li>
<li>Tirupathi</li>
<li>Vizianagaram</li>
<li>Srikakulam</li>
<li>Kakinada</li>
<li>Kolkata</li>
<li>Hyderabad</li>
<li>Chennai</li>
</ul>
</font>
</body>
</html>
Program8: Demonstrates -  
<!-- this is a comment , the below script demonstates   →
<html>
BVRAJU DATAPRO COMPUTERS 7
<body bgcolor = “lightgreen”>
word1 word2
</body>
</html>
Program9: Demonstrates the tags - <pre>
<html>
<body bgcolor = “lightgreen”>
<pre>
word1 word2
word3
word4
word5
</pre>
</body>
</html>
Program10: Demonstrates the tags - <p>
<html>
<body bgcolor = “lightgreen”>
This is a paragraph1
<p/>
This is a paragraph2
<p/>
This is a paragraph3
</body>
</html>
Program11: Demonstrates the tags - <hr>, <acronym>
<html>
<body bgcolor = “lightgreen”>
Demo of horizontal line
<hr/>
H<sub>2</sub>0
BVRAJU DATAPRO COMPUTERS 8
X<sup>2</sup>
<p/>
<acronym title=”World Wide Web”>WWW</acronym>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 9
Round-2: Tables
Introduction to Tables
Examples of websites where data is arranged in the form of rows and columns
https://www.indianrail.gov.in/enquiry/TBIS/TrainBetweenImportantStations.html
https://en.wikipedia.org/wiki/2011_Census_of_India
https://www.educationworld.in/educationworld-india-private-universities-rankings/
Program1: Demonstrates the tag - <table>
<html>
<body>
<table border="3" bordercolor="red" cellspacing="0" cellpadding="20" width="100%">
<tr bgcolor="gold">
<th>ENo</th>
<th>EName</th>
<th>Salary</th>
</tr>
<tr>
<td>11</td>
<td>Kalyani</td>
<td>60,000</td>
</tr>
<tr>
<td>12</td>
<td>Yashaswini</td>
<td>70,000</td>
</tr>
<tr>
<td>13</td>
<td>Pallavi</td>
<td>45,000</td>
</tr>
</table>
</body>
</html>
Program2: Demonstrates the attributes – colspan, rowspan
<html>
BVRAJU DATAPRO COMPUTERS 10
<body bgcolor = “#ffeeee”>
<center>
<table border = “2” bordercolor = “red” cellspacing = “0” cellpadding = “5”>
<tr bgcolor = “wheat” >
<th colspan = “8”> Batch Schedule
</tr>
<tr bgcolor = “pink”>
<th rowspan = “4”> <img src = “C:\Documents and Settings\raju\Desktop\leaning.jpg”
width = “100%” height = “100%”>
<th>Course
<th>Start Date
<th>Timing
<th>Duration
<th>Type
<th>Fee
<th>Status
</tr>
<tr>
<td>C++
<td>10th Dec
<td>5pm to 6pm
<td>45Hours
<td>1 Hour/day
<td>1500
<td>Open
</tr>
<tr>
<td>JSE
<td>26th Dec
<td>6pm to 7:30pm
<td>70Hours
<td>1 ½ Hour/day
<td>2850
<td>Close
</tr>
<tr>
<td>C
<td>5th Nov
<td>7:30pm to 8:30pm
BVRAJU DATAPRO COMPUTERS 11
<td>65Hours
<td>1 Hour/day
<td>1750
<td>Open
</tr>
</table>
</center>
</body>
</html>
Note: Use <thead> and <tbody> to group heading rows and data rows eg: to set any common style for
multiple rows in one go.
Note: Try background image for table rows
BVRAJU DATAPRO COMPUTERS 12
Round-3: Links/Hyperlinks
Introduction to Hyperlinks
HTML hyperlinks are elements that allow users to navigate between web pages or different sections
within the same page by clicking on text or images, defined using the <a> tag and specifying the
destination URL with the href attribute.
There are three types of Hyperlinks:
➢ Linking to a different page
➢ Linking to a location on the same page
➢ Linking to a location on a different page
Program1: Demonstrates the 1st type of link
Step1: Create a file page1.html
<html>
<body bgcolor = “silver”>
<h2>
Sachin Tendulkar <br>
Rajnikanth <br>
Amithab Bachchan
</h2>
</body>
</html>
Step2: create another file
<html>
<body bgcolor = “tan”>
<h2>
<h2> <a href="page1.html"> Batches Schedule </a></h2>
<h2> <a href="https://www.gitam.edu/"> GITAM University </a></h2>
<h2> <a href="https://www.andhrauniversity.edu.in/">Andhra University</a> <h2>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/yORzkHSqpJ4">
</iframe>
BVRAJU DATAPRO COMPUTERS 13
<!-- Note: replace watch?v= with embed/ -->
</h2>
</body>
</html>
Program2: Demonstrates the 2nd type of link
<html>
<body bgcolor = “tan”>
<h2>
<a href = “#sachin”> sachin </a> <br>
<a href = “#rajnikanth”> chiru </a> <br>
<a href = “#amithab”> amithab </a> <br>
</h2>
<img src = “C:\Documents and Settings\raju\Desktop\datapro.jpg” height = “700”>
<h3><a name = “sachin” > Sachin Tendulkar </a> </h3>
<img src = “C:\Documents and Settings\raju\Desktop\sachin.jpg”>
<ul>
<li>150+ test matches
<li> 400+ one day matches
<li> 11000 + test runs
<li> 16000 + one day runs
<li> 39 centuries in tests
<li> 42 centuries in one day matches
<li> 89 half centuries in one day matches
<li> highest number of man of the match awards(56) in ODIs
<li> Only player to score a century in all three of his Ranji Trophy,
Duleep Trophy and Irani Trophy debuts at the age of 15
<li> Player of the tournament in 2003 world cup
<li> Wisden cricketer of the year – 1997
</ul>
<h3><a name = “rajnikanth” > Rajnikanth </a> </h3>
<img src = “C:\Documents and Settings\raju\Desktop\rajni.jpg”>
<ul>
<li>Basha
<li>Narasimha
BVRAJU DATAPRO COMPUTERS 14
<li>Arunachalam
<li>Sivaji
<li>Robo
</ul>
<h3><a name = “amithab” > Amithab Bachchan </a> </h3>
<img src = “C:\Documents and Settings\raju\Desktop\amithab.jpg” height = “1000” width = “500”>
<ul>
<li>Don
<li>Namak Halal
<li>Sholay
<li>Black
<li>Toophan
<li>Agnipath
</ul>
</body>
</html>
Program3: Demonstrates the 3rd type of link
Step1: create a file page4.html which contains three references – sachin, chiru and amithab
Step2: create another file
<html>
<body bgcolor = “#eeeeee”>
<h2>
<a href = “page4.html#sachin”> sachin </a> <br>
<a href = “page4.html#rajni”> rajnikanth </a> <br>
<a href = “page4.html#amithab”> amithab </a> <br>
</h2>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 15
Round-4: Frames
Introduction to HTML Frames
They allowed developers to divide a web page into multiple sections, each capable of loading a
separate HTML document.
Note: In modern days, Frames can be replaced with CSS.
For Examples, please refer to:
https://www.w3schools.com/php/
https://www.tutorialspoint.com/java/
http://www.java2s.com/
Program: Demo on creating HTML Frames
Step1: Create a file frames.html (finally execute this file)
<frameset cols = “25%,*” frameborder="0">
<frame name = “f1” noresize=”true” src = “courses.html” >
<frame name = “f2” src = “C:\Documents and Settings\raju\Desktop\jsp life cycle.jpg”>
</frameset>
Step2: Create a file c.html
<html>
<body bgcolor = “lightpink”>
<center> <h2> Dennis Ritchie </h2> </center>
BVRAJU DATAPRO COMPUTERS 16
</body>
</html>
Step3: Create a file cpp.html
<html>
<body bgcolor = “orange”>
<center> <h2> Bjarne Stroustrup </h2> </center>
</body>
</html>
Step4: Create a file java.html
<html>
<body bgcolor = “apple”>
<center> <h2> James Gosling </h2> </center>
</body>
</html>
Step5: Create another file – courses.html
<html>
<body bgcolor = “#abcdef”>
<h2> Courses Offered </h2>
<ul>
<li><a href = “c.html” target = “f2”>C</a>
<li><a href = “cpp.html” target = “f2”>C++</a>
<li><a href = “java.html” target = “f2”>Java</a>
</ul>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 17
Chapter-2: HTML5
Round-1: <input> tag
Program1. “color” type
<html>
<body>
<form action="page1.jsp">
Select your favorite color: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
</body>
</html>
Note: In Google Chrome, Press Ctrl + o to open “file open dialog box” to select a local html file
Program2. “date” type
<form action="page1.jsp">
Birthday: <input type="date" name="bday">
<input type="submit">
</form>
Program3. “time” type
<form action="page1.jsp">
Birthday (date and time): <input type="time" name="bdaytime">
<input type="submit">
</form>
Program4. “email” type
<form action="page1.jsp">
E-mail: <input type="email" name="email">
<input type="submit">
</form>
Program5. “month” type
BVRAJU DATAPRO COMPUTERS 18
<form action="page1.jsp">
Book Publication (month and year): <input type="month" name="bdaymonth">
<input type="submit">
</form>
Program6: in “file” type “multiple” attribute
<html>
<body>
<form action="demo_form.asp">
Select images: <input type="file" name="img" multiple accept="image/png, image/jpeg">
<input type="submit">
</form>
<p>Try selecting more than one file when browsing for files.</p>
<!-- In the File upload box itself it doesn't show anything other than png and jpeg files -->
<!-- for PDFs only: accept = "application/pdf" -->
</body>
</html>
Program7. “number” type
<form action="page1.jsp">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
Program8. “placeholder” attribute
<form action="page1.jsp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
Program9. “range” type
<form action="page1.jsp" method="get">
Points: <input type="range" name="points" min="1" max="20" step="2" value="6">
<input type="submit">
</form>
BVRAJU DATAPRO COMPUTERS 19
Program10. “required” attribute
<form action="page1.jsp">
Enter username: <input type="text" name="usrname" required>
<input type="submit">
</form>
BVRAJU DATAPRO COMPUTERS 20
Round-2: Miscellaneous
Program1. <video> element
<!DOCTYPE html>
<html>
<body>
<video controls="true">
<source src="videoplayback1.mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Program2. <audio> element
<!DOCTYPE html>
<html>
<body>
<audio controls="true">
<source src="pillaa.mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 21
BVRAJU DATAPRO COMPUTERS 22
MODULE-2: CSS (Cascading Style Sheets)
Contents
Chapter-1: CSS
Round-1: Introduction to CSS
1. Introduction to CSS
2. Applying CSS
3. Selectors, Properties, and Values
4. CSS Ex1 - Internal Styles
5. CSS Ex2 - The id selector
6. CSS Ex3 - The class selector
7. text on Image – inline CSS
8. large font size
9. Demo on External Style Sheets
Round-2: Nesting & Grouping
1. Demo on Nesting
2. Demo on Grouping
3. Grouping – Ex2
Round-3: Margins, Padding & Borders
1. Margins & Padding
2. Borders
3. Demo on borders
4. The Box Model
5. Margins and Padding Demo
Round-4: Hover Selector
1. Hover Selector-Ex1
2. Hover Selector – Ex2
BVRAJU DATAPRO COMPUTERS 23
Chapter-1: CSS
Round-1: Introduction to CSS
Introduction to CSS
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
The main advantage of CSS is to maintain consistency of styles for the HTML elements. Also,
maintenance becomes easy because we just need to modify at one place, it would affect all the
relevant HTML elements.
The first CSS specification to become an official W3C Recommendation is CSS level 1, published on 17
December 1996. Håkon Wium Lie and Bert Bos are credited as the original developers.
Applying CSS
There are three ways to apply CSS to HTML: In-line, internal, and external.
• Inline: An inline style may be used to apply a unique style for a single element.
• Internal/Embedded: styles are used for the whole page. Inside the head element, the style tags
surround all the styles for the page.
• External: External styles are used for the whole website. Here we create a separate CSS file and
link it with other .html and jsp pages
Selectors, Properties, and Values
As HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external
style sheets
For each selector there are “properties” inside curly brackets, which simply take the form of words
such as color, font-weight or background-color.
A “value” is given to the property following a “colon” and each property-value pair is separated by a
“semi-colon”
Eg:
body
{
background-color: silver;
font-size: 20px;
color: gold;
}
Program1. CSS Ex1 (Internal Styles)
BVRAJU DATAPRO COMPUTERS 24
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
font-family: sans-serif;
}
p
{
font-family:"Times New Roman";
font-size:20px;
background-color: #ffff00;
}
</style>
</head>
<body>
<h1>This is Heading1</h1>
<p>This is paragraph1</p>
<h1>This is Heading2</h1>
<p>This is paragraph2</p>
</body>
</html>
Program2. CSS Ex2 - The id selector
Note: It is used to specify a style for a single, unique element.
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
BVRAJU DATAPRO COMPUTERS 25
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Program3. CSS Ex3 - The class selector
Note: It is used to specify a style for a group of elements. Unlike the id selector, the class selector is
most often used on several elements.
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
Program4. text on Image – inline CSS
<HTML>
<BODY>
<img src="teddy.jpg">
<p style="position: absolute; top: 20; left: 20">Hello Teddy!</p>
</BODY>
</HTML>
Program5. large font size
<HTML>
<BODY>
BVRAJU DATAPRO COMPUTERS 26
<h2 style="font-size: 200px">India</h2>
</BODY>
</HTML>
Program6. Demo on External Style Sheets
Step1. Create a Style Sheet File – usStyles.css
p
{
font-size: xx-large;
color:blue;
}
h2
{
color: red;
text-align: right;
}
Step2. Create a html file – CSSExample6a.html:
<html>
<head>
<link href="usStyles.css" rel="stylesheet" />
</head>
<body>
<h1>This is 6b</h1>
<p>This is para</p>
<h3>This is h3</h3>
<h2>This is h2</h2>
</body>
</html>
Step3. Create one more html file: CSSExample6b.html:
<html>
<head>
<link href="usStyles.css" rel="stylesheet" />
BVRAJU DATAPRO COMPUTERS 27
</head>
<body>
<h1>This is 6b</h1>
<p>This is para</p>
<h3>This is h3</h3>
<h2>This is h2</h2>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 28
Round-2: Nesting & Grouping
Program1. Demo on Nesting
Nesting: Here we can specify properties to selectors within other selectors.
<html>
<head>
<style>
#top
{
background-color: ghostwhite;
color:green;
}
#top h1
{
color: red;
}
#top #datapro
{
background-color: pink;
}
#top p
{
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
<h3>USA - Florida and Connecticut</h3>
<h4>USA - Texas</h4>
<h4 id="datapro">USA - Dallas</h4>
<h4>USA - Michigan</h4>
</div>
<hr/>
BVRAJU DATAPRO COMPUTERS 29
<div id ="bottom">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
<h3>USA - Florida and Connecticut</h3>
</div>
<h1>The End</h1>
<h4 id= "datapro">Bye</h4>
</body>
</html>
Note: There is a small difference between putting a set of elements inside <div> and applying styles
and without putting them inside <div> and just using same class name for them. If we don’t use <div>
then there would be some gaps between elements eg: <h1> and next <h1> (background would be
<body>’s background color)
Program2. Demo on Grouping
Grouping: You can give the same properties to a number of selectors without having to repeat them.
<html>
<head>
<style>
p, h1, h2
{
color: blue;
text-align: right;
background-color: silver;
}
</style>
</head>
<body>
<p>This is Para</p>
<h1>This is Heading1</h1>
<h2>This is Heading2</h2>
<h3>This is Heading3</h3>
BVRAJU DATAPRO COMPUTERS 30
</body>
</html>
Program3. Grouping – Ex2
<html>
<head>
<style>
#x, #y
{
color: blue;
font-size: x-large;
background-color: aliceblue;
}
</style>
</head>
<body>
<h2>This is Heading1</h1>
<h2 id="x">This is Heading2</h2>
<h2>This is Heading3</h2>
<h2 id="y">This is Heading3</h2>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 31
Round-3: Margins, Padding and Borders
Margins & Padding
Margin and padding are the two most commonly used properties for spacing-out elements. A margin is
the space outside something, whereas padding is the space inside something. The four sides of an
element can also be set individually: margin-top, margin-right, margin-bottom, margin-left, padding-
top, padding-right, padding-bottom and padding-left
Borders
To make a border around an element, all you need is border-style.
The values can be: solid, dotted, dashed, double, groove, ridge, inset and outset.
border-width sets the width of the border, most commonly using pixels as a value. There are also
properties for border-top-width, border-right-width, border-bottom-width and border-left-width.
Finally, border-color sets the color.
Program1. Demo on borders
<html>
<head>
<style>
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
</style>
</head>
<body>
<h2>India</h2>
<h2>Germany</h2>
</body>
</html>
The Box Model
BVRAJU DATAPRO COMPUTERS 32
Margins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box
Model works like this: in the middle you have the content area (let’s say an image), surrounding that
you have the padding, surrounding that you have the border and surrounding that you have the
margin. It can be visually represented like this:
You don’t have to use all of these
Program2. Margins and Padding Demo
<html>
<head>
<style>
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}
</style>
</head>
<body>
<h2>India</h2>
<h2>Germany</h2>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 33
Round-4: Hover Selector
Program1. Hover Selector-Ex1
<html>
<head>
<style>
/* to change the anchor tag link color */
a:link{
color:red;
}
a:hover {
background-color: yellow;
}
h2:hover{
background-color: deeppink;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a> <br/>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<h2>Hello</h2>
<!--Note:
The :hover selector style links on mouse-over
Tip: The :hover selector can be used on all elements, not only on links.-->
</body>
</html>
Program2. Hover Selector – Ex2
<html>
<head>
<style>
h1:hover, h2:hover, a:hover
{
background-color: yellow;
}
</style>
BVRAJU DATAPRO COMPUTERS 34
</head>
<body>
<h1>This is heading level1</h1>
<a href="http://www.gitam.edu">w3schools.com</a>
<h2>This is heading level2</h2>
<h3>This is heading level3</h3>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 35
MODULE-3: Javascript
(Programming Language for the Web Browser)
Prerequisite:
• Any Programming language like C, Python
• OOP like C++, Java, Python
• HTML
Contents
Round-1: Introduction to Javascript
1. What is Javascript
2. When is Javascript used?
3. Other technologies which use Javascript
4. Program: To display an alert box
5. Program: To display current date & time
6. Program: To on/off a light
7. Program: Demo on setInterval()
8. Program: Demo on setTimeout()
Round-2: Form Validation
1. Program: Ex1 on Validation
2. Program: Ex2 on Validation
3. Program: Ex3 on Validation
Round-3: ES6 concepts
1. Program: The let keyword
2. Program: The const keyword Ex1
3. Program: The const keyword Ex2
4. Program: JavaScript Arrow Functions Ex1
5. Program: JavaScript Arrow Functions Ex2 – with parameters
6. Program: JavaScript for/of
7. Program: Default Parameter values
8. Program: Javascript Template Literals
9. Program: Function Rest Parameter
10. Program: Spread Operator-Ex1
11. Program: Spread Operator-Ex2
12. Program: ES6 Collections – Filter
13. Program: ES6 Collections – Maps Ex1
14. Program: ES6 Collections – Maps Ex2 – Iterating using forEach()
15. Program: ES6 Collections – Maps Ex3 – Iterating over Map Keys, Map Values and Map Keys-
Values
16. Program: ES6 Collections – Maps Ex4 – Removing elements, checking presence, accessing a
particular element & Map size
17. Program: ES6 Collections – reduce()
BVRAJU DATAPRO COMPUTERS 36
18. Program: ES6 Collections - Sets
19. Program: De-structuring Assignment
20. Program: Array.find()
21. Program: Array.findIndex()
22. Program: Number type method – isInteger()
23. Program: Global function – isNaN()
Round-4: Object Oriented Programming in Javascript
1. Program: Creating ES6 Classes, constructor, creating instances and invoking methods
2. Program: Demo on setter and getter methods
3. Program: Demo on Static methods
4. Program: Inheritance Ex1
5. Program: Inheritance Ex2
6. Program: Demo1 on Runtime Polymorphism
7. Program: Demo2 on Runtime Polymorphism
Round-5: Javascript accessing HTML DOM
1. Introduction
2. Program: Change the content (the innerHTML) of the <p> element with id="demo"
3. Program: Demo on Changing the Value of an Attribute
4. Program: Demo on Dynamic HTML Content
5. DOM Navigation
BVRAJU DATAPRO COMPUTERS 37
Round-1: Introduction to Javascript
What is Javascript
• Javascript is a programming language for the web.
• JavaScript is programming code that can be inserted into HTML pages.
• JavaScript code can be executed by all modern web browsers.
ECMAScript 6 was the second major revision to JavaScript.
ECMAScript 6 is also known as ES6 and ECMAScript 2015.
ECMA stands for European Computer Manufacturer's Association
It is a JavaScript standard meant to ensure the interoperability of web pages across different web
browsers.
When is Javascript used?
• To notify the user about something on the Web Browser – for example location tracking or to
confirm some action.
• Event Handling like key press, mouse hover, button click etc.
• Showing / Hiding Information based on user’s choice
• One important use is for client-side form validation.
• It can also be used to build out Single Page Applications (SPAs)
• Create animations on the web page
• Providing Download options – like CSV file or Excel file
Examples:
BVRAJU DATAPRO COMPUTERS 38
BVRAJU DATAPRO COMPUTERS 39
Ex3:
BVRAJU DATAPRO COMPUTERS 40
Ex4:
Ex5:
BVRAJU DATAPRO COMPUTERS 41
Other technologies which use Javascript
• jQuery (Javascript library)
• AngularJS (Frontend framework)
• ReactJS (Javascript library)
• NodeJS (Server-Side Javascript)
• ExpressJS (Server-Side Javascript framework)
• MongooseJS (Object Data Modelling library for MongoDB)
• D3.js (For Data Visualization)
• React Native (for creating cross platform Mobile Apps)
• etc
Program: To display an alert box
<html>
<head>
<script >
function myFun()
{
alert("Welcome to JavaScript");
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
BVRAJU DATAPRO COMPUTERS 42
<button onclick="myFun()">Display alert box</button>
</body>
</html>
Output:
Program: To display current date & time
<html>
<head>
<script type="text/javascript">
function displayDate()
{
var element = document.getElementById("cricket");
element.innerHTML= Date();
}
</script>
</head>
<body>
<p id="cricket">Cricket</p>
<button onclick="displayDate()">Display Date</button>
<p id = "tennis">Tennis</p>
<p id = "hockey" >Hockey</p>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 43
Click on the button:
Program: To display date and time on all particular type of elements
<html>
<head>
<script type="text/javascript">
function displayDate()
{
var h2elements = document.getElementsByTagName("h2");
for (var i = 0; i < h2elements.length ; i++)
{
h2elements[i].innerHTML = Date();
}
}
</script>
</head>
<body>
<button onclick="displayDate()">Display Date</button>
<p>This is Para1</p>
<p>This is Para2</p>
<h2>This is Heading1</h2>
<h2>This is Heading2</h2>
BVRAJU DATAPRO COMPUTERS 44
<h3>This is Heading3</h2>
</body>
</html>
Output:
Click on the button:
Program: To on/off a light
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage');
if (element.src.match("bulb_on")) //regular expression
element.src="bulb_off.jpg";
else
BVRAJU DATAPRO COMPUTERS 45
element.src="bulb_on.jpg";
}
</script>
<center>
<img id="myimage" onclick="changeImage()" src="bulb_off.jpg" width="100" height="180">
<p>Click the light bulb to turn on/off the light</p>
</center>
</body>
</html>
Program: Demo on setInterval()
<html>
<body>
<p>Click the button to wait 3 seconds, you get an alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on
forever...</p>
<button onclick="myFun1()">Try it</button>
<script>
function myFun2()
{
alert("Hello");
}
function myFun1()
{
setInterval(myFun2 ,3000);
}
</script>
</body>
</html>
Program: Demo on setTimeout()
Step1.
BVRAJU DATAPRO COMPUTERS 46
Step2. Run the program
Output:
Click on “Try it”, after 3 seconds:
BVRAJU DATAPRO COMPUTERS 47
Round-2: Form Validation
Program: Ex1 on Validation
Step1. Create an html file
<html>
<head>
<script>
function validateForm(uname)
{
if (uname.value == "")
{
alert("Must enter user name");
return false;
}
}
</script>
</head>
<body>
<form action="wishUser.jsp" onsubmit="return validateForm(uname)" >
Enter your name: <input type="text" name="uname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Step2. Now run the html file
Program: Example2 on Validation:
Web User Interface
BVRAJU DATAPRO COMPUTERS 48
Step1. Create form1.html
<html>
<head>
<script language="javascript" src="validation.js">
</script>
<!--
<script type="text/javascript" src="validation.js">
</script> -->
</head>
<body>
<form action="NewServlet" onsubmit="return myValidateForm(username, email, mobile, pwd1,
pwd2)">
<table border="0">
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Email ID:</td>
<td><input type="text" name="email" size="50"></td>
</tr>
<tr>
<td>Mobile:</td>
<td><input type="text" value="+91" size="3" readonly>
<input type="text" name="mobile" size="10" maxlength="10"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pwd1"></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" name="pwd2"></td>
</tr>
</table>
<p/>
<input type="submit" value="Register">
BVRAJU DATAPRO COMPUTERS 49
</form>
</body>
</html>
Step2. Create a javascript file: validation.js
function myCheckEmail(email)
{
var at = "@";
var dot = ".";
if( email.value.indexOf(at) == -1 || email.value.indexOf(at) == 0 || email.value.indexOf(at) ==
email.value.length-1 )
{
alert("Please enter a valid email id");
email.focus();
return false;
}
if( email.value.indexOf(dot) == -1 || email.value.indexOf(dot) == 0 || email.value.indexOf(dot) ==
email.value.length-1 )
{
alert("Please enter a valid email id");
email.focus();
return false;
}
return true;
}
function myCheckMobile(mobile)
{
if( isNaN(mobile.value) || mobile.value.length < 10)
{
alert("not a valid mobile number");
mobile.focus();
return false;
}
return true;
}
function myValidateForm(username, email, mobile , pwd1, pwd2)
{
//username
BVRAJU DATAPRO COMPUTERS 50
if(username.value == "")
{
alert("Please enter user name...");
username.focus();
return false;
}
//email
var x = myCheckEmail(email);
if( x == false)
return false;
//mobile
var y = myCheckMobile(mobile);
if( y == false)
return false;
//pwd1
if( pwd1.value.length < 6)
{
alert("password must be atleast 6 characters long");
pwd1.value = "";
pwd1.focus();
return false;
}
//pwd2
if( pwd1.value != pwd2.value)
{
alert("passwords must match");
pwd2.value = "";
pwd2.focus();
return false;
}
return true;
}
Program: Example3 on validation (internal Javascript code)
Web User Interface
BVRAJU DATAPRO COMPUTERS 51
Step1: Create a HTML form: form1.html
<html>
<head>
<script type="text/javascript">
function myValidateForm(college)
{
for(var i = 0; i< college.length; i++)
{
if(college[i].checked)
return true;
}
alert("please select one option...");
return false;
}
</script>
</head>
<body>
<form action="NewServlet" onsubmit="return myValidateForm(college)">
<h2>Select a College: </h2>
<input type="radio" name="college" value="AU CE"> AU <br>
<input type="radio" name="college" value="GVP COE"> GVP COE <br>
<input type="radio" name="college" value="GITAM"> GITAM <br>
<input type="radio" name="college" value="ANITS"> ANITS <br>
<input type="radio" name="college" value="MVGR"> MVGR <br>
<p/>
<input type="submit" value="submit">
</form>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 52
Round-3: ES6 Concepts
Note: JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) is the newer version of
JavaScript that was introduced in 2015.
ECMAScript standardized by the ECMA (European Computer Manufacturers Association) International
standards organization.
Program: The “let” keyword
ES6 provides a new way of declaring a variable by using the let keyword. The let keyword is similar to
the var keyword, except that the variables it declares are block-scoped
Step1.
Step2. Run the program by issuing the following command
Note: For the following command to work, 1st install Node.js on your computer. Then:
node letEx1.js
After correction:
BVRAJU DATAPRO COMPUTERS 53
Output:
Program: the “const” keyword Ex1
The const statement is used to declare constants in JavaScript
Step1.
Step2. Run the program
BVRAJU DATAPRO COMPUTERS 54
After correction:
Program: The “const” keyword Ex2
Step1.
Step2. Run the program
Output:
Program: JavaScript Arrow Functions Ex1
Step1.
BVRAJU DATAPRO COMPUTERS 55
Step2. Run the program
Program: JavaScript Arrow Functions Ex2 – with parameters
Step1.
Step2. Run the program
BVRAJU DATAPRO COMPUTERS 56
Output:
Program: JavaScript for/of
Note:
The JavaScript for/of statement loops through the values of an iterable objects.
Step1.
Step2. Run the program
Output:
Program: Default Parameter values
Step1.
BVRAJU DATAPRO COMPUTERS 57
Step2. Run the Program
Output:
Program: Javascript Template Literals / Template Strings
Note: Template literals (template strings) allow you to use strings or embedded expressions in the
form of a string. They are enclosed in backticks (``)
Step1.
Old way:
console.log("Hello " + sname + "!, Welcome to " + location + ". Your Monthly Salary is: " + salary );
Note: In old style, we had put so many double quotation marks, and use so many “+” also for
concatenation.
Step2. Run the Program
BVRAJU DATAPRO COMPUTERS 58
Output:
Program: Function Rest Parameter
Note:
The rest parameter (...) allows a function to treat an indefinite number of arguments as an array
Step1.
Step2.
Output:
Program: Spread Operator-Ex1
The spread operator ... is used to expand or spread an iterable or an array.
Step1.
BVRAJU DATAPRO COMPUTERS 59
Step2. Run the Program
Output:
Program: Spread-operator - Ex2
Step1.
Step2. Run the Program
Output
Program: ES6 Collections – Filter
Step1.
BVRAJU DATAPRO COMPUTERS 60
Step2. Run the program
Output:
Program: ES6 Collections – Maps Ex1
Step1.
Step2. Run the Program
Output:
BVRAJU DATAPRO COMPUTERS 61
Program: ES6 Collections – Maps Ex2 – Iterating using forEach()
Step1.
Note: It is used while dealing with collection of elements.
Step2. Run the Program
Output:
Program: ES6 Collections – Maps Ex3 – Iterating over Map Keys, Map Values and Map Keys-Values
Step1.
BVRAJU DATAPRO COMPUTERS 62
Step2. Run the Program
Output:
Program: ES6 Collections – Maps Ex4 – Removing elements, checking presence, accessing a particular
element & Map size
Step1.
BVRAJU DATAPRO COMPUTERS 63
Step2. Run the Program
Output:
Program: ES6 Collections – reduce()
Step1.
BVRAJU DATAPRO COMPUTERS 64
Note: If there are more than one parameters for an arrow function, then we have enclose them within
parentheses.
Step2. Run the program
Output:
Program: ES6 Collections – Sets
Note: A set is a collection that contain only unique values
Step1.
Step2. Run the Program
Output:
BVRAJU DATAPRO COMPUTERS 65
Program: De-structuring Assignment
Before ES6:
Step1.
Step2. Run the Program
Output:
From ES6:
BVRAJU DATAPRO COMPUTERS 66
Step1.
Step2. Run the Program
Output:
Program: Array.find()
Note: The find() method returns the value of the first array element that passes a test function.
This program returns the first element that is larger than 25
Step1.
BVRAJU DATAPRO COMPUTERS 67
Note:
“index”: It contains index of each element of the array
“array”: It contains the array itself
Note: In this example, the myFun() gets invoked 5 times because there are 5 elements in the array.
Step2. Run the program
Output:
Program: Array.findIndex()
Note:
The findIndex() method returns the index of the first array element that passes a test function.
Step1.
Step2. Run the program
BVRAJU DATAPRO COMPUTERS 68
Output:
Program: Number type method – isInteger()
Step1.
Step2. Run the program
Output:
Program: Global function isNaN()
Step1.
Step2. Run the program
Output:
BVRAJU DATAPRO COMPUTERS 69
BVRAJU DATAPRO COMPUTERS 70
Round-4: Object-Oriented Programming using Javascript
Program: Creating ES6 Classes, constructor, creating instances and invoking methods
Step1.
Step2. Run the program
Output:
Program: Demo on Setter and Getter methods
Step1.
BVRAJU DATAPRO COMPUTERS 71
Step2. Run the Program
Output:
Program: Demo on static methods
Step1.
Step2. Run the program
BVRAJU DATAPRO COMPUTERS 72
Output:
Program: Class Expressions - unnamed
Note:
The other way to define a class is with a class expression. Class expressions can be named or unnamed.
Step1.
Step2. Run the Program
Output:
Program: Class Expressions - named
Step1.
BVRAJU DATAPRO COMPUTERS 73
Step2. Run the Program
Output:
Program: Inheritance Ex1
Step1.
BVRAJU DATAPRO COMPUTERS 74
Step2. Run the program
Output:
Program: Inheritance Ex2
Step1.
BVRAJU DATAPRO COMPUTERS 75
Step2.
Output:
Program: Demo1 on Runtime Polymorphism
Step1.
class Shape{
draw(){
console.log("Shape-draw")
}
BVRAJU DATAPRO COMPUTERS 76
}
class Rectangle extends Shape{
//method overriding
draw(){
console.log("Rectangle-draw")
}
}
class Circle extends Shape{
//method overriding
draw(){
console.log("Circle-draw")
}
}
class Square extends Shape{
//method overriding
draw(){
console.log("Square-draw")
}
}
function myFun(x){
x.draw();
}
arr = [new Rectangle(), new Circle(), new Square()]
for(s of arr){
myFun(s);
}
Step2. Run the Program
Output:
Program: Demo2 on Runtime Polymorphism
Step1.
BVRAJU DATAPRO COMPUTERS 77
class Shape{
area(){
return 0;
}
}
class Rectangle extends Shape{
constructor(width, height){
super();
//Must call super constructor in derived class before accessing 'this'
this.width = width;
this.height = height;
}
//method overriding
area(){
return this.width * this.height;
}
}
class Circle extends Shape{
constructor(radius){
super();
this.radius = radius;
}
//method overriding
area(){
return 3.14 * this.radius * this.radius;
}
}
class Triangle extends Shape{
constructor(base, height){
super();
this.base = base;
this.height = height;
}
//method overriding
area(){
BVRAJU DATAPRO COMPUTERS 78
return this.base * this.height / 2;
}
}
function myFun(x){
if(x instanceof Rectangle)
console.log("Area of Rectangle with width and height: " + x.width + ", " + x.height);
else if( x instanceof Circle)
console.log("Area of Circle with radius:" + x.radius)
else if(x instanceof Triangle)
console.log("Area of Triangle with base and height:" + x.base + ", " + x.height)
console.log(x.area());
}
arr = [new Rectangle(30, 10), new Circle(5), new Triangle(10, 15)]
for(s of arr){
myFun(s);
}
Step2. Run the program
Output:
BVRAJU DATAPRO COMPUTERS 79
Round-5: Javascript accessing HTML DOM
(Document Object Model)
Introduction
HTML DOM TREE
Ex1:
Ex2:
BVRAJU DATAPRO COMPUTERS 80
With the object model, JavaScript gets all the power it needs to create dynamic HTML, like:
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
What is DOM
• The DOM is a W3C (World Wide Web Consortium) standard.
• The DOM defines a standard for accessing documents:
• "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."
What is HTML DOM
BVRAJU DATAPRO COMPUTERS 81
The HTML DOM is a standard object model and programming interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Program: Change the content (the innerHTML) of the <p> element with id="demo"
Step1. Create a new HTML file
Note: The “document” object represents your web page.
If you want to access any element in an HTML page, you always start with accessing the document
object.
Note: Here “getElementById()” is a method whereas “innerHTML” is a property
Note: Notice that the <script> tag is not inside the <head> tag. So, it gets executed along with other
elements inside the <body> without waiting for any event to happen.
Note:
To find HTML Elements by Tag Name:
document.getElementsByTagName("tagname");
Step2. Open File Explorer and navigate to the file location and double click on the file
BVRAJU DATAPRO COMPUTERS 82
Output:
Program: Demo on Changing the Value of an Attribute
Step1.
<html>
<body>
<img id="img1" src ="https://siridesignercollections.com/wp-content/uploads/2020/06/single-
floor-elevation.jpg">
<script>
document.getElementById("img1").src = "https://www.carlogos.org/review-images/new-bmw-
cars-of-2021.jpg";
</script>
</body>
</html>
Note: Notice that the code inside the <script> is not inside any function block. So, it gets executed as
soon as we open the page
Step2. Run the Program
Output:
BVRAJU DATAPRO COMPUTERS 83
Program: Demo on Dynamic HTML Content
Step1.
Step2. Run the program
Output:
DOM Navigation
Let’s consider the following HTML file
BVRAJU DATAPRO COMPUTERS 84
Program: Demo on DOM Navigation
Step1.
BVRAJU DATAPRO COMPUTERS 85
<html>
<body>
<h1 id="id1">My First Heading</h1>
<p id="id2">My First Para</p>
<hr/>
<p id="id3"></p>
<p id="id4"></p>
<p id="id5"></p>
<script>
document.getElementById("id3").innerHTML = document.getElementById("id2").innerHTML;
document.getElementById("id4").innerHTML = document.getElementById("id1").firstChild.nodeValue;
document.getElementById("id5").innerHTML = document.getElementById("id1").childNodes[0].nodeValue;
</script>
</body>
</html>
Step2. Run the Program
Output:
BVRAJU DATAPRO COMPUTERS 86
MODULE-4: jQuery
Contents
Round-1: Introduction to jQuery
1. What is jQuery
2. There are lots of other JavaScript frameworks out there
3. Biggest companies on the Web use jQuery, such as
4. The jQuery library contains the following features
5. Prerequisite for using jQuery
6. Software required / adding jQuery to Your Web Pages
7. jQuery Syntax
Round-2: jQuery functions
1. hide()
2. using Google CDN
3. using Microsoft CDN
4. hide() ex – “id” selector
5. hide() ex “class” selector
6. doubleclick event
7. mouse enter event
8. hide and show
9. toggle() demo
10. Animate Ex1
11. Animate Ex2
12. Fading
13. Callback functions
14. jQuery Method Chaining
Round-3: jQuery HTML
1. To get content with the jQuery text() and html() methods
2. To get the value of an input field with the jQuery val() method
3. To get attribute values
4. To set content with the jQuery text(), html(), and val() methods
5. Add elements Demo
6. Adding/appending content Ex2
7. Remove() Demo
8. Manipulating CSS Ex1
9. Manipulation CSS Ex2
Round-4: jQuery UI
1. DatePicker Ex1: Select a date from a popup or inline calendar
2. DatePicker Ex2 (formatting the date)
BVRAJU DATAPRO COMPUTERS 87
3. jQuery Bounce effect: Apply an animation effect to an element
4. jQuery UI widget – Accordion: Displays collapsible content panels for presenting information in
a limited amount of space
5. Tabs Demo: A single content area with multiple panels, each associated with a header in a list
BVRAJU DATAPRO COMPUTERS 88
Round-1: Introduction to jQuery
What is jQuery
• jQuery is a lightweight, "write less, do more", JavaScript library/framework.
• The purpose of jQuery is to make it much easier to use JavaScript on your website.
• jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
• Originally created by John Resig
• Now being developed by “jQuery Team”
• Initial release August 2006, latest release July 2013
• jQuery is free, open source software.
• Used by over 65% of the 10,000 most visited websites – Microsoft.com, amazon.com,
flipkart.com, ask.com, in.godaddy.com, espn.go.com
There are lots of other JavaScript frameworks out there
• Yahoo User Interface Library (YUI)
• Mootools
• Mochikit
• Dojo toolkit
• jQuery
• Google Web Toolkit
• Rico
• Prototype
• SmartClient
• Sammy
• Cappuccino
• Google Closure
• Ember
• Batman
• Ext JS
jQuery is the most popular one.
Biggest companies on the Web use jQuery, such as
• Google
• Microsoft
• IBM
The jQuery library contains the following features
• HTML manipulation (add elements, remove elements, hide/show an element etc.)
• CSS manipulation (change font, change color etc.)
BVRAJU DATAPRO COMPUTERS 89
• HTML event methods (click, double click etc.)
• Effects and animations
• AJAX
Prerequisite for using jQuery
• HTML
• CSS
• JavaScript
Software required / adding jQuery to Your Web Pages
There are multiple ways to start using jQuery on our web site. We can:
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google CDN
Method1:
Goto www.jQuery.com/download → Right click on “Download the uncompressed, development
jQuery 2.0.3” → Select “Save Link As”, the file gets downloaded to our system.
We may rename it to something else eg: RajuJQuery1.js or leave the default name: jquery-2.0.3.js
Place the downloaded file in the same directory as the pages where you wish to use it.
To refer, write the following:
<script type="text/javascript" src="RajuJQuery1.js">
</script>
Method2:
Alternatives to Downloading
If you don't want to download and host jQuery yourself, you can include it from a CDN (Content
Delivery Network).
Both Google and Microsoft host jQuery.
BVRAJU DATAPRO COMPUTERS 90
One big advantage of using the hosted jQuery from Google or Microsoft:
Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a
result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also,
most CDN's will make sure that once a user requests a file from it, it will be served from the server
closest to them, which also leads to faster loading time.
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and performing some action on the
element(s).
Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
BVRAJU DATAPRO COMPUTERS 91
Round-2: jQuery selectors, hide, show, events
Program1. hide() ex1
<html>
<head>
<title></title>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function() // the function we pass can just be an anonymous function.
{
$("p").click(function() //The element( here: <p> ) Selector
{
$(this).hide(); // current element Selector
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
Note: expanding the above javascript code:
<script type="text/javascript">
function bye()
{
$(this).hide();
}
function hai()
{
$("p").click(bye);
}
$(document).ready(hai);
</script>
Note: meaning of : $(document).ready(…);
• This will run the function that we pass to .ready() once the document is ready.
BVRAJU DATAPRO COMPUTERS 92
• We need to ensure that the page is in a state where it's ready to be manipulated.
• We're using $(document) to create a jQuery object from the javascript’s document object.
To understand the meaning of “this” better:
(i)
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function() {
$(this).hide(); //which ever “p” element we click, only that element would be hidden
});
});
</script>
<body>
<p>If you click on me, I will disappear</p>
<p>If you click on me, I will disappear</p>
<h2>If you click on me, I will disappear</h2>
</body>
(ii)
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function() {
$("p").hide(); //which ever “p” element we click, all “p” elements would be hidden
});
});
</script>
<body>
<p>If you click on me, I will disappear</p>
<p>If you click on me, I will disappear</p>
BVRAJU DATAPRO COMPUTERS 93
<h2>If you click on me, I will disappear</h2>
</body>
(iii)
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function() {
$("h2").hide(); //which ever “p” element we click, “h2” element would be hidden
});
});
</script>
<body>
<p>If you click on me, I will disappear</p>
<p>If you click on me, I will disappear</p>
<h2>If you click on me, I will disappear</h2>
</body>
Program2. hide() ex2
<html>
<head>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
BVRAJU DATAPRO COMPUTERS 94
</html>
Program3. using Google CDN
<html>
<head>
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function() //The element( here: <p> ) Selector
{
$(this).hide(); // current element Selector
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear2.</p>
</body>
</html>
Program4. using Microsoft CDN
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.aspnedtcdn.com/ajax/jQuery/jquery-
1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function() //The element( here: <p> ) Selector
{
BVRAJU DATAPRO COMPUTERS 95
$(this).hide(); // current element Selector
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear3.</p>
</body>
</html>
Program5. hide() ex3 – “id” selector
<head>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide(); //id selector
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
Program6. hide() ex4 “class” selector
<html>
<head>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide(); //class selector
});
BVRAJU DATAPRO COMPUTERS 96
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Program7. doubleclick event
<html>
<head>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Program8. mouse enter event
<html>
<head>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
BVRAJU DATAPRO COMPUTERS 97
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
Program9. hide and show
<html>
<head>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Program10. toggle() demo
<html>
<head>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
BVRAJU DATAPRO COMPUTERS 98
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Program11. Animate Ex1
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:300},"slow"); //1st argument: CSS property , 2nd argument: duration
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#ff0000;height:100px;width:100px"> Hello
</div>
</body>
</html>
Program12. Animate Ex2
<html>
<head>
BVRAJU DATAPRO COMPUTERS 99
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").animate({fontSize: "3em"}, "slow"); //or in px
});
$(".btn2").click(function(){
$("p").animate({fontSize:"1em", "fast"});
});
});
</script>
</head>
<body>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
<p>This is a paragraph.</p>
</body>
</html>
Program13. Fading
<html>
<head>
<title></title>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25); // try with fadeTo("slow",0);
});
});
</script>
</head>
<body>
<div style="background:yellow;width:300px;height:300px">
<button>Click to Fade</button>
</div>
</body>
BVRAJU DATAPRO COMPUTERS 100
</html>
Program14. Callback functions
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
Program15. jQuery Method Chaining
• Until now we have been writing jQuery statements one at a time (one after the other).
• However, there is a technique called chaining, that allows us to run multiple jQuery commands,
one after the other, on the same element(s).
• This way, browsers do not have to find the same element(s) more than once.
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
BVRAJU DATAPRO COMPUTERS 101
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
Program16(b). Without Method Chaining
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","blue");
$("#p1").slideUp(2000);
$("#p1").slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 102
Round-3: jQuery HTML
• One very important part of jQuery is the possibility to manipulate the DOM (Document Object
Model).
• The DOM defines a standard for accessing HTML and XML documents:
• "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."
• jQuery comes with a bunch of DOM related methods that make it easy to access and
manipulate elements and attributes.
Program18. To get content with the jQuery text() and html() methods
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function()
{
$("#btn1").click(function()
{
alert("Text: " + $("#test").text()); //note that for <p> element the id is “test”
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
}
);
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
Program19. To get the value of an input field with the jQuery val() method
<html>
<head>
<script src="RajuJQuery1.js">
</script>
BVRAJU DATAPRO COMPUTERS 103
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test"></p>
<button>Show Value</button>
</body>
</html>
Program20. To get attribute values
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#mvp").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.datapro.in" id="mvp">Datapro.in</a></p>
<button>Show href Value</button>
</body>
</html>
Program21. To set content with the jQuery text(), html(), and val() methods
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function()
{
$("#btn1").click(function(){
BVRAJU DATAPRO COMPUTERS 104
$("#test1").text("Android is the most interesting programming course");
});
$("#btn2").click(function(){
$("#test2").html("<b>Anybody Loves to work at Google</b>");
});
$("#btn3").click(function(){
$("#test3").val("Avatar");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Godzilla"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
Program22(a). Add elements Demo
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="myImages/jquery_logo.gif" alt="jQuery Logo" width="100" height="140">
<br><br>
BVRAJU DATAPRO COMPUTERS 105
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
Program22(b). adding/appending content Ex2
<html>
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>Doctors Colony</b>.");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Program23. remove() Demo
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
BVRAJU DATAPRO COMPUTERS 106
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>
Program24. Manipulating CSS Ex1
<html>
<head>
<script src="RajuJQuery1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div>
<br>
<button>Add classes to elements</button>
BVRAJU DATAPRO COMPUTERS 107
</body>
</html>
Program25. Manipulation CSS Ex2
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="RajuJQuery1.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Traversing:
Query traversing, which means "move through", are used to "find" (or select) HTML elements based on
their relation to other elements. Start with one selection and move through that selection until you
reach the elements you desire.
BVRAJU DATAPRO COMPUTERS 108
Round-4: jQuery UI
(jQuery User Interface)
What is jQuery UI
jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can
use to build highly interactive web applications.
Open: http://jqueryui.com/
Click on the following Download link
Using jQuery UI on a Web Page
We’ll need to include these three files on any page to use the jQuery UI widgets and interactions:
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
All the above three files are available inside the extracted folder
Using jQuery UI CDN:
BVRAJU DATAPRO COMPUTERS 109
Note: In addition to these two, we have to refer to core jQuery as well.
Program1. DatePicker Ex1: Select a date from a popup or inline calendar
Step1. Create a web app project
Step2. Copy the jquery ui (extracted folder) into the web pages node
It should be as follows:
Step3. Now create a html file – datePicker1.html:
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="jquery-ui-1.11.0/jquery-ui.min.css">
<script src="jquery-ui-1.11.0/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.0/jquery-ui.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
BVRAJU DATAPRO COMPUTERS 110
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#date").datepicker({numberOfMonths: 4}); //default is 1 month
$("#button1").click(function()
{
$("span").text($("#date").val() );
});
});
</script>
</head>
<body>
Click on the box to select Date: <input type="text" name="date" id="date">
<p/>
<input type="button" value="Show Date" id = "button1">
<p/>
Selected Date is:
<span></span>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 111
Program2. DatePicker Ex2 (formatting the date)
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.11.0/jquery-ui.min.css">
<script src="jquery-ui-1.11.0/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#date").datepicker();
$( "#format" ).change(function() {
$( "#date" ).datepicker( "option", "dateFormat", $( this ).val() );
});
$("#button1").click(function()
{
$("span").text($("#date").val() );
BVRAJU DATAPRO COMPUTERS 112
});
});
</script>
</head>
<body>
Click on the box to select Date: <input type="text" name="date" id="date">
<p/>
<input type="button" value="Show Date" id = "button1">
<p>Format options:<br>
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With
text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
<p/>
Selected Date is:
<span></span>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 113
Program3. jQuery Bounce effect: Apply an animation effect to an element
<html>
<head>
Method1: (from internet)
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>-->
Method2: (within the project)
<script src="jquery-ui-1.11.0/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.0/jquery-ui.min.js"></script>
<style>
div
/* Just to add some color to our boxes */
{
padding:5px;
width:150px;
height:100px;
text-align:center;
}
#bouncy1 {
background-color:#FFEE88;
}
#bouncy2 {
background-color:#EE88FF;
}
#bouncy3 {
background-color:#EE8888;
}
#bouncy4 {
background-color:#88EEFF;
}
</style>
<script>
$(function(){
//Add bounce effect on Click of the DIV
$('#bouncy1').click(function () {
$(this).effect("bounce", {direction:'up', times:2 }, 1000);
});
$('#bouncy2').click(function () {
BVRAJU DATAPRO COMPUTERS 114
$(this).effect("bounce", { direction:'left', times:2 }, 1000);
});
$('#bouncy3').click(function () {
$(this).effect("bounce", { direction:'right', times:2 }, 1000);
});
$('#bouncy4').click(function () {
$(this).effect("bounce", { direction:'down', times:2 }, 1000);
});
//Bounce all DIVs on click of button
$("#bounceAll").click(function(){
$("div").click();
});
});
</script>
</head>
<body>
<!--
Our Goal will be to create a HTML page that has 4 boxes (DIVs).
Clicking each of these boxes will bounce them is a particular direction.
We can control the direction as well as the speed of bouncing element with arguments to the
method of jQuery.
-->
<table>
<tr>
<td><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
<td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
<td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
<td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Click Me to Bounce All!"/>
</body>
</html>
Program4. jQuery UI widget – Accordion: Displays collapsible content panels for presenting
information in a limited amount of space
BVRAJU DATAPRO COMPUTERS 115
It displays collapsible content panels for presenting information in a limited amount of space.
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
V Imp. Note: The order of <script> elements is important. jQuery library should be included before
jQuery UI library.
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>Dennis Ritchie</h3>
<div>
<p>
Dennis MacAlistair Ritchie was an American computer scientist who "helped shape the digital
era."
He created the C programming language and, with long-time colleague Ken Thompson, the
Unix operating system.
</p>
</div>
<h3>Bjarne Stroustrup</h3>
<div>
<p>
Bjarne Stroustrup is a Danish computer scientist, most notable for the creation and the
development of
the widely used C++ programming language
</p>
</div>
<h3>James Gosling</h3>
<div>
<p>
James Arthur Gosling, is a Canadian computer scientist, best known as the father of the Java
programming language.
</p>
BVRAJU DATAPRO COMPUTERS 116
</div>
</div>
</body>
</html>
Program5. Tabs Demo: A single content area with multiple panels, each associated with a header in a
list
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#myTabs" ).tabs();
});
//We can see this affect in the webpage:
//http://www.oracle.com/technetwork/java/javase/documentation/index.html
</script>
</head>
<body>
<div id="myTabs">
<ul>
<li><a href="#tabs-1">Tab1</a></li>
<li><a href="#tabs-2">Tab2</a></li>
<li><a href="#tabs-3">Tab3</a></li>
</ul>
<div id="tabs-1">
<p>This is content of Tab1</p>
</div>
<div id="tabs-2">
<p>This is content of Tab2</p>
BVRAJU DATAPRO COMPUTERS 117
</div>
<div id="tabs-3">
<p>This is content of Tab3</p>
</div>
</div>
</body>
</html>
<!--
The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list
Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an href
attribute
Each tab panel may be any valid element but it must have an id which corresponds to the hash(#) in
the anchor(<a>) of the associated tab.
-->
BVRAJU DATAPRO COMPUTERS 118
MODULE-5: Bootstrap
(Web Front-end Framework)
(HTML, CSS and Javascript Framework for faster & easier RWD)
(Created by two guys who work at Twitter)
Contents
Round-1: Introduction to Bootstrap
1. What is Bootstrap
2. Advantages of Bootstrap / Why use Bootstrap
3. How to use Bootstrap
4. Program: Creating 1st web page with Bootstrap
5. Program: full width container
6. Bootstrap Grid System
7. Grid Classes
8. Program: Three Equal Columns
9. Program: Two unequal columns
10. Program: Two Equal Columns
11. Program: Creating Responsive Layout with Bootstrap
Round-2: Typography
1. Program: <abbr>
2. Program: Contextual colors
3. Program: Contextual Backgrounds
4. Program: Pre Scrollable
5. Program: <kbd>
Round-3: Tables
1. Stripped Rows
2. Hover Rows
3. Contextual classes
4. Reponsive tables
Round-4
1. Jumbotron
2. Program: Jumbotron inside container
3. Program: Jumbotron outside container
4. Program: Wells
5. Program: Alerts
6. Program: Glyphicons
7. Program: Badges
BVRAJU DATAPRO COMPUTERS 119
8. Program: Progress bars
9. Program: Pagination (online exam questions)
10. Program: Pager
Round-5: Bootstrap Collapsible
1. Program:Bootstrap Collapse - Basic
2. Program:Bootstrap Collapsible Panel
3. Program:Bootstrap Collapsible Group
4. Program:Accordion
Round-6
1. Program: Tabs
2. Program: Breadcrumbs
3. Program: Creating Models with Bootstrap
Round-7: Bootstrap5 Navigation Bar
1. Program: Display Brand Name Text
2. Program: Display Brand Name Image
3. Program: Display Brand Name Text and Image
4. Program: Display Navigation Bar Links/Menu, also covers responsive behaviour of Navigation
Bar with a Toggler icon
5. Program: Display Dropdown Link in the Menu
6. Program: Display Form Controls within the Navigation Menu
7. Program: Navigation Bar – Color Schemes
8. Program: Fixed Navigation Bar
9. Program: Sticky Navigation Bar
Round-8: Advanced
1. Program: Bootstrap Input Groups
2. Program: Media Objects – Ex1
3. Program: Media Objects – Ex2 – Nesting Media Objects
4. Program: Carousel Ex1
5. Program: Carousel Ex2 – Adding captions to slides
Round-9: Bootstrap Templates
1. Program: Template1 - blog
2. Program: Template2 - webpage
3. Program: Template3 – online store
4. Program: Template4 – marketing
Round-9: Bootstrap5 Cards
1. Cards-HeaderFooter
2. Cards-HeaderFooter-Style2
3. Cards-Styles
4. Cards-Grid
5. Cards-Groups
BVRAJU DATAPRO COMPUTERS 120
6. Carousel-with interval
BVRAJU DATAPRO COMPUTERS 121
Round-1: Introduction to Bootstrap
What is Bootstrap
Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML
and CSS based design templates for common user interface components like Typography, Forms,
Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as
well as optional JavaScript extensions.
It was released as an open source product in August 2011 on GitHub.
Advantages of Bootstrap / Why use Bootstrap
• Mobile First Approach: Meaning that almost everything has been redesigned to start from a
lower screen size and scale up. With the mobile-first approach you can decide which one is the
most important part of the content that you want your users to see when browsing your
website on small devices such as phones. Now they come with fluid design and you don't have
to worry about upcoming screen sizes and resolutions. Your design will flow and look great on
every device.
• Browser Support: It is supported by latest versions of all popular web browsers
• Easy to get started
• Responsive Design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles
• It contains beautiful and functional built-in components which are easy to customize
• It is free
• It is open source
How to use Bootstrap
Method1: Downloading the Bootstrap files
Note: This method would be useful if we want to work offline.
Step1. Go to www.getbootstrap.com
BVRAJU DATAPRO COMPUTERS 122
Unzip the file
Step2. Create a web project using NetBeans IDE, copy paste the unzipped folder to the “Web Pages”
node:
BVRAJU DATAPRO COMPUTERS 123
Method2: Bootstrap CDN
Step1.
As of 22nd June 2024:
Go to https://getbootstrap.com/
BVRAJU DATAPRO COMPUTERS 124
Step2. Add these to the <head> section of any .html or .php file.
Program1: Creating 1st web page with Bootstrap - This example shows the code for a basic Bootstrap
page (with a responsive fixed width container)
Step1. Create a new web project using NetBeans IDE
Step2. Create an html file – container1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background-color: yellow">
<h1>My First Bootstrap Page</h1>
<p>Hello Mr Krishna Chaitanya, welcome to Bootstrap!</p>
</div>
</body>
</html>
Step3. Open the file in a Web Browser
Output:
BVRAJU DATAPRO COMPUTERS 125
Program2: This example shows the code for a basic Bootstrap page (with a full width container)
Step1. Copy Paste the previous program and edit it:
<div class="container-fluid" style="background-color: yellow">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Step2. Open in a Web Browser
Output:
Note:
BVRAJU DATAPRO COMPUTERS 126
Bootstrap Grid System
Bootstrap grid system provides the quick and easy way to create responsive website layouts. As
opposed to the previous Bootstrap 2.x grid system which is fixed by default, the new version, i.e.
Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12
columns as the device or viewport size increases.
BVRAJU DATAPRO COMPUTERS 127
Grid Classes
The Bootstrap grid system has four classes:
• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for wider laptops/desktops - screens equal to or greater than 1200px wide)
Program3: Three Equal Columns
The following example shows how to get a three equal-width columns starting at tablets and scaling to
large desktops. On mobile phones, the columns will automatically stack
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3" style="background-color:lavender;">one</div>
<div class="col-sm-12 col-md-6 col-lg-3" style="background-color:lavenderblush;">two</div>
BVRAJU DATAPRO COMPUTERS 128
<div class="col-sm-12 col-md-6 col-lg-3" style="background-color:cyan;">three</div>
<div class="col-sm-12 col-md-6 col-lg-3" style="background-
color:yellow;">four</div>
</div>
<!--
on large size screens, 3 cells would be grouped as one column, so
we get 4 columns per row .
on medium size screens, 6 cells would be grouped as one column, so
we get two columns only per row.
on small size screens, 12 cells would be grouped as one column, so
we get one columns only per row.
-->
</div>
</body>
</html>
Output
Case1:
Case2:
Case3:
BVRAJU DATAPRO COMPUTERS 129
Program4: Two unequal columns
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-12 col-md-8 col-lg-8" style="background-color:lavenderblush;">.col-sm-
8</div>
</div>
</div>
</body>
</html>
Output:
Case1:
BVRAJU DATAPRO COMPUTERS 130
Case2:
Program5: Creating Responsive Layout with Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Layout Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<div class="row">
BVRAJU DATAPRO COMPUTERS 131
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<h2>HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section
will help you understand the basics of HTML, so that you can create your own web pages or
website.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help
you learn the essentials of CSS, so that you can fine control the style and layout of your HTML
document.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The
Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can create web
your own website with much less efforts.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<h2>References</h2>
<p>The references section outlines all the standard HTML tags and CSS properties along with
other useful references such as color names and values, symbols and character entities, web safe
fonts, language codes, HTTP messages and much more.</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Examples</h2>
<p>The examples section encloses an extensive collection of examples on various topic that you
can try and test yourself using online HTML editor.</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>FAQ</h2>
<p>The collection of Frequently Asked Questions (FAQ) provides brief answers to many common
questions related to web design and development.</p>
</div>
</div>
</div>
</body>
BVRAJU DATAPRO COMPUTERS 132
</html>
Output
Case1:
Case2:
Case3:
BVRAJU DATAPRO COMPUTERS 133
Case4:
BVRAJU DATAPRO COMPUTERS 134
Round-2 (Typography)
Program1: <abbr>
<!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.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Abbreviations</h1>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
</body>
</html>
Output:
Program2: Contextual colors
<!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.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
BVRAJU DATAPRO COMPUTERS 135
</head>
<body>
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>
</body>
</html>
Output:
Program3: Contextual Backgrounds
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
BVRAJU DATAPRO COMPUTERS 136
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors":</p>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>
</body>
</html>
Output:
Program4: Pre Scrollable
<!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.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
BVRAJU DATAPRO COMPUTERS 137
<div class="container">
<h2>Code</h2>
<p>If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-
axis scrollbar:</p>
<pre class="pre-scrollable" style="max-height: 500px">
“Life is 10% what happens to us and 90% how we react to it.”
“When I stand before God at the end of my life, I would hope that I
would not have a single bit of talent left and could say, I used everything you gave me.”
“Luck is a dividend of sweat. The more you sweat, the luckier you get.”
“Courage is the first of human qualities because it is the
quality which guarantees all others.”
“Every truth passes through three stages before it is
recognized. In the first, it is ridiculed. In the second, it is opposed. In the third, it is regarded as self
evident.”
“If not us, who? If not now, when?”
“Many of life’s failures are experienced by people
who did not realize how close they were to success when they gave up.”
</pre>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 138
Program5: <kbd>
<!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.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 139
Round-3
Program1: Stripped Rows
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped"> <!-- Grouping two classes-->
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
BVRAJU DATAPRO COMPUTERS 140
</table>
</div>
</body>
</html>
Output:
Program2: Hover Rows
<body>
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
BVRAJU DATAPRO COMPUTERS 141
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
Output:
Program3: Contextual classes
<body>
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells. The classes that can be used
are: .active, .success, .info, .warning, and .danger.</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
BVRAJU DATAPRO COMPUTERS 142
<td>[email protected]</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
Output:
Program4: Responsive tables
BVRAJU DATAPRO COMPUTERS 143
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small
devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Output:
Case1:
BVRAJU DATAPRO COMPUTERS 144
Case2:
If we don’t mention: class="table-responsive"
BVRAJU DATAPRO COMPUTERS 145
Round-4
Jumbotron
Note: A jumbotron indicates a big box for calling extra attention to some special content or
information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text
inside it.
Program1: Jumbotron inside container
Note: Place the jumbotron inside the <div class="container"> if you want the jumbotron to NOT extend
to the edge of the screen:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 146
Program2: Jumbotron outside container
Note: Place the jumbotron outside the <div class="container"> if you want the jumbotron to extend to
the screen edges:
<body>
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
Output:
BVRAJU DATAPRO COMPUTERS 147
Program3: Wells
Note: The .well class adds a rounded border around an element with a gray background color and
some padding
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Well Size</h2>
<div class="well well-sm">Small Well</div>
<div class="well">Normal Well</div>
<div class="well well-lg">Large Well</div>
</div>
</body>
</html>
Output:
Program4: Alerts
Note: Bootstrap provides an easy way to create predefined alert messages
<!DOCTYPE html>
BVRAJU DATAPRO COMPUTERS 148
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
Output:
Program5: Glyphicons
BVRAJU DATAPRO COMPUTERS 149
Note:
Note:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
BVRAJU DATAPRO COMPUTERS 150
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>
Output:
Program6: Badges
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
BVRAJU DATAPRO COMPUTERS 151
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
Output:
Program7: Progress bars (useful for online compilers, online converters etc)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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" style="width:40%">
BVRAJU DATAPRO COMPUTERS 152
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:70%">
70% Complete (danger)
</div>
</div>
</div>
</body>
</html>
Output:
Program8: Progress Bar – animated
<body>
<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" style="width:40%">
40%
BVRAJU DATAPRO COMPUTERS 153
</div>
</div>
</div>
</body>
Output:
Program9: Pagination Ex1
Note: Useful in pages where online exam questions are displayed
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>The .pagination class provides pagination links:</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 154
Output:
Program10: Pager
Note: Pager provides previous and next buttons (links)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pager</h2>
<p>The .pager class provides previous and next buttons (links):</p>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
<!--
<li><a href="https://www.gitam.edu/">Previous</a></li>
<li><a href="http://vmccollege.edu.in/">Next</a></li>
-->
</ul>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 155
BVRAJU DATAPRO COMPUTERS 156
Round-5 (Bootstrap Collapsible)
Program1: Bootstrap Collapse - Basic
Note: Collapsibles are useful 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple
collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Output:
After click on the button:
BVRAJU DATAPRO COMPUTERS 157
Program2: Bootstrap Collapsible Panel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group"> <!-- would be useful when we have multiple panels-->
<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>
<!-- footer not required-->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Collapsible panel2</a>
</h4>
BVRAJU DATAPRO COMPUTERS 158
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
<!-- footer not required-->
</div>
</div>
</div>
</div>
</body>
</html>
Output:
After clicking the link:
Program3: Bootstrap Collapsible Group
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
BVRAJU DATAPRO COMPUTERS 159
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapsible List Group</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
After clicking the link:
BVRAJU DATAPRO COMPUTERS 160
Program4: Accordion
Note: Use the data-parent attribute to make sure that all collapsible elements under the specified
parent will be closed when one of the collapsible items is shown.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all
collapsible elements under the specified parent will be closed when one of the collapsible item is
shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
BVRAJU DATAPRO COMPUTERS 161
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 162
Round-6
Program1: Tabs
Note:
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class
with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.
If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-
pane class with a unique ID for every tab and wrap them inside a div element with class .tab-
content.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
BVRAJU DATAPRO COMPUTERS 163
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Output:
Program: Breadcrumbs
Note:
A breadcrumb is a navigation scheme that indicates current page's location to the user within a website
or application. Breadcrumb navigation can greatly enhance the accessibility of the websites having a
large number of pages.
Ex1:
BVRAJU DATAPRO COMPUTERS 164
Ex2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li class="active">Accessories</li>
</ul>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 165
Program: Creating Models with Bootstrap
Note:
Modals are basically a dialog box that is used to provide important information to the user or prompt
user to take necessary actions before moving on. Modal windows are widely used to warn users for
situations like session time out or to receive their final confirmation before going to perform any
critical actions such as saving or deleting important data.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade"> <!-- otherwise it would be greyed out-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
BVRAJU DATAPRO COMPUTERS 166
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 167
Round-7 (Bootstrap5 Navigation Bar)
Note: Make sure that if you are using Bootstrap5 version links then we must be using Bootstrap5
classes which are slightly different from Bootstrap 3 classes
Program: Display Brand Name Text
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- navbar-light: Sets the navbar text and components to use a light color scheme, making them
suitable for light backgrounds.
bg-light: Applies a light gray background color to the navbar. -->
</body>
</html>
Note: Remember that the CDN is of Bootstrap 5 version
Output:
BVRAJU DATAPRO COMPUTERS 168
Additional Explanation:
<meta name="viewport" content="width=device-width, initial-scale=1">
This line: Ensures a responsive design, meaning the webpage adjusts seamlessly to different screen
sizes.
name="viewport":
This specifies that the metadata is related to the viewport, which is the visible area of a
webpage on a screen.
content="width=device-width, initial-scale=1":
width=device-width:
Ensures that the width of the viewport matches the screen's width, whether it's
a mobile, tablet, or desktop screen. This prevents the page from being too wide
and requiring horizontal scrolling.
initial-scale=1:
Sets the initial zoom level of the page to 1, meaning the content is displayed at
its default size (100% zoom).
If we don’t mention that line:
• The webpage may not scale to fit the device's screen width, leading to parts of the content
being cut off.
• Users may need to scroll horizontally to view the entire page, which is inconvenient.
Note:
The <nav> tag does not have a default visual style. It works as a structural and semantic container.
Screen readers use the <nav> tag to identify the navigation section.
Output:
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
BVRAJU DATAPRO COMPUTERS 169
<!-- mb-0: Removes the bottom margin for the branding.
h1: Renders the text with an <h1>-like appearance, but it remains a <span> semantically. -->
Program: Display Brand Name Image
<body>
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="house-logo1.png" alt="" width="30" height="24">
</a>
</div>
</nav>
</body>
Output:
Program: Display Brand Name Text and Image
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="house-logo1.png" alt="" width="30" height="24" class="d-inline-block align-text-
top">
My Home
</a>
</div>
</nav>
BVRAJU DATAPRO COMPUTERS 170
Output:
Program: Display Navigation Bar Links/Menu, also covers responsive Behaviour of Navigation Bar
with a Toggler icon
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Curriculum</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Output:
Decrease the screen width:
BVRAJU DATAPRO COMPUTERS 171
Click on the Toggle Icon
BVRAJU DATAPRO COMPUTERS 172
Explanation:
navbar-expand-lg: Makes the navbar responsive. It collapses into a toggler menu on screens smaller
than "large".
data-bs-target="#navbarNav": Specifies the ID of the collapsible section.
<span class="navbar-toggler-icon"></span>: Displays the toggler icon (a "hamburger menu" style
icon).
aria-controls="navbarNav": Links the button to the collapsible content.
aria-current="page": Indicates the link refers to the current page.
tabindex="-1": Removes the disabled link from the keyboard navigation flow.
Note: We could have accomplished the same result without <ul> </ul> and <li></li>
Note: ARIA stands for Accessible Rich Internet Applications
BVRAJU DATAPRO COMPUTERS 173
Program: Display Dropdown Link in the Menu
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-
target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galary</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Curriculum</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">SubItem1</a></li>
<li><a class="dropdown-item" href="#">SubItem2</a></li>
<li><a class="dropdown-item" href="#">SubItem3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Output:
BVRAJU DATAPRO COMPUTERS 174
Program: Display Form Controls within the Navigation Menu
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Output:
Program: Navigation Bar – Color Schemes
Color Schemes Ex1
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Output:
Color Schemes Ex2
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
Output:
BVRAJU DATAPRO COMPUTERS 175
Color Schemes Ex3
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
Note: Here we can give any background color
Output:
Program: Fixed Navigation Bar
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-
target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Curriculum</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">SubItem1</a></li>
<li><a class="dropdown-item" href="#">SubItem2</a></li>
BVRAJU DATAPRO COMPUTERS 176
<li><a class="dropdown-item" href="#">SubItem3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<pre>
<img src="wallpaper1.jpg"/>
<hr/>
<img src="wallpaper2.jpg"/>
<hr/>
<img src="wallpaper3.jpg"/>
<hr/>
</pre>
Output:
BVRAJU DATAPRO COMPUTERS 177
Scroll down:
Note: Observe that that Navigation bar is fixed at the top. It remains visible even when you scroll down
the page.
Note: Also observe that the content below the navbar is shifted up and may overlap with the navbar
unless you add padding or margin to compensate.
Note: Similarly, we can fix it at the bottom:
<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
BVRAJU DATAPRO COMPUTERS 178
Program: Sticky Navigation Bar
Note: To see the difference between sticky-top and fixed-top, you can add some content above the
navbar or ensure that the parent container <body> has enough scrollable content
<body>
<pre>
<h3>Start of Image</h3>
<img src="electricity1.jpg" />
<h3>End of Image</h3>
<hr/>
</pre>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-
target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
BVRAJU DATAPRO COMPUTERS 179
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Curriculum</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">SubItem1</a></li>
<li><a class="dropdown-item" href="#">SubItem2</a></li>
<li><a class="dropdown-item" href="#">SubItem3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<pre>
<img src="wallpaper1.jpg"/>
<hr/>
<img src="wallpaper2.jpg"/>
<hr/>
<img src="wallpaper3.jpg"/>
<hr/>
</pre>
</body>
Output:
BVRAJU DATAPRO COMPUTERS 180
Notice that the Navigation menu is not yet visible, now scroll down:
When the Navigation Menu, reaches the top, then it will remain fixed for the remaining scrolling
BVRAJU DATAPRO COMPUTERS 181
BVRAJU DATAPRO COMPUTERS 182
Round-8
Program1: Bootstrap Input Groups
Note:
The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".
The .input-group-addon class attaches an icon or help text next to the input field.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Input Groups</h3>
<p>The .input-group class is a container to enhance an input by adding an icon, text or a button in
front or behind it as a "help text".</p>
<p>The .input-group-addon class attaches an icon or help text next to the input field.</p>
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password"
placeholder="Password">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
<br>
<p>It can also be used on the right side of the input:</p>
BVRAJU DATAPRO COMPUTERS 183
<form>
<div class="input-group">
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
</div>
<div class="input-group">
<input id="password" type="password" class="form-control" name="password"
placeholder="Password">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
</div>
</form>
</div>
</body>
</html>
Output:
Program2: Media Objects – Ex1
Note: Bootstrap provides an easy way to align media objects (like images) to the left or to the right of
some content. This can be used to display blog comments, tweets and so on
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
BVRAJU DATAPRO COMPUTERS 184
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Media Object</h2>
<p>Use the "media-left" class to left-align a media object. Text that should appear next to the image,
is placed inside a container with class="media-body".</p>
<p>Tip: Use the "media-right" class to right-align the media object.</p><br>
<!-- Left-aligned media object -->
<div class="media">
<div class="media-left">
<img src="avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Left-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
</div>
<hr>
<!-- Right-aligned media object -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">Right-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="avatar1.png" class="media-object" style="width:60px">
</div>
</div>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 185
Program3: Media Objects – Ex2 – Nesting Media Objects
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Nested Media Objects</h2>
<p>Media objects can also be nested (a media object inside a media object):</p><br>
<div class="media">
<div class="media-left">
<img src="avatar1.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 19,
2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="avatar2.png" class="media-object" style="width:45px">
</div>
BVRAJU DATAPRO COMPUTERS 186
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 20,
2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="avatar3.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe <small><i>Posted on February 21,
2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="avatar4.jpg" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">Jane Doe <small><i>Posted on February 20,
2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="avatar5.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">Jane Doe <small><i>Posted on February 19,
2016</i></small></h4>
BVRAJU DATAPRO COMPUTERS 187
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Program4: Carousel Ex1
Note: The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
BVRAJU DATAPRO COMPUTERS 188
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la1.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago1.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="new-york.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 189
Program5: Carousel Ex2 – Add Captions to Slides
Note: Add <div class="carousel-caption"> within each <div class="item"> to create a caption for each slide:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
BVRAJU DATAPRO COMPUTERS 190
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la1.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago1.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="new-york.jpg" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 191
BVRAJU DATAPRO COMPUTERS 192
Round-9 (Bootstrap Templates)
Templates are nothing but readymade web pages with readymade Layout. We just need to replace
the existing content with our content.
Program: Template1 - blog
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
BVRAJU DATAPRO COMPUTERS 193
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>John's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Home</a></li>
<li><a href="#section2">Friends</a></li>
<li><a href="#section3">Family</a></li>
<li><a href="#section3">Photos</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9">
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>I Love Food</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27,
2015.</h5>
<h5><span class="label label-danger">Food</span> <span class="label label-
primary">Ipsum</span></h5><br>
<p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
BVRAJU DATAPRO COMPUTERS 194
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br><br>
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>Officially Blogging</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24,
2015.</h5>
<h5><span class="label label-success">Lorem</span></h5><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h4>Leave a Comment:</h4>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<br><br>
<p><span class="badge">2</span> Comments:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="avatar1.png" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4>
<p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
</div>
<div class="col-sm-2 text-center">
<img src="avatar2.png" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
BVRAJU DATAPRO COMPUTERS 195
<p>I am so happy for you man! Finally. I am looking forward to read about your trendy
life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<br>
<p><span class="badge">1</span> Comment:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="avatar3.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-xs-10">
<h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
<p>Me too! WOW!</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 196
Scrolldown:
Program: Template2 – webpage
BVRAJU DATAPRO COMPUTERS 197
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
BVRAJU DATAPRO COMPUTERS 198
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
BVRAJU DATAPRO COMPUTERS 199
ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 200
Program: Template3 – Online store
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
</style>
</head>
<body>
<div class="jumbotron">
BVRAJU DATAPRO COMPUTERS 201
<div class="container text-center">
<h1>Online Store</h1>
<p>Mission, Vission & Values</p>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Your Account</a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Cart</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-
responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-danger">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
BVRAJU DATAPRO COMPUTERS 202
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-
responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-
responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
</div>
</div><br>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-
responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-
responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-
responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
</div>
</div><br><br>
<footer class="container-fluid text-center">
BVRAJU DATAPRO COMPUTERS 203
<p>Online Store Copyright</p>
<form class="form-inline">Get deals:
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Sign Up</button>
</form>
</footer>
</body>
</html>
Output:
Scrolldown:
BVRAJU DATAPRO COMPUTERS 204
Program: Template4 - Marketing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
BVRAJU DATAPRO COMPUTERS 205
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
min-height: 200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
BVRAJU DATAPRO COMPUTERS 206
<div class="row">
<div class="col-sm-8">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placehold.it/800x400?text=IMAGE" alt="Image">
<div class="carousel-caption">
<h3>Sell $</h3>
<p>Money Money.</p>
</div>
</div>
<div class="item">
<img src="https://placehold.it/800x400?text=Another Image Maybe" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Upcoming Events..</p>
</div>
BVRAJU DATAPRO COMPUTERS 207
<div class="well">
<p>Visit Our Blog</p>
</div>
</div>
</div>
<hr>
</div>
<div class="container text-center">
<h3>What We Do</h3>
<br>
<div class="row">
<div class="col-sm-3">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-3">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Project 2</p>
</div>
<div class="col-sm-3">
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
</div>
<div class="col-sm-3">
<div class="well">
<p>Some text..</p>
</div>
<div class="well">
<p>Some text..</p>
</div>
</div>
</div>
<hr>
</div>
<div class="container text-center">
<h3>Our Partners</h3>
<br>
<div class="row">
BVRAJU DATAPRO COMPUTERS 208
<div class="col-sm-2">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Partner 1</p>
</div>
<div class="col-sm-2">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Partner 2</p>
</div>
<div class="col-sm-2">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Partner 3</p>
</div>
<div class="col-sm-2">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Partner 4</p>
</div>
<div class="col-sm-2">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Partner 5</p>
</div>
<div class="col-sm-2">
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%"
alt="Image">
<p>Partner 6</p>
</div>
</div>
</div><br>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Output:
BVRAJU DATAPRO COMPUTERS 209
Scrolldown:
BVRAJU DATAPRO COMPUTERS 210
Round-10: Bootstrap5 Styles
Cards-HeaderFooter
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</body>
</html>
Cards-HeaderFooter-Style2
<html>
BVRAJU DATAPRO COMPUTERS 211
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</body>
</html>
Cards-Styles
<html>
<head>
BVRAJU DATAPRO COMPUTERS 212
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
BVRAJU DATAPRO COMPUTERS 213
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
</div>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 214
Cards-Grid
BVRAJU DATAPRO COMPUTERS 215
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img
src="https://fastly.4sqi.net/img/general/600x600/22380573_0xuj7TpWnIhXsEKYnrxXr8woVsFoD7sSEs
U_42kmphA.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img
src="https://imgmedia.lbb.in/media/2021/04/6071cc4c729098695141c7c9_1618070604143.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://i.pinimg.com/originals/a8/d1/0f/a8d10f8ada5cf3fbf9ea44c32aa2fc3a.jpg"
class="card-img-top" alt="...">
BVRAJU DATAPRO COMPUTERS 216
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://images.media-allrecipes.com/userphotos/453291.jpg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 217
Cards-Groups
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div class="card-group">
<div class="card">
<img src="https://staticg.sportskeeda.com/wp-content/uploads/2016/03/pele-1970-
1457113575-800.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
BVRAJU DATAPRO COMPUTERS 218
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://www.realmadrid.com/img/horizontal_940px/maradona_gettyimages-
537157025_20201229025034.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional
content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://e3.365dm.com/21/04/2048x1152/football-messi-lionel_5359730.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to show that equal height
action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 219
Carousel-ex1
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-
label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-
label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="travel1.jpg" class="d-block w-100" alt="..." style="height:560px">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="travel2.jpg" class="d-block w-100" alt="..." style="height:560px">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="travel3.jpg" class="d-block w-100" alt="..." style="height:560px">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
BVRAJU DATAPRO COMPUTERS 220
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
Carousel-ex2-with interval
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
BVRAJU DATAPRO COMPUTERS 221
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>
<body>
<!-- Note: remove the cursor pointer on slide, only then time interval would work -->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="travel1.jpg" class="d-block w-100" alt="..." style="height:560px">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="travel2.jpg" class="d-block w-100" alt="..." style="height:560px">
</div>
<div class="carousel-item" data-bs-interval="10000" >
<img src="travel3.jpg" class="d-block w-100" alt="..." style="height:560px">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
BVRAJU DATAPRO COMPUTERS 222
BVRAJU DATAPRO COMPUTERS 223
You might also like
- DYNAMIC TRIO - Building Web Applications With React, Next - Js & TailwindNo ratings yetDYNAMIC TRIO - Building Web Applications With React, Next - Js & Tailwind164 pages
- Javascript - Info Full Tutorial Ebook PDF92% (12)Javascript - Info Full Tutorial Ebook PDF1,320 pages
- Itim Practical File, Komal Kumari (23M1078)No ratings yetItim Practical File, Komal Kumari (23M1078)24 pages
- Practical 1 Introduction To HTML. Create A Basic HTML FileNo ratings yetPractical 1 Introduction To HTML. Create A Basic HTML File11 pages
- Week 11 - Introducing HTML5 Basic Tags and Special TagsNo ratings yetWeek 11 - Introducing HTML5 Basic Tags and Special Tags13 pages
- CHAPTER 4 - HTML Phrase Tags and TablesNo ratings yetCHAPTER 4 - HTML Phrase Tags and Tables11 pages
- Bible Workbook and Guide - Study and Understand Book by Book (The Bible Study Book)100% (20)Bible Workbook and Guide - Study and Understand Book by Book (The Bible Study Book)576 pages
- Brief Introduction HTML5: John - Woodward@cs - Stir.ac - UkNo ratings yetBrief Introduction HTML5: John - Woodward@cs - Stir.ac - Uk25 pages
- Nelson's NKJV Study Bible, Second Edition (PDFDrive)100% (36)Nelson's NKJV Study Bible, Second Edition (PDFDrive)2,345 pages
- Get Coding! Learn HTML, CSS, and JavaScript and Build A Website, App, and Game PDF91% (33)Get Coding! Learn HTML, CSS, and JavaScript and Build A Website, App, and Game PDF209 pages
- (the IVP Bible Dictionary Series) Hawthorne, Gerald F._ Martin, Ralph P._ Reid, Daniel G. - Dictionary of Paul and His Letters a Compendium of Contemporary Biblical Scholarship-InterVarsity Press (20193% (15)(the IVP Bible Dictionary Series) Hawthorne, Gerald F._ Martin, Ralph P._ Reid, Daniel G. - Dictionary of Paul and His Letters a Compendium of Contemporary Biblical Scholarship-InterVarsity Press (201793 pages
- 25 Secrets of The Browser Developer ToolsNo ratings yet25 Secrets of The Browser Developer Tools8 pages
- Data Structure and Algorithmic Thinking With Python Data Structure and Algorithmic Puzzles PDF95% (21)Data Structure and Algorithmic Thinking With Python Data Structure and Algorithmic Puzzles PDF471 pages
- React - Js Book - Solid Understanding of A Hard To Learn The Basics of ReactJS Programming - Greg Sidelnikov100% (3)React - Js Book - Solid Understanding of A Hard To Learn The Basics of ReactJS Programming - Greg Sidelnikov113 pages
- Level 5 Diploma in Computing Qualification SpecificationNo ratings yetLevel 5 Diploma in Computing Qualification Specification49 pages
- Python Programming For Beginners - Learn Python Programming in 24 Hours PDF100% (21)Python Programming For Beginners - Learn Python Programming in 24 Hours PDF133 pages
- Class 9 Computer Science-Chapter 3 Introduction To JavascriptNo ratings yetClass 9 Computer Science-Chapter 3 Introduction To Javascript18 pages
- JavaScript Goodies 2nd Edition Joe Burns PDF DownloadNo ratings yetJavaScript Goodies 2nd Edition Joe Burns PDF Download37 pages
- Beginning Javascript 4th Edition Paul Wilton 2024 Scribd Download100% (4)Beginning Javascript 4th Edition Paul Wilton 2024 Scribd Download55 pages
- A.M.Senthilkumar: Changepond Technologies LTDNo ratings yetA.M.Senthilkumar: Changepond Technologies LTD15 pages
- The Bible's Difficult Scriptures EXPLAINED!93% (69)The Bible's Difficult Scriptures EXPLAINED!131 pages
