2. • Bootstrap is a free front-end framework for faster and easier web
development
• Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other,
as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs
03
What is Bootstrap?
3. Responsive web design is about creating web sites which
automatically adjust themselves to look good on all devices,
from small phones to large desktops.
03
What is Responsive Web Design?
4. 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, mobile-first styles are part of the core
framework
Browser compatibility: Bootstrap 5 is compatible with all modern browsers
(Chrome, Firefox, Edge, Safari, and Opera). Note that if you need support for
IE11 and down, you must use either BS4 or BS3.
03
Why Use Bootstrap (Advantages)?
7. Add the HTML5 doctype
Bootstrap 5 uses HTML elements and CSS properties that require the HTML5
doctype.
Always include the HTML5 doctype at the beginning of the page, along with
the lang attribute and the correct title and character set:
03
<!DOCTYPE html>
8. The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data.
<meta> tags always go inside the <head> element, and are typically used to
specify character set, page description, keywords, author of the document,
and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search
engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the
user's visible area of a web page), through the <meta> tag (See "Setting The
Viewport" example below). 03
HTML <meta> Tag
9. ASCII was the first character encoding standard.
ASCII defined 128 different characters that could be used on the internet:
numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( )
@ < > .
ISO-8859-1 was the default character set for HTML 4. This character set
supported 256 different character codes. HTML 4 also supported UTF-8.
03
From ASCII to UTF-8
10. <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html> 03
First Web Page With Bootstrap 5
13. John Alexis
He is lorem ipsum dolor sit
amet. He've been lorem
ipsum with many ipsum
constecture
CEO
Mikha Alexis
He is lorem ipsum dolor sit
amet. He've been lorem
ipsum with many ipsum
constecture
CTO
Diana Alexis
He is lorem ipsum dolor sit
amet. He've been lorem
ipsum with many ipsum
constecture
H.R Manager
Meet The Executives
The lorem ipsum dolor sit amet
07
14. Meet The Executives
The lorem ipsum dolor sit amet
John
Designer
Albert
Designer
Nia
Designer
Lara
Designer
Sotic
Designer
08
15. Our Services
The lorem ipsum dolor sit amet
MOBILE
SERVICES
we've been lorem ipsum with many
ipsum constecture
MOBILE
SERVICES
we've been lorem ipsum with many
ipsum constecture. Maecenas faucibus
mollis interdum.
MAIL
SERVICES
we've been lorem ipsum
with many ipsum
constecture. Maecenas
faucibus.
REBRANDING
SERVICES
we've been lorem ipsum with many
ipsum constecture. Maecenas faucibus
mollis interdum.
MOBILE
SERVICES
we've been lorem ipsum with many
ipsum constecture
lorem ipsum with ipsum constecture
lorem ipsum with lorem ipsum
dedicated
16
16. From web to prototype.
We create stunning design.
We deliver dreams.
Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta
felis euismod semper
Presentation name goes here
3 Times Award Winning Company
2012, 2013, 2014
19
Replace this overlay with your picture and set transparency to 80%
Or simply delete it if you want plain background
