CSS Framework

Bootstrap 4

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1

Table of Contents
§ CSS Framework
§ Boostrap Overview
§ Responsive and Mobile First Design
§ Layout
§ Typography
§ Commonly Components
§ Icons
§ Utility Classes

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2

Lesson Objectives
§ Understand CSS Framework and its benefits
§ Understand basic concepts of Bootstrap 4
§ Able to create layout using Bootstrap 4
§ Able to use Commonet Components of Bootstrap 4 to
create complex web app

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3

Section 1
CSS Framework

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4

What is CSS Framework
§ Code library that
abstracts common web
designs and makes the
designs easier for a
developer to implement
in their web apps.
§ Collection of CSS style-
sheets that are already
made and ready to use

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5

What CSS Framework offer ?
§ Reset default CSS style
§ Layout System (Grid) and Responsive Web Design
§ Web Typography
§ Set of Icons
§ Stylings for common element such as Buttons, Forms
§ UI Components such as Dropdown, Navs

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6

Why use CSS Framework ?
§ Reuse CSS instead of create
new to speed-up
development process
§ Enable cross-browser
support
§ Enforces good design-
principles
§ Clean and consistent layout
§ More productive, clean and
maintainable
12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7
Popular CSS Framework

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8

Summary
§ CSS Framework is a collection of pre-made CSS Styles
§ CSS Framework provide consistent UI, CSS structures
§ When you use a CSS Framework you also use its Design
Pratices
§ Popular CSS Frameowork such as Boostrap, Bulma,
Foundation, Tailwind

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9

Section 2
Boostrap Overview

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10

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

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11

Advantages of Bootstrap
§ Easy to use
§ Responsive features
§ Mobile-first approach
§ Browser compatibility

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12

Bootstrap History
§ Created at Twitter in mid-2010
§ Over 20 releases, 4 major releases
§ Version 2 add responsive support
§ Version 3 complete rewrite of v2 and add more
responsive
§ Version 4 (current version) complete rewrite of v3
using flexbox

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13

Setup Boostrap 4
Ø There are 3 ways to start using Bootstrap 4 on your
own web site:
§ Include Bootstrap 4 from a CDN
§ Download Bootstrap 4 from getbootstrap.com

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14

Setup Bootstrap 4
Ø Bootstrap 4 CDN: MaxCDN provides CDN support for
Bootstrap's CSS and JavaScript. You must also include jQuery

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15

Setup Bootstrap 4
Ø Advantage of using the Bootstrap 4 CDN:
§ Easy to setup
§ No Need to download locally
Ø jQuery and Popper?
§ Required for JavaScript components (like modals,
tooltips, popovers etc)
§ However, if you just use the CSS part of Bootstrap, you
don't need them

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16

Setup Bootstrap 4
Ø Download Bootstrap 4: Download ready-to-use compiled
code for Bootstrap v4.5.0 to easily drop into your project,
which includes:
§ Compiled and minified CSS bundles
§ Compiled and minified JavaScript plugins

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17

Summary
§ Boostrap is one of the most popular CSS Framework
§ Boostrap orginally created at Twitter hence the name
Twitter Boostrap
§ Top benefits of Boostrap:
o Easy to use
o Responsive features
o Mobile-first approach
o Browser compatibility

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18

Section 3
Responsive and Mobile First Design

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19

Responsive Design
§ Design a website such
that it can support
multiple devices
§ Support means it has to
display cleanly, easy to
follow for users
§ Boostrap support
Responsive under the
hood: xs, md, lg…

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 20

Mobile First Design

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 21

Mobile First Design

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 22

Section 4
Layout

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 23

What is Layout ?
§ Layout is where to
place items into a
web site
§ And the spacing
between them
§ CSS 3 has Flexbox,
Grid is used to
create Layout

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 24

Layout – Container
§ Important in Web design
§ Help to create a frame for
our web page

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 25

Layout – Container
§ Syntax:

§ Use .container-fluid for a full width container, spanning the

entire width of the viewport

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 26

Bootstrap Grid
Ø Bootstrap 4 Grid System: Bootstrap's grid system is built
with flexbox and allows up to 12 columns across the page.

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 27

Bootstrap Grid
Ø How it works
§ Bootstrap’s grid system uses a series of containers, rows, and
columns to layout and align content.
§ It’s built with flexbox and is fully responsive.

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 28

Bootstrap Grid
Ø Grid Classes: The Bootstrap 4 grid system has five
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)

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 29

Bootstrap Grid
Ø Basic Structure of a Bootstrap 4 Grid

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 30

Bootstrap Grid
Ø Three Equal Columns: The following example shows how to
create three equal-width columns, on all devices and screen
widths

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 31

Bootstrap Grid
Ø Responsive Columns
§ 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

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 32

Bootstrap Grid
Ø Two Unequal Responsive Columns: The following example
shows how to get two various-width columns starting at tablets and
scaling to large extra desktops

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 33

Summary
§ Use .container and .container-fluid to create frame for
you web page
§ Create complex layout with Grid System
§ Grid System consists of row where each row is composed
of 12 columns
§ Use class prefix .col, .col-sm-, .col-md-, .col-lg-, .col-xl-
to create responsive web app

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 34

Section 5
Typography

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 35

Typography – Headings

§ All HTML headings, <h1> through <h6>, are available

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 36

Typography – Headings

§ Classes .h1 through .h6 are also available

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 37

Typography – Text alignment

§ Easily realign text to

components with text
alignment classes

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 38

Typography – Text transform

§ Transform text in components with text capitalization

classes

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 39

Typography – Lists

§ Unstyled: Remove the default list-style and left margin

on list items

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 40

Typography – Lists

§ Inline: Remove a list’s bullets and apply some

light margin with a combination of two classes, .list-
inline and .list-inline-item

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 41

Typography – Summary

§ Bootstrap sets basic global display, typography, and link

styles
§ Change text alignment, transform, style, weight, and color
with our text utilitiesand color utilities.

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 42

Section 6
Common Components

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 43

Common Components

§ Navigation Bar § Dropdown

§ Breadcrumb § Pagination
§ Table § Label
§ Forms § Badges
§ Buttons § Alert
§ Images § Progress bar
§ Icons § List Group

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 44

Common Components – Navigation Bar

§ Navigation Bar is a section of a graphical user

interface intended to aid visitors in accessing information
§ Require a wrapping .navbar with .navbar-expand{-sm|-
md|-lg|-xl}

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 45

Common Components – Breadcrumb

§ Indicate the current page’s location within a navigational

hierarchy that automatically adds separators via CSS.

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 46

Common Components – Tables

§ Table represents tabular data

§ Bootstrap 4 support for table by adding .table class to any
<table> element

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 47

Common Components – Forms

§ Bootstrap provides several form control styles, layout

options, and custom components for creating a wide variety
of forms.

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 48

Common Components – Forms

§ Form controls: Textual form controls—

like <input>s, <select>s, and <textarea>s—are styled
with the .form-control
§ Default checkboxes and radios are improved upon with the
help of .form-check

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 49

Common Components – Buttons

§ Bootstrap includes several predefined button styles, each

serving its own semantic purpose
§ Add .btn-lg or .btn-sm for additional sizes
§ Make buttons look inactive by adding the disabled boolean
attribute to any <button> element

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 50

Common Components – Images

§ Images in Bootstrap are made responsive with .img-fluid

(max-width: 100%; and height: auto;)

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 51

Common Components – Dropdown

§ Dropdowns are toggleable, contextual overlays for

displaying lists of links and more
§ JavaScript is required for Dropdown

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 52

Common Components – Dropdown

§ Wrap the dropdown’s toggle (your button or link) and the

dropdown menu within .dropdown
§ Add .dropdown-item to each item and .dropdown-menu
to the menu

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 53

Summary

§ Bootstrap provides many UI Components that help you to

developer faster and easier
§ To use a component you must specify correct Bootstrap
syntax with corresponding class
§ Most Components only need HTML and CSS
§ For Dropdown you must add JavaScript

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 54

Section 7
Icons

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 55

Icons
§ Icons provide graphical
information to user Icon
§ Help users to quickly
understand the context Context

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 56

How to add Icons ?
§ Two common ways to add Icons:
1. Using Boostrap Icons
2. Using Font-Awesome

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 57

Using Boostrap Icons
§ Download bundle zip:
o https://github.com/twbs/icons/releases/latest/
o Usage:
File name Icon name

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 58

Using Font Awesome
§ Download Font Awesome and add to web site
§ Usage:

Copy and paste to HTML

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 59

Summary
§ Icons provide graphical information for users
§ Icons help user to quickly understand the context
§ Icons often implemented with Custom Font or SVG

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 60

Section 8
Utility Classes

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 61

Utility Classes
§ Help developer to quickly create UI
§ Provide many frequenly used feature such as:
• Create Spacing
• Enable Flex
• Create Borders
• Create Shadows
• Sizing items

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 62

Spacing
§ Assign responsive-friendly margin or padding values to an
element or a subset of its sides with shorthand classes.
§ Syntax:
• {property}{sides}-{size} for xs
• {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl
§ Where property is one of:
• m - for classes that set margin
• p - for classes that set padding

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 63

Spacing
§ Side is one of:
o t - for classes that set margin-top or padding-top
o b - for classes that set margin-bottom or padding-bottom
o l - for classes that set margin-left or padding-left
o r - for classes that set margin-right or padding-right
o x - for classes that set both *-left and *-right
o y - for classes that set both *-top and *-bottom
o blank - for classes that set a margin or padding on all 4 sides of the
element

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 64

Spacing
§ Where size is one of:
o 0 - for classes that eliminate the margin or padding by setting it to 0
o 1 - (by default) for classes that set the margin or padding to $spacer
* .25
o 2 - (by default) for classes that set the margin or padding to $spacer
* .5
o 3 - (by default) for classes that set the margin or padding to $spacer
o 4 - (by default) for classes that set the margin or padding to $spacer
* 1.5
o 5 - (by default) for classes that set the margin or padding to $spacer
*3
o auto - for classes that set the margin to auto

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 65

Spacing
§ Examples:

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 66

Flex
§ Enable flex behaviors:
• Responsive variations also exist for .d-flex and .d-inline-flex
§ Direction:
• flex-row
• flex-row-reverse
• flex-column
• flex-column-reverse

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 67

Flex
§ Justify content:
• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
§ There are also classes for different devices: xs, md, lg, xl

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 68

Flex
§ Align items
• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
§ There are also classes for different devices: xs, md, lg, xl

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 69

Summary
§ Use Utility classes to speed-up development process
§ Utility classes provide a commonly used features:
• Spacing
• Flex
• Text
• Borders
• Shadows

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 70

 Thank you

12/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 71