Web Technology

Unit-I

By
Prof. Priyanka S. Jadhav
(Assit. Prof., Comp. Dept. , SKNCOE, Pune)
Contents
 Internet
 Basic Internet Protocols
 World Wide Web (www)
 Web Clients
 Web Servers
 HTTP Request Message
 HTTP Response Message
 HTML
 HTML Elements
 CSS
 Bootstrap
Internet
• The Internet is a vast network that connects
computers all over the world.
• Internet is a global network that connects billions
of computers across the world with each other and
to the World Wide Web.
• It uses standard internet protocol suite (TCP/IP) to
connect billions of computer users worldwide.

• Through the Internet, people can share

information and communicate from anywhere with
an Internet connection.
ISP
• ISP stands for Internet Service Provider.
• They are the companies who provide you service
in terms of internet connection to connect to the
internet.
• You will buy space on a Web Server from any
Internet Service Provider. This space will be used
to host your Website.

Examples of ISP Providers:

• Reliance
• Airtel
• BSNL
Basic Internet Protocols
Protocol:
• Set of standard rules that allows different types of
computers to communicate with each other.
• The IP protocol ensures that each computer that is
connected to the Internet is having a specific serial
number called the IP address
Examples:
• SMTP (Simple Mail Transfer Protocol)
• FTP (File Transfer Protocol)
• SFTP (Secure File Transfer Protocol)
• HTTP (Hypertext Transfer Protocol)
• HTTPS (Hypertext Transfer Protocol Secure
World Wide Web (WWW)
 World Wide Web, which is also known as a Web, is a
collection of websites or web pages stored in web
servers and connected to local computers through the
internet.

 Users can access the content of these sites from any

part of the world over the internet using their devices
such as computers, laptops, cell phones, etc
Website & Web-pages
 A website is a collection of one or many web pages
 Website is a set of related web pages located under
a single domain name
 Web page consists of base HTML-file which includes
several referenced objects
 Object can be:

◦ Text / Hyper Text

◦ Image
◦ Video
◦ Audio
◦ HTML file
 Each website is accessible by a unique URL
URL (Uniform Resource Locator)
 URL is a unique identifier used to locate a resource
on the Internet.
 It is also referred to as a web address
 URLs consist of multiple parts -- including a
protocol and domain name -- that tell a web
browser how and where to retrieve a resource
 Example:
Client-Server Model

 Client is a program/application that runs on the local

machine, requesting service from the server.
 A client device is a machine on which client program
is running
 e.g: Desktops, SmartPhones, Laptops, etc.
Client-Server Model
 Server is the one who provides requested services
to the client.
 There can be various types of servers:
◦ web server,
◦ file server,
◦ mail server,
◦ database server,
◦ cloud server,
◦ DNS server,

… and many more.

Web Client & Web Server
Web Client
 A Web Client is an application that communicates with a
web server, using Hypertext Transfer Protocol (HTTP).
 Web client requests for the web pages to the web server but
don’t store them.
 When you search for a particular web page through your
browser, it retrieves the page from the appropriate server
and displays the result.
 Web browser is an example of a web client.
 Some of the examples of web browsers are:
◦ Google Chrome
◦ Microsoft Internet Explorer
◦ Mozilla Firefox
◦ Opera
◦ Apple Safari
Web Servers
 A Web Server is a computer that provides
requested services to the web client.
 The basic objective of the web server is to store,
process and deliver web pages to the users.
 Web servers uses the HTTP protocol to
communicate with client, so they are often called
HTTP servers.
 Examples of Web Servers:
◦ Apache web server – the HTTP web server
◦ Apache Tomcat
◦ Microsoft’s Internet Information Services (IIS) Windows
Server
HTTP Protocol
HTTP Protocol
 HTTP protocol allows us to access & deliver the data
over the world wide web.
 It transfers the data in the form of plain text, audio,
video, HTML files, image files, query results, etc.
 HTTP is two party protocol (Client-Server)
 HTTP is a TCP/IP based communication protocol
 HTTP is stateless protocol
 The default port is TCP 80
HTTP Protocol Model
HTTP Request Message
 HTTP requests are messages sent by the client to
initiate an action on the server.
HTTP Methods
 Four Important HTTP Methods:

1. GET get data

2. POST create data
3. PUT update data
4. DELETE delete data
HTTP Request Message
Example
 Example:
HTTP Request Message
Example
 Example:
HTTP Response Message
 HTTP Response broadly has 3 main components:
◦ Status Line
◦ Headers
◦ Body (Optional)
HTTP Req V/S Res Message
Different Web
Technologies
Client Side
 Web Technologies Technologies
Server Side
Technologies
HTML
HTML
 HTML stands for Hyper Text Markup Language
 Tim Berners-Lee invented HTML in 1991.
 It is standard markup language for creating
Web pages
 It describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display
the content
HTML Versions

Version Year
HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014
HTML Page Structure
HTML Tags & Elements
 HTML tags are element names surrounded by
angle brackets:
<tagname> content goes here… </tagname>
 HTML tags normally come in pairs like <p> and
</p>
 The first tag in a pair is the start tag, the second
tag is the end tag
 The end tag is written like the start tag, but with
a forward slash inserted before the tag name
HTML Elements
• Headings
• Paragraphs
• Line break
• Text Formatting
• Colors and Fonts
• Hyperlink-Anchor Tag
• Images
• Audios
• Videos
• Lists
• Tables
• Frames and Forms
• Span and Div tag
HTML- Headings
 HTML headings are defined with the <h1> to
<h6> tags.
 <h1> defines the most important heading.
 <h6> defines the least important heading.
HTML- Paragraph, Line Break
and Horizontal Rule
 <p> </p> is used for paragraph tags.

<p>This is my first
paragraph</p>

 <br> is used for Line break.

 &nbsp is used to add a space between words.

 <hr> is used to add Horizontal line. Used to

separate the page content.
HTML Formatting Elements

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
HTML- Fonts & Colors
 Font tag :

<Font> Text Comes Here

</Font>.

 The attributes that can be used with font tag:

1. face
2. size
3. color
HTML- Fonts & Colors
 face attribute :
We can set font face using face attribute :
Example :
<font face = "Times New Roman" > Hello
</font>

 size attribute :
We can set content font size using size attribute.
The range of accepted values is from 1(smallest) to 7(largest).
The default size of a font is 3
Example:
<font size = "5"> Hello
</font>
HTML- Fonts & Colors
 color attribute :
We can set font color using color attribute
can specify the color either by color name or hexadecimal
code for that color.

Example :
<font color = "#FF00FF"> Hello
</font>

.
<font color = "red"> Hello </font>
HTML- HyperLinks
 Anchor Tag:
<a> tag defines a hyperlink,
which is used to link one page to another

 The attributes that can be used with anchor tag:

1. href
2. target


 HTML- HyperLinks
 href attribute :
The href attribute of <a> element indicates the link's
destination
<a href = "http://www.google.com">
Google </a>

 target attribute :
specifies where to open the linked document
Example:
target = _blank - Opens the linked document in a new window or
tab<a href = "http://www.google.com" target =_blank>
Google </a>
 HTML- HyperLinks
Types of Links:

 Link to a document called a1.html in the same directory

<a href="demo.html"> Click Here </a>

 Link to a document called parent.html in the parent directory

<a href="../demo.html"> Click Here </a>

 Link to a document called a1.html in the subdirectory WT

<a href=" WT/demo.html"> Click Here </a>

 Link to an external Web site wikipedia.org

<a href=“https://www.wikipedia.org"> Click Here
</a>
HTML- HyperLinks
Types of Links:

 Link within a same document

Example:

<a href="#section1"> Introduction </a>

<br>
<a href="#section2"> Background </a>

<br>

<h2 id="section1"> Introduction </h2>

------------- Section 1 follows here -----------

<h2 id="section2"> Background </h2>

------------ Section 2 follows here ------------
HTML – Lists
 List Types:
1. Ordered Lists
2. Unordered Lists
3. Description Lists
HTML – Ordered Lists
Ordered Lists

 Example:

<ol>
<li>Apple</li>
1. Apple
<li>Orange</li> 2. Orange
3. Grapefruit
<li>Grapefruit</li
>
</ol>
HTML – Ordered Lists
Ordered Lists

 Example:

<ol type="A" >

<li>Apple</li>
A. Apple
<li>Orange</li> B. Orang
C. Grapefruit
<li>Grapefruit</li
>
</ol>
HTML – Ordered Lists
Ordered Lists

 Example:

<ol type=“I" >

<li>Apple</li>
I. Apple
<li>Orange</li> II. Orang
III. Grapefruit
<li>Grapefruit</li
>
</ol>
HTML – Unordered Lists
Unordered Lists

 Example:

<ul>
<li>Apple</li>
• Apple
<li>Orange</li> • Orang
• Grapefruit
<li>Grapefruit</li
>
</ul>
HTML – Unordered Lists
Unordered Lists

 Example:
<ul
type="Square">
<li>Apple</li>
 Apple
 Orang
<li>Orange</li>
 Grapefruit

<li>Grapefruit</li
>
</ul>
HTML – Unordered Lists
Unordered Lists

 Example:
<ul type=“Circle
">
<li>Apple</li>
o Apple
o Orang
<li>Orange</li>
o Grapefruit

<li>Grapefruit</li
>
</ul>
HTML – Description Lists
Description Lists
<dd> tag definition
<dt> tag text
 Example:
<dl>
<dd>HTML</
dd>
<dt>A markup
language
…</dt>
<dd>CSS</
dd>
<dt>Language
used to
…</dt>
</dl>
HTML – Multimedia
Types of Multimedia:

 Multimedia comes in many different formats. It can be

almost anything you can hear or see, like images,
music, sound, videos, records, films, animations, and
more.

 Important multimedia forms:

1. Image
2. Audio
3. Video
HTML – Images
Types of Links:

 The HTML <img> tag is used to embed an image in

a web page. <img src=
“image_name.jpeg”>

 The <img> tag is empty, it contains attributes

only, and does not have a closing tag.
 The <img> tag has two required attributes:
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image
<img src="url" alt="alternate
text">
HTML – Images
 Other Attributes of <img> tag are:

 Example :

<img src= “logo.jpeg” alt= “Logo Image”

height= "500" width="600" border= “2” >
 HTML – Audio
 To play an audio file in HTML, use
the <audio> element

 HTML Audio Formats :

File Format Media Type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav
HTML – Audio
 Example:
<audio controls>
<source src=“music1.mp3" type="audio/
mpeg">
Your browser does not support the audio
element.
</audio>
 The controls attribute adds audio controls, like play, pause,
and volume.
 The <source> element allows you to specify alternative audio
files which the browser may choose from. The browser will
use the first recognized format.
 The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support
the <audio> element.
HTML – Audio
 The controls attribute adds audio controls, like play,
pause, and volume.
 The <source> element allows you to specify
alternative audio files which the browser may choose
from. The browser will use the first recognized format.
 The text between the <audio> and </audio> tags will
only be displayed in browsers that do not support
the <audio> element.

File Format Media Type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav
 HTML – Video
 The HTML <video> element is used to show a video
on a web page.

 HTML Audio Formats :

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg
HTML – Video
 Example :
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video
tag.
</video>
 The controls attribute adds video controls, like play, pause,
and volume.
 The <source> element allows you to specify alternative
video files which the browser may choose from. The
browser will use the first recognized format.
 The text between the <video> and </video> tags will only
be displayed in browsers that do not support
the <video> element
HTML – HTML Table
 HTML Table :
HTML – HTML Table
 HTML Table Example :

Student Database
HTML – HTML Table
 HTML Table Example :

<html> <tr>
<body> <td>2</td>
<table border=1 width=50% <td>Amit</td>
cellspacing=0> <td>Pune</td>
</tr>
<tr>
<th>RollNo</th> <tr>
<th>Name</th> <td>3</td>
<th>Address</th> <td>Neha</td>
</tr> <td>Mumbai</td>
</tr>
<tr>
<td>1</td> </table>
<td>Bhavana</td> </body>
<td>Nashik</td> </html>
</tr>
HTML – HTML Table
 HTML Table Example 2:

Time Table:
HTML – HTML Table
 HTML Table Example 2 :
<html> <tr>
<body> <td>12:00-12:30 </td>
<table border=1 width=50% <td colspan=4 align=center
align=center> bgcolor=yellow>Lunch Break</td>
<tr> </tr>
<th>Time/Day </th>
<th> Mon </th> <tr>
<th> Tue </th> <td>12:30-1:30 </td>
<th> Wed </th> <td>Maths </td>
<th> Thus </th> <td rowspan=2>DBMSL(PR) Batch T1
</tr> </td>
<tr> <td>Maths </td>
<td>10:00-11:00 </td> <td rowspan=2>DBMSL(PR) Batch
<td>DBMS </td> T2</td>
<td>Maths </td> </tr>
<td>DBMS </td>
<td>DBMS</td> <tr>
</tr> <td>1:30-2:30 </td>
<tr> <td>ADS </td>
<td>11:00-12:00 </td> <td>ADS </td>
<td>WT </td> </tr>
<td>DBMS </td> </table>
<td>WT </td> </body>
<td>Maths</td> </html>
</tr>
HTML – Forms
• HTML forms are used to take user inputs.

• HTML form example

HTML – Form Elements
Tag Description
<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<select> Defines a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

Forms – Different Input
Types
• <input type="text">
• <input type="number">
• <input type="password">
• <input type="date">
• <input type="email">
• <input type="color">
• <input type="checkbox">
• <input type="radio">
• <input type="file">
• <input type="reset">
• <input type="submit">
• <input type="button">
Forms – Example 1
 Forms– Example 1
<html> <tr>
<body bgcolor=“green”> <td></td>
<br><br><hr>
<td><input type=“reset”
<h2> Welcome to My Account
value=“Reset”
Login</h2>
style=“color:green”>
<table> <input Type=“submit”
<tr>
value=“Login”
style=“color:green”></td>
<td>Enter User Name:</td>
<td><input type=“text” </tr>
placeholder="Enter Username </table>
Here"></td> <br><br><hr>
</tr>
</body>
<tr>
</html>
<td>Enter Password:</td>
<td><input type=“password”
placeholder="Enter Password
Here"></td>
Forms – Example 2
Forms – Example 2
<html>
<body >
<h2 align=center> Registration Form
</h2>
<table >
<tr>
<td>My Photo</td>
<td><input type=“file”></td>
</tr>

<tr>
<td>Name</td>
<td><input type=“text”></td>
</tr>

<tr>
<td>Address</td>
<td><input type=“text”></td>
</tr>

<tr>
<td>Mobile </td>
<td><input type=“number”></td>
</tr>
Forms – Example 2

<tr>
<td>DOB </td>
<td><input type=“date”></td>
</tr>

<tr> <td>color </td>

<td><input type=“color”></td>
</tr>

<tr>
<td>Gender </td>
<td><input type=“radio”>Male
<input type=radio>FeMale</td>
</tr>

<tr>
<td>Hobbies </td>
<td><input
type=“checkbox”>Cricket
<input
type=checkbox>Hockey</td>
</tr>
Forms – Example 2

<tr>
<td>Select Branch </td>
<td><select size=“2”>
<option> Computer</option>
<option> IT</option>
<option> Civil</option>
</select>
</td>
</tr>
<tr>
<td>Rate this site </td>
<td>
<input type=“number” min=1
max=5>
</td>
</tr>
Forms – Example 2

<tr>
<td>Comment </td>
<td><textarea col=“10”
rows=“3”>
</textarea></td>
</tr>

<tr>
<td colspan=“2” align=“center”>
<button >Click</button>
<button >Reset</button>
</td>
</tr>

</body>
</html>
HTML – Frames
• HTML frames are used to divide your browser
window into multiple sections where each section
can load a separate HTML document.

• A collection of frames in the browser window is

known as a frameset.

• To use frames on a page we use <frameset> tag

instead of <body> tag.

• The rows attribute of <frameset> tag defines

horizontal frames and cols attribute defines vertical
frames.

• The <frame> tag is not supported in HTML5.

HTML – Frames
• HTML Frame Example 1:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/top_frame.htm" />
<frame name = "main" src = "/main_frame.htm" />
<frame name = "bottom" src =
"/bottom_frame.htm”/>

<noframes>
<body> Your browser does not support frames.
</body>
</noframes>
</frameset>
HTML – Frames
• HTML Frame Example 2:

<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
HTML – iFrames
• HTML5 supports <iframe> tag instead of <frame>
tag

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.google.com" title=“Google

Search">
</iframe>

</body>
</html>
 HTML – Span and Div
 HTML <span> tag is an inline container used to mark up a
part of a text, or a part of a document.
HTML <div> tag is an block-level container used to mark
up a part of a text, or a part of a document.
 The <span> tag is much like the <div> element, but <div>
is a block-level element and <span> is an inline element.
<html>
<html>
<body>
<body>
My mother has <div
My mother has <span
style="color:blue"> blue
style="color:blue"> blue
</div> eyes and my father
</span> eyes and my
has <div style=
father has <span
"color:green"> dark
style="color:green">dark
green</div> eyes.
green</span> eyes.
</body>
</body>
</html>
</html>
 HTML V/S HTML 5
Html Html5

DOCTYPE declaration in Html is too longer DOCTYPE declaration in Html5 is very simple "<!
DOCTYPE html>

character encoding in Html is also longer character encoding (charset) declaration is also very
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 simple <meta charset="UTF-8">
Transitional//EN">

Audio and Video are not part of HTML4 Audio and Videos are integral part of HTML5 e.g.
<audio> and <video> tags.

Vector Graphics is possible with the help of Vector graphics is integral part of HTML5 e.g. SVG and
technologies such as VML, Silverlight, Flash etc canvas

It is almost impossible to get true GeoLocation of user JS GeoLocation API in HTML5 helps identify location of
browsing any website especially if it comes to mobile user browsing any website (provided user allows it)
devices.

.It provides local storage in place of cookies. Html5 use cookies

Not possible to draw shapes like circle, rectangle, Using Html5 you can draw shapes like circle, rectangle,
triangle. triangle.

Does not allow JavaScript to run in browser. JS runs in Allows JavaScript to run in background. This is possible
same thread as browser interface. due to JS Web worker API in HTML5

Works with all old browsers Supported by all new browser.

CSS
 CSS stands for Cascading Style Sheet.
 CSS is used to design HTML page.
CSS - Syntax
CSS - Selectors
CSS - Types
 There are three types of CSS:
 CSS – Inline CSS
Style Attribute :

 Style attribute is used to add an inline CSS

 When you want to use css property for only one tag in html

Example:

<body>
<p style=“color : red“ > This is paragraph </p>
</body>
 CSS – Internal CSS
Style Tag :

 <Style> tag is used to add internal CSS

 We Write CSS code inside HTML Head Tag
 Use <style> tag inside Head tag
 When you want to use css property for more than one tags
in only one html file

<head>
Example: <style>
p { color: red;}
</style>
</head>
 CSS – External CSS
Link Tag :

 Link tag is used to Link to an external style sheet

 Used inside <head> tag
 The <link> tag defines the relationship between the current
document and an external resource
 rel- Required attribute. It specifies the relationship between
the current document and the linked document
 When your website is having multiple html files and you
want same style to be applied for every html page

Example: <head>
<link rel="stylesheet" href="styles.css">
</head>
CSS – External CSS
Example:

Index.html

<html>
<head> style2.css
<link rel="stylesheet"
type="text/css"
<p { color: red;}
href=“style2.css">
</head>
<body>
<p> Hello Good Morning </p>
</body>
</html>
CSS – Some Properties
 CSS Color
 CSS background
 CSS Border
 CSS Text
 CSS Font
 CSS Margin
 CSS Padding
 CSS Table
CSS Properties – Color
Text Color
 color: value
 Example:
{color : blue;}

Background-color
 Example:
h1 { background-color: green; }

Background-image
 Example:
body { background-image: url ("paper.gif");}
 CSS Properties – Text
text-alignment (left, right, center, justify)
 Example:
div {text-align: center;}

text-decoration (overline, underline, linethrough)

 Example:
div {text-decoration: red;}

text-transform (uppercase, lowercase, capitalize)

 Example:
div {text-transform: uppercase;}
 CSS Properties – Font
• Font-family
Example- {font-family: 'Times New Roman', Times, serif;}

• Font-style (normal, italic)

Example- {font-style: italic;}

• Font-size (in px)

Example- {font-size: 50px;}

• Font-weight (normal, bold)

Example- {font-weight: bold;}
CSS – Box Model
 CSS Properties – Border
• border-style (dotted, dashed, solid, double etc)
Example:
P {border-style: dotted;}

• border-width (value in px)

Example:
P {border-width: 5px;}

• border-color (red, blue, green etc)

Example:
P {border-color: red;}

• border-radius (value in px)

Example:
P{border-radius: 12px;}
 CSS Properties – Margin
• margin-top
• margin-right
• margin-bottom
• margin-left
 CSS Properties – Padding
• padding-top
• padding-right
• padding-bottom
• padding-left
 CSS – Table
• tr:hover {background-color: grey;}
• tr:nth-child(even) {background-color: green;}
• Size
• Border
Bootstrap - Introduction
 Bootstrap is the most popular HTML, CSS, and
JavaScript framework for developing responsive,
mobile-first websites.

 Bootstrap was developed by Mark Otto and Jacob

Thornton at Twitter, and released as an open source
product in August 2011 on GitHub.

 In June 2014 Bootstrap was the No.1 project on

GitHub!
Bootstrap - Advantages
 Easy to use: Anybody with just basic knowledge of
HTML and CSS can start using Bootstrap

 Responsive features: Bootstrap's responsive CSS

adjusts to phones, tablets, and desktops

 Mobile-first approach: In Bootstrap 3, mobile-first

styles are part of the core framework

 Browser compatibility: Bootstrap is compatible with all

modern browsers (Chrome, Firefox, Internet Explorer,
Safari, and Opera)
Bootstrap – Where to Get?
 Bootstrap – Including CDN
<html>

<head>

<link rel="stylesheet“
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>

</head>

<body>
<div class="row">
<div class="col-sm-4" style="background-color : pink"> Col1 Data </div>
<div class="col-sm-4" style="background-color : yellow"> Col2 Data </div>
<div class="col-sm-4" style="background-color : lavender"> Col3 Data </div>
</div>
</body>

</html>
 Bootstrap – Grid

 Bootstrap's grid system allows up to 12 columns across

the page.
 You can use all 12 columns individually or you can groups
the columns together to create wider columns.
 Bootstrap – Grid Classes

 There are four classes in Bootstrap Grid System:

xs
(for phones -
screens less than sm
768px wide) (for tablets -
md
screens equal to
or greater than (for small
768px wide) laptops - screens lg
equal to or
greater than (for laptops and
992px wide) desktops -
screens equal to
or greater than
1200px wide)
 Bootstrap – Grid Structure

 Structure of Bootstrap Grid:

<div class="row“>

<div class="col-*-*"></div>
</div>
<div class="row“>

<div class="col-*-*"></div>

<div class="col-*-*"></div>

<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Bootstrap – Grid Example
 Example of Bootstrap Grid:

<div class="row">
<div class="col-sm-
4"></div>
<div class="col-sm-
4"></div>
<div class="col-sm-
4"></div>
</div>
Bootstrap – Some Classes
 Some Bootstrap classes Examples:

 Classes Used for Button:

1. .btn
2. .btn-primary
3. .btn-success
4. .btn-danger
5. .btn-warning
6. btn-info
7. btn-dark
Bootstrap – Some Classes
 How to use classes in code?

<button type="button" class="btn btn-

primary">Primary</button> <button type="button"
class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-
success">Success</button> <button type="button"
class="btn btn-danger">Danger</button> <button
type="button" class="btn
btn-warning">Warning</button> <button type="button"
class="btn btn-info">Info</button> <button
type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn
btn-light">Light</button> <button
Bootstrap – Reference
Use Website:

❏ https://www.w3schools.com/bootstrap/