Bootstrap

What is Bootstrap?
▪ 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

2
Static Web Page
▪ Contains Web pages with fixed content.
▪ Called flat page or stationary page that is delivered to the user’s web browser
exactly as stored.
▪ Are the most basic type of website and are the easiest to create.
▪ Not require any Web programming or database design.
▪ Works well for small websites,
▪ Difficult to maintain when large sites with hundreds or thousands of pages
difficult to maintain.

3
Responsive Web Design
▪ Strategy for providing custom layouts to devices based on the size of the
viewport (browser window).

▪ Serve a single HTML document to all devices

▪ Apply different style sheets based on the screen size in order to provide the
most optimized layout for that device

4
Bootstrap Versions

▪ Bootstrap 5 (released 2021) is the newest version of Bootstrap (released

2013); with new components, faster stylesheet and more responsiveness.

▪ Bootstrap 5 supports the latest, stable releases of all major browsers and
platforms. However, Internet Explorer 11 and down is not supported.

▪ The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that

Bootstrap 5 has switched to vanilla JavaScript instead of jQuery.

5
Why Use Bootstrap?
Advantages of Bootstrap:

▪ 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.

6
Why Use Bootstrap?

7
Bootstrap Official WebSite
https://www.getbootstrap.com

Download Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop
and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript,
TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtimes
(such as C++, C#, Java, Python, PHP, Go, .NET).
Visual Studio Code - Code Editing. Redefined

8
Installation
Go to Download · Bootstrap v5.2 (getbootstrap.com)

Three types of bootstrap installation:

▪ Option 1: Download Bootstrap to get the compiled CSS and JavaScript, source code, or
include it with your favorite package managers like npm, RubyGems, and more.

▪Option 2: If you don't want to download and host Bootstrap 5 yourself, you can include it
from a CDN (Content Delivery Network). jsDelivry provides CDN support for Bootstrap's
CSS and JavaScript.

▪Option 3: NPM (Node Package Manager)

9
Option 1:Download CSS and JS
Option 1:Download CSS and JS

10
Add CSS and JS folders to Your Project
1. Add CSS and JS folders to your project

2. Add the following links in the head tag of the HTML structure.

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/bootstrap.bundle.js"></script>

11
Option 2: Bootstrap CDN
CDN : Content Delivery Network

12
Option 2: Bootstrap CDN

13
Option 2: Bootstrap CDN
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.
css" rel="stylesheet" integrity="sha384-
gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min
.js" integrity="sha384-
Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>

14
Meta Tag
Syntax:

<meta name="viewport" content="width-device-width,initial-scale=1">

▪ A viewport element gives the browser instructions on how to control the page's dimensions and
scaling.

▪ The width-device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).

▪ The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the
browser.

15
Viewport
▪is the user's visible area of a web page
▪ will give the browser instructions on how to control the page's dimensions and
scaling.
▪ varies with the device, and will be smaller on a mobile phone than on a
computer screen.
▪ fixed size web pages were too large to fit the viewport when we surfing the
internet using tablets and mobile phones.

16
Grid System
▪ Bootstrap's grid system is built
with flexbox and 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:

17
Grid Classes
The Bootstrap 5 grid system has six classes:
•.col- (extra small devices - screen width less than 576px)
•.col-sm- (small devices - screen width equal to or greater than 576px)
•.col-md- (medium devices - screen width equal to or greater than 768px)
•.col-lg- (large devices - screen width equal to or greater than 992px)
•.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
•.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you want to set the same widths for sm and md, you
only need to specify sm.

18
Container
▪ Outermost grid element
▪ Three different containers
1. .container : sets max-width
2. .container-fluid : width:100%
3. .container-{breakpoint}
1. xs : mobile (<576 px)
2. sm: tablets (>576 px>
3. md: desktops (>768 px)
4. lg: extra desktops (>992 px)
5. xl : extra large (>1200 px)

19
Container and Container-fluid

20
Container-{breakpoint}

21
Container-{breakpoint}

22
Basic Columns
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2 </div>
<div class="col"> Column 3</div>
</div>

23
Columns with Size
▪ Col-3
▪ Col-4
▪ Col-8
▪ Col-6

24
Columns with Breakpoints

25
Columns with Breakpoint
The following example shows how to create four
equal-width columns starting at tablets and scaling to
extra large desktops.
On mobile phones or screens that are less than 576px wide, the
columns will automatically stack on top of each other:
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>

26
Offsetting columns
▪You can offset grid columns in two ways: our responsive .offset- grid classes and our margin
utilities.

27
Lets' Construct Web Page
with Bootstrap!

28