Web Technology

Topic:
Internet Protocol & HTTP
By Prof. Bhavana A. Khivsara ( Assistant Professor, SNJB’s Late Sau K. B. Jain COE, Chandwad)
Blog: https://bhavanakhivsara.wordpress.com/
Youtube Channel: https://www.youtube.com/@bhavanakhivsara/playlists
Internet

● The Internet is a vast network that connects computers all over the
world.
● Through the Internet, people can share information and
communicate from anywhere with an Internet connection.
 Protocol

❏ 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
Internet Protocols

● SMTP(Simple Mail Transfer Protocol)

● PPP(Point to Point Protocol)
● FTP (File Transfer Protocol)
● SFTP(Secure File Transfer Protocol)
● HTTP(Hypertext Transfer Protocol)
● HTTPS(Hypertext Transfer Protocol Secure
● TELNET(Terminal Network)
● POP3(Post Office Protocol
 WWW- World Wide Web

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
HTTP

HTTP

Hyper Text Transfer Protocol

 HTTP Protocol

❏ HTTP is a TCP/IP based communication protocol

❏ HTTP is used to deliver data (HTML files, image files, query results, etc.)
on the World Wide Web.
❏ This is an Application Layer protocol.
❏ The default port is TCP 80
 Web and HTTP

❏ Web page consists of objects

❏ Object can be HTML file, JPEG image, Java applet, audio file,…
❏ Web page consists of base HTML-file which includes several referenced
objects
❏ Each object is addressable by a URL
❏ Example URL:
HTTP Protocol Model
HTTP Request and Response Message
HTTP Request Messge
 HTTP request message Example

request line
(GET, POST, GET /somedir/page.html HTTP/1.1
HEAD commands) Host: www.someschool.edu
User-agent: Mozilla/4.0
header Connection: close
lines Accept-language:fr
Carriage return,
line feed (extra carriage return, line feed)
indicates end
of message
HTTP Response Message
HTTP response message example

status line
(protocol
status code HTTP/1.1 200 OK
status phrase) Connection close
Date: Thu, 06 Aug 1998 12:00:15 GMT
header Server: Apache/1.3.0 (Unix)
lines Last-Modified: Mon, 22 Jun 1998 …...
Content-Length: 6821
Content-Type: text/html
data, e.g.,
requested data data data data data ...
HTML file
Web Client and Web Server

https://hackernoon.com/http-made-easy-understanding-th
e-web-client-server-communication-yz783vg3
What is Web Server?

● A web server is a computer that runs websites

● The main job of a web server is to display website content through storing, processing and
delivering web pages to users.

Examples of Web Servers

● Apache web server – the HTTP web server
● Apache Tomcat
● Microsoft’s Internet Information Services (IIS) Windows Server
● Nginx web server
● Lighttpd
● Jigsaw
What is Web Browser?

Web Browsers are software installed on your PC. To access the Web you need a web browsers.

Examples of Web Browsers

● Netscape Navigator,
● Google Chrome
● Microsoft Internet Explorer
● Mozilla Firefox.
What is 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
Web Technology

Topic:
HTML
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad
Different Web Technologies

● HTML ● SQL
● XHTML ● ASP
● CSS ● ADO
● XML ● PHP
● JavaScript ● .NET
● VBSCRIPT ● SMIL
● DOM ● SVG
● DHTML ● FLASH
● AJAX ● Java applets
● E4X ● Java servlets
● WMLScript ● Java Server Page
 List of Technologies

Client Side Technologies Server Side Technologies Advanced Technologies

● HTML, CSS, JavaScript, ● ASP, PHP, Perl, JSP, Servlets ● XML, XSLT, RSS, Atom
VBScript ● ASP.NET, Java ● X-Path, XQuery, WSDL
● XHTML, DHTML, WML, AJAX ● Ruby on Rails, GRAIL Framework
● MySQL, SQL Server, Access
● FLASH ● REST, SOAP

Frameworks Frameworks
● EmberJS ● ExpressJS
● AngularJS ● Django
● ReactJs
● BackboneJS ● laravel
● VueJS ● NodeJS
How to choose a technology?

Depends on:
● What is the type of content?
● Who is your audience?
● Who will modify your content?
● What are your Future Plans?
● Availability of technology?
● Your previous experience?
● Portability and Data sharing
Web - Domain Names & Extension Types

•A domain name is the part of your Internet address that comes after "www". For example, in
Tutorialspoint.com the domain name is tutorialspoint.com.
•Some Domain Extensions are as mentioned below
•.com − Stands for company/commercial, but it can be used for any website.
•.net − Stands for network and is usually used for a network of sites.
•.org − Stands for organization and is supposed to be for non-profit bodies.
•.us, .in − They are based on your country names so that you can go for country specific domain extensions
•.biz − A newer extension on the Internet and can be used to indicate that this site is purely related to business.
HTML

HTML

Hyper Text Markup Language

HTML Intro

•HTML stands for Hyper Text Markup Language

•HTML is the standard markup language for creating Web pages
•HTML 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 Tags

● 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 Page Structure
HTML Elements

● Headings,
● paragraphs,
● line break,
● Text Formatting (Value Addition)
● colors and fonts,
● links,
● Hyperlink-anchor tag ( Value Addition)
● images
● lists,
● tables,
● frames and forms,
● Span and Div tag ( Value Addition)
HTML- Heading Tags

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines
the least important heading:

Output
 HTML- Paragraph Tag, Line Break and Horizontal Line

<p> </p> is used for paragraph tags.

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

<br> is used for Line break- ts is Singular Tag

&nbsp for space

<hr> is used to add Horizontal line.

Its is Singular Tag
<b></b> bold

Text Formatting Tags

<i></i> italicized
<u></u> underlined
 superscript
Sample

Sample
subscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
Fonts & Colors

<Font> Text Comes Here </Font>

What attributes can use with Font tag:

● face
● size
● color
 Fonts & Colors

● You can set font face using face attribute

● Example:- <font face = "Times New Roman" > Hello </font>
● face
● size
● color
 Fonts & Colors

● You can set content font size using size attribute.

● The range of accepted values is from 1(smallest) to 7(largest).
● face ● The default size of a font is 3
● Example:- <font size = "5"> Hello </font>
● size
● color
 Fonts & Colors

● You can set font color using color attribute.

● face ● You can specify the color either by color name or hexadecimal
code for that color.
● size ● <font color = "#FF00FF"> Hello </font>
● <font color = "red"> Hello </font>
● color
 Fonts & Colors

● You can set font face using face attribute

● Example:- <font face = "Times New Roman" > Hello </font>

● You can set content font size using size attribute.

● The range of accepted values is from 1(smallest) to 7(largest).
● face ● The default size of a font is 3
● Example:- <font size = "5"> Hello </font>
● size
● You can set font color using color attribute.
● color ● You can specify the color either by color name or hexadecimal
code for that color.
● <font color = "#FF00FF"> Hello </font>
● <font color = "red"> Hello </font>
 HyperLinks- Value Addition

The <a> tag defines a hyperlink, which is used to link from one page to another

The href attribute of <a> element indicates the link's destination

The target attribute specifies where to open the linked document.

Example- target = _blank - Opens the linked document in a new window or tab
 HyperLinks

Link to a document called a1.html in the same directory <a href="a1.html"> Click </a>

Link to a document called parent.html in the parent directory <a href="../parent.html"> Click </a>

Link to a document called a1.html in the subdirectory WTL <a href="WTL/a1.html"> Click </a>

Link to an external Web site snjb.org <a href="http://www.snjb.org">Click Here</a>

HyperLinks

Link to the 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 ...
 Link tag

<head>
<link rel="stylesheet" href="styles.css">
</head>

Link tag is used to Link to an external style sheet

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
 Images- img tag

<img src= “index.jpeg” >

src Location of image file (relative or absolute)

alt Substitute text for display (e.g. in text mode)
img tag height Number of pixels of the height
attributes
width Number of pixels of the width
border Size of border, 0 for no border

<img src= “index.jpeg” alt= “Home page” height= "500" width="600" border= “2” >
List tag

List
Types
Ordered Unordered Definition

<ol> <ul> <dl>

 List tag- Ordered List

<ol> <ol type="A" > <ol type="a" >

<li>Apple</li> 1. Apple <li>Apple</li> A. Apple <li>Apple</li>
<li>Orange</li> 2. Orange <li>Orange</li> B. Orang <li>Orange</li>
<li>Grapefruit</li> 3.Grapefruit <li>Grapefruit</li> C. Grapefruit <li>Grapefruit</li>
</ol> </ol> </ol>

<ol type="1" > <ol type="I" > <ol type="i" >

<li>Apple</li> 1. Apple <li>Apple</li> I. Apple <li>Apple</li>
<li>Orange</li> 2. Orange <li>Orange</li> II. Orang <li>Orange</li>
<li>Grapefruit</li> 3.Grapefruit <li>Grapefruit</li> III. Grapefruit <li>Grapefruit</li>
</ol> </ol> </ol>
 List tag- Unordered List

<ul > <ul type="disk" >

<li>Apple</li> ● Apple <li>Apple</li> ● Apple
<li>Orange</li> ● Orange <li>Orange</li> ● Orange
<li>Grapefruit</li> ● Grapefruit <li>Grapefruit</li> ● Grapefruit
</ul> </ul>

<ul type="Square" > <ul type="Circle" >

❏ Apple
<li>Apple</li> <li>Apple</li> ○ Apple
<li>Orange</li> ❏ Orange
<li>Orange</li> ○ Orang
<li>Grapefruit</li> ❏ Grapefruit
<li>Grapefruit</li> ○ Grapefruit
</ul> </ul>
 List tag- Definition List

● Create definition lists using <dl>

● definition in <dd> tag
● text is in <dt> tag,

<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
HTML Table
 Tag Description
<table> Defines a table
HTML Table <th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Table

<tr> <th> <th> <th>

<tr>
<tr>
<tr>

<td> <td> <td>

HTML Table Example-1

Student Database Table

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
 HTML Table Example-1

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

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
HTML Table Example-2

<html>
<body>
<table border=1 width=50% cellspacing=0>

<tr bgcolor=red>
<th>RollNo</th>
<th>Name</th>
<th>Address</th>
</tr>
HTML Table Example-3

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
4 Sameer Chandwad
5 Varun Bhopal
HTML Table Example-3

<html>
<head>
<style>
tr:nth-child(even)
{
background-color:skyblue;
}
</style>
</head>

<body>
HTML Table Example-4

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
4 Sameer Chandwad
5 Varun Bhopal
HTML Table Example-4

<html>
<body>
<table border=1 width=50% cellspacing=0>
<colgroup>
<col style="background-color:skyblue">
</colgroup>
<tr>
<th>RollNo</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
HTML Table Example- 5

Month Savings <thead>

January $100
<tbody>
February $80
Sum $180 <tfoot>
HTML Table Example- 5

<html> <tr>
<body> <td>Feb</td>
<table border=1 bordercolor=black> <td>$80</td>
<thead style=color:green> </tr>
<tr> </tbody>
<th>Month</th>
<tfoot style=color:red>
<th>savings</th> <tr>
</tr> <td>Total</td>
</thead> <td>$180</td>
</tr>
<tbody style=color:blue> </tfoot>
<tr>
<td>Jan</td> </table>
<td>$100</td> </body>
</tr> </html>
 HTML Table Example-6

Time/Day Monday Tuesday Wednesday Thursday

10:00-11:00 DBMS Maths DBMS DBMS
11:00-12:00 WT DBMS WT Maths
12:00-12:30 Lunch Break
12:30-1:30 Maths DBMSL(PR) Maths DBMSL(PR)
1:30-2:30 ADS T1 Batch ADS T2 Batch
<html> <tr>
<body>
<td>12:00-12:30 </td>
<table border=1 width=50% align=center>
<td colspan=4 align=center
<tr> bgcolor=yellow>Lunch Break</td>
<th>Time/Day </th>
</tr>
<th> Mon </th>
<th> Tue </th>
<th> Wed </th> <tr>
<th> Thus </th> <td>12:30-1:30 </td>
</tr> <td>Maths </td>
<td rowspan=2>DBMSL(PR) Batch T1
<tr> </td>
<td>10:00-11:00 </td> <td>Maths </td>
<td>DBMS </td> <td rowspan=2>DBMSL(PR) Batch T2</td>
<td>Maths </td> </tr>
<td>DBMS </td>
<td>DBMS</td> <tr>
</tr> <td>1:30-2:30 </td>
<td>ADS </td>
<tr> <td>ADS </td>
<td>11:00-12:00 </td> </tr>
<td>WT </td>
</table>
<td>DBMS </td>
<td>WT </td>
</body>
<td>Maths</td> </html>
</tr>
Web Technology

Topic:
Div and Span tag
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad
 Span and Div tag- Value Addition

•The <span> tag is an inline 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.
 Span and Div tag- Value Addition

<html> <html>
<body> <body>
My mother has <span style="color:blue"> blue My mother has <div style="color:blue"> blue </div>
</span> eyes and my father has <span eyes and my father has <div style= "color:green">
style="color:green">dark green</span> eyes. dark green</div> eyes.
</body> </body>
</html> </html>
Web Technology

Topic:
HTML Frames
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad
HTML Frames

•Example
● A simple three-framed page:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
● Each <frame> in a <frameset> can have different attributes, such as border,
scrolling, the ability to resize, etc.
Web Technology

Topic:
HTML Forms
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad
HTML Form Example-1-
Login Page
HTML Forms – Example 2 Registration Form
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
 HTML Input Types

❏ <input type="text"> ❏ <input type="checkbox">

❏ <input type="number"> ❏ <input type="radio">
❏ <input type="password"> ❏ <input type="file">
❏ <input type="date"> ❏ <input type="reset">
❏ <input type="email"> ❏ <input type="submit">
❏ <input type="color"> ❏ <input type="button">
HTML Form Example-1- Login Page
<html>
<body bgcolor=green> <tr>
<br><br><hr> <td></td>
<h2> Welcome to My Account Login </h2>
<td>
<input type=reset value=Reset style=color:green>
<table>
<tr>
<td>Enter User Name:</td> <input Type =submit value=Login style=color:green>
<td> </td>
<input type=text placeholder="Enter Username Here"> </tr>
</td></tr> </table>
<tr> <br><br><hr>
<td>Enter Password:</td>
</body>
<td>
<input type=password placeholder="Enter Password Here"> </html>
</td></tr>
HTML Forms – Example 2 Registration Form
<html> <tr>
<body > <td>DOB </td>
<h2 align=center> Registration Form </h2> <td><input type=date></td>
<table b> </tr>
<tr>
<td>My Photo</td> <tr> <td>color </td>
<td><input type=file></td> <td><input type=color></td> </tr>
</tr>
<tr>
<tr> <td>Gender </td>
<td>Name</td> <td>
<td><input type=text></td> <input type=radio>Male
</tr> <input type=radio>FeMale
</td>
<tr> </tr>
<td>Address</td>
<td><input type=text></td> <tr>
</tr> <td>Hobbies </td>
<td>
<tr> <input type=checkbox>Cricket
<td>Mobile </td> <input type=checkbox>Hockey
<td><input type=text></td> </td>
</tr> </tr>
 <tr>
<tr>
<td>Comment </td>
<td>Select Branch </td> <td>
<td> <textarea col=10 rows=3>
<select size=2> </textarea>
<option> Computer</option> </td>
<option> IT</option> </tr>
<option> Civil</option>
<tr>
</select>
</td> <td colspan=2 align=center>
</tr> <button >Click</button>
<button >Reset</button>
<tr> </td>
<td>Rate this site </td> </tr>
<td>
<input type=number min=1 max=5> </body>
</td> </html>
</tr>
Web Technology

Topic:
Difference Between HTML &
HTML5
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad
 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 simple <meta
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> charset="UTF-8">

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 technologies such as VML, Vector graphics is integral part of HTML5 e.g. SVG and canvas
Silverlight, Flash etc

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

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

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

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

Works with all old browsers Supported by all new browser.

Web Technology

Topic:
CSS- Cascading Style sheet
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad
CSS

CSS

Cascading Style Sheets

CSS-Syntax

SPV

Selector Property Value

Selector{ Property : Value;}

P { color : red ;}
 CSS-Syntax

Selector

HTML tag Id Class

p { color : red ;} #a { color : red ;} .a { color : red ;}

<p> Hello </p> <p id=a> Hello</p> <p class=a> Hello</p>
Types of CSS

Types of CSS

Inline Internal External

Types of CSS

Write CSS code inside HTML Tag

CSS code as attribute of HTML tag

Inline
CSS Code starts with Style

Example:
<p style= “color:red” >
Types of CSS

Write CSS code inside HTML

Head Tag
Use <style> tag inside Head tag

Internal Example:
CSS <head>
<style>
p { color: red;}
</style>
</head>
Types of CSS

2 Files
1> .html 2> .css

write css code in .css file

External
CSS Give link of .css file inside .html file,
under head tag, in <link> tag
 External CSS Example

a1.html a2.css

<html>
<head>
<link rel="stylesheet" type="text/css" href="a2.css"> p { color: red;}
</head>
<body>
<p> Hello Good Morning </p>
</body> </html>
 When to use which Types of CSS

Types of CSS

Inline Internal External

When your website is having

When you want to use css When you want to use css multiple html files and you
property for only one tag in property for more than one tag want same style to be applied
html and you have only one html file. for every html page
CSS Properties

❏ CSS Color
❏ CSS background
❏ CSS Border
❏ CSS Text
❏ CSS Font
❏ CSS Margin
❏ CSS Padding
❏ CSS Table
 CSS Properties- Color

❏ color: value
❏ Example:
❏ color : blue;
CSS Properties-background

● background-color
○ Example:
■ h1 { background-color: green; }
● background-image
○ Example:
■ body { background-image: url("paper.gif");}
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 -Text

❏ color
❏ background-color
❏ text-alignment (left, right, center, justify)
❏ text-decoration (overline, underline, linethrough)
❏ text-transform (uppercase, lowercase, capitalize)
CSS Properties- Font

❏ Font-family
❏ Font-Style( normal, italic)
❏ font-size( in px)
❏ font-weight(normal,bold)
 CSS Properties- Margin

❏ margin-top
❏ margin-right
❏ margin-bottom
❏ margin-left
CSS Properties- Padding

❏ padding-top
❏ padding-right
❏ padding-bottom
❏ padding-left
CSS Box Model
CSS Properties- Table

❏ tr:hover {background-color: grey;}

❏ tr:nth-child(even) {background-color: green;}
❏ Size
❏ Border
Web Technology

Topic:
Bootstrap
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad
Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework

for developing responsive, mobile-first websites.

Bootstrap History
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 Grid
Bootstrap Grid

● Bootstrap's grid system allows up to 12 columns across the page.

● If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns

● Bootstrap's grid system is responsive, and the columns will re-arrange

automatically depending on the screen size.
 Bootstrap Grid

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

<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
.col-sm-4 .col-sm-4 .col-sm-4

<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
Bootstrap- Where to get?

Where to get Bootstrap?

Two Options

Download Bootstrap Include Bootstrap

from getbootstrap.com from a CDN
<html> CDN- Mandatory Lines for
Bootstrap in every code
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
Change value of Col-*-*
</body> according to your need
</html>
Example-
References

Websites:

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