LESSON 3:

BUILDING YOUR FIRST

WEB PAGE
Bootstrap
WHAT IS Bootstrap ?
Bootstrap

- is the most popular HTML, CSS, and JavaScript framework for

developing responsive, mobile-first websites.
WHY USE Bootstrap ?
ADVANTAGES OF Bootstrap
:
ADVANTAGES OF Bootstrap
:

Easy to use.
ADVANTAGES OF Bootstrap
:

Easy to use.
Responsive features.
ADVANTAGES OF Bootstrap
:

Easy to use.
Responsive features.
Mobile-first approach.
ADVANTAGES OF Bootstrap
:

Easy to use.
Responsive features.
Mobile-first approach.
Browser compatibility.
WHERE TO GET Bootstrap ?
There are two ways to start using Bootstrap on your own web
site.

You can:

Download Bootstrap from getbootstrap.com

Or

Include Bootstrap from a CDN

CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

JS
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
BOOTSTRAP GRID SYSTEM

It uses a series of containers, rows, and columns to layout

and align content.
GRID 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 laptops and desktops - screens equal to or greater than

1200px wide)
THANK YOU
BOOTSTRAP