Scribd
Upload
68 views

Fundamentals of Web Development (Lesson 3)

This document provides an introduction to Bootstrap, including what it is, its advantages, and how to get started using it. Bootstrap is an HTML, CSS, and JS framework for building responsive mobile-first websites. It is easy to use, has responsive features, and takes a mobile-first approach. Bootstrap can be downloaded or included from a CDN. It uses a grid system of containers, rows, and columns to layout content across different screen sizes defined by classes like xs, sm, md, and lg.

Uploaded by

Mary Ann Pateño
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
68 views

Fundamentals of Web Development (Lesson 3)

This document provides an introduction to Bootstrap, including what it is, its advantages, and how to get started using it. Bootstrap is an HTML, CSS, and JS framework for building responsive mobile-first websites. It is easy to use, has responsive features, and takes a mobile-first approach. Bootstrap can be downloaded or included from a CDN. It uses a grid system of containers, rows, and columns to layout content across different screen sizes defined by classes like xs, sm, md, and lg.

Uploaded by

Mary Ann Pateño
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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

You might also like