Bootstrap Get Started
- If you do not want to download Bootstrap library , you can include it from a CDN . CDN stands for Content Delivery Network.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
- Add the HTML5 doctype , Bootstrap uses HTML elements and CSS properties ,you have to used
HTML5 doctype at the top of the page with proper character set.Below is the example , how to include HTML5 doctype to the page.<!DOCTYPE html><html lang="en"><head><meta hcharset="utf-8"><title></title></head><body></body></html>
- Bootstrap is mobile-first ,To ensure proper rendering and touch zooming,
Tag is used inside the element.Below is the example , how it is used.
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
width=device-width :This code set width of page with the device width ,for example a desktop computer dispaly with may be 800px ,so the browser window will 800px wode , a mobile display width may be 50px , the browser window will be 50px wide.
initial-scale=1:Set the zooming level when the page is first loaded.1.0 means that the page does not zoom.Containers container is used to wrap the site contents.Two container class mainly used
.container -fixed width responsive container
.container-fluid -full width responsive container ,span the entire viewport width.
My First Bootstrap Application
Code
<!DOCTYPE
html>
<html
lang
=
"en">
<head>
<meta
charset
=
"utf-8">
<meta
name
=
"viewport"
content
=
"width
= device-width, initial-scale = 1">
<title>My
First Bootstrap Example</title>
<link
href
=
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
rel
=
"stylesheet">
<script
src
=
"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script
src
=
"https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script
src
=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src
=
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
Bootstrap
is free and open source library for website development and designing
purpose. The main content of Bootstrap is HTML and CSS. Bootstrap was
developed by Mark Otto and Jacob Thorn at Twitter. Bootstrap is a
front end framework designing purpose only. Bootstrap 4 is the latest
version Bootstrap , which is faster and responsive design for mobile
first websites.
A
Responsive design is that , a website automatically adjust itself on
device view . A Responsive design will render different view on a
desktop and a mobile phone.The design will adjust itself for larger
and small screen.
</div>
</body>
</html>
Output :
Desktop
Modile
Palmtop
Layout of container and container-fluid
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Job</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div
class="container"
style="border-style:
solid;">
<h1>Container</h1>
<p>Example
of Container</p>
<p><b>You
will Notice , this is not full page width</b></p>
</div>
<br
/>
<br
/>
<div
class="container-fluid"
style="border-style:
solid;">
<h1>Container-fluid</h1>
<p>Example
of Container-fluid</p>
<p><b>You
will Notice , this is of full page width</b></p>
</div>
<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>
</body>
</html>
Output
