Bootstrap basics

1. Malik Ali Raza
armaliki.tprofessional@gmail.com
1

2. What is Bootstrap?
2 Malik Ali Raza (I.T Professional)
 Bootstrap is the most popular CSS Framework for developing
responsive and mobile-first websites.
 It is the faster and easier web development framework.
 Easily Create Responsive Web Layout.
 Bootstrap is a free and open-source.
 It contains HTML, CSS and JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface
components.

3. Advantages of Bootstrap
3 Malik Ali Raza (I.T Professional)

4. Other Popular CSS Frameworks:
4 Malik Ali Raza (I.T Professional)

5. Bootstrap JS Components
5 Malik Ali Raza (I.T Professional)

6. Bootstrap CSS Features & Components:
6 Malik Ali Raza (I.T Professional)

7. Bootstrap5 or Version 5
7 Malik Ali Raza (I.T Professional)
 Bootstrap 5 is the most recent and stable version of the Bootstrap
framework.
 Bootstrap is responsive by default, and it takes a mobile-first approach.
 Bootstrap 5 is compatible with the most recent, stable releases of all
major browsers and systems.
 Bootstrap 5 (published in 2021) is the most recent version of Bootstrap
(launched in 2013).
 it includes new components, a quicker style sheet, and improved
responsiveness.

8. Bootstrap4 Vs Bootstrap5 ?
8 Malik Ali Raza (I.T Professional)
BASIS OF BOOTSTRAP 4 BOOTSTRAP 5
Grid System It has 5 tier (xs, sm, md, lg, xl). It has 6 tier (xs, sm, md, lg, xl, xxl).
Color It has limited colors.
Extra colors added with the looks,
A card improved color palette.
there are various shades available
to choose.
Jquery
It has jquery and all related
plugins.
Jquery is removed and switched to
vanilla JS with some working
plugins
Internet Explorer
Bootstrap 4 supports both IE 10
and 11.
Bootstrap 5 doesn’t support IE 10
and 11.
Customization No theme customization Provides theme Customization

9. Prior Knowledge before learning Bootstrap:
9 Malik Ali Raza (I.T Professional)
1.HTML
2.CSS
3.JQuery or Javascript

10. Software Requirement for Bootstrap:
1
0 Malik Ali Raza (I.T Professional)
1.HTML Editor (Vs Code)
2.Web Browser (Chrome, Microsoft Edge)
3.Bootstrap CSS/JS Files

11. How to Use Bootstrap 4 or 5 ?
11
Malik Ali Raza (I.T
CDN
Or
You can Download setup of Bootstrap
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
The "width=device-width" section is used to set the width of the page to
match the device's screen width (vary according to the device).

12. How to make Website Layout with Bootstrap ?
12 Malik Ali Raza (I.T Professional)
1. Container
2. Row
3. Col
3 Bootstrap Classes

13. Container Class
13
 The container class contains content, navbar, image slider, and
other functions with a grid system.
Bootstrap 4 or 5 has two types of containers:
 Container: The ".container class" has a maximum width at each
responsive breakpoint.
 Container-fluid: The ".container-fluid" class has a width of 100
percent at all breakpoints.
Malik Ali Raza (I.T Professional)

14. Container Vs Container Fluid
14 Malik Ali Raza (I.T Professional)

15. Container Vs Container Fluid
15 Malik Ali Raza (I.T Professional)
Coding Time
15 Minutes

16. Container Vs Container Fluid
16 Malik Ali Raza (I.T Professional)
Thank You