Web Systems and

Technologies
Chapter 05.
Bootstrap (Open Source Toolkit)
Content
 What is Bootstrap
 Responsive Design
 Why Bootstrap
 Implementation

2
What is Bootstrap?
 The most popular HTML, CSS, and JS framework
 Used for developing responsive, mobile first projects on the web.
 Mobile First Strategy
 Works and looks great on the mobile device.
 As the devices scale in the size the content scales and experience is
enhanced.

3
What is Bootstrap?

4
Responsive Web Design
 Crafting sites that provide an
optimal viewing and interaction
experience
 Easy reading and navigation
 Minimal resizing, panning, and
scrolling
 Works across a wide range of
devices

5
Responsive Web Design

6
Why Choose Bootstrap?
 Speed of Development
 Use of ready made code blocks and pre-defined styles.
 Responsiveness
 Mobile devices continue to grow in popularity year after year.
 Use of Bootstrap's grid system and classes make it easier.
 Consistency: Uniformity, same experience across Internet Explorer, Chrome,
and Firefox
 Customizable: Ability to fine tune your bootstrap package.
 Support
 Large user community behind it. Constantly being updated. Lots of
documentation
 Themes: There are a large number of Themes available and either free or very
7
inexpensive
Similar Responsive Frameworks
 Bootstrap is not alone. There are numerous frameworks that are similar. The key
to picking one is to understand your requirements.
 Semantic UI
 ZURB Foundation
 Skeleton
 HTML Boilerplate
 Almost infinitely more…

8
Bootstrap Components
 Grids – Defining pages in terms of columns and rows
 Typography – Headings / body elements
 Glyphs – icons that are font based, scalable
 Navigation – responsive navigation
 Images – responsive images
 Helper Classes – clearfix / show / hide / centers
 Responsive Utilities – hide / show content via class
 Javascript - Carousel, Tooltip, Tab, Modal, Alerts

9
Bootstrap 3 vs. Bootstrap 4
 Bootstrap 4 is the newest version of Bootstrap; with new components, faster
stylesheet and more responsiveness.
 Bootstrap 4 supports the latest, stable releases of all major browsers and
platforms. However, Internet Explorer 9 and down is not supported.
 Droppped icon support: Bootstrap 4 does not support BS3 Glyphicons. Use
Font-Awesome or other icon libraries instead.

10
Where to Get Bootstrap 4?
 There are two ways to start using Bootstrap 4 on your own web site. You can:
 Include Bootstrap 4 from a CDN (Content Delivery Network)
 Download Bootstrap 4 from getbootstrap.com

11
Where to Get Bootstrap 4? (cont.)
 Download ready-to-use compiled code for Bootstrap v4.2.1 to easily drop into
your project, which includes:
 Compiled and minified CSS bundles (see CSS files comparison)
 Compiled and minified JavaScript plugins
 This doesn’t include documentation, source files, or any optional JavaScript
dependencies (jQuery and Popper.js).

12
Examples of Utilities classes

13
What Bootstrap Package Includes?
 Once the compiled version Bootstrap is downloaded, extract the ZIP file, and
you will see the following file/directory structure:

 As you can see there are compiled CSS and JS (bootstrap.*), as well as
compiled and minified CSS and JS (bootstrap.min.*).

14
Create First Web Page With Bootstrap
 Add the HTML5 doctype

 Bootstrap 3 is mobile-first

 Containers:
 Bootstrap also requires a containing element to wrap site contents.
 There are two container classes to choose from:

15
Grid System
 Grid is a structure (usually two-dimensional) made up of a
series of intersecting straight (vertical, horizontal) lines used to
structure the content.
 In web design, it is a very effective method to create a
consistent layout rapidly and effectively using HTML and CSS.
 It organize and structure content, makes the websites easy to
scan and reduces the load on users.

16
Grid System
 Easy to use grid system for creating rows & columns for your content: https
://getbootstrap.com/docs/4.2/layout/grid/
 Bootstrap's grid system is built with flexbox and allows up to 12 columns across
the page.

17
Grid Classes
 The Bootstrap grid system has four 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)

18
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)
 The classes above can be combined to create more dynamic and flexible
layouts.

19
Grid Example

20
Grid Example

21
Grid Example

22
Bootstrap 4 Text/Typography
Bootstrap 4 Default Settings
 Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
 The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.
 In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem
(16px by default).

23
Bootstrap 4 Text/Typography (cont.)
<h1> - <h6>

 Bootstrap 4 styles HTML headings (<h1> to <h6>) with a bolder font-weight

and an increased font-size
 h1 Bootstrap heading (2.5rem = 40px)
 h2 Bootstrap heading (2rem = 32px)
 h3 Bootstrap heading (1.75rem = 28px)
 h4 Bootstrap heading (1.5rem = 24px)
 h5 Bootstrap heading (1.25rem = 20px)
 h6 Bootstrap heading (1rem = 16px)

24
Bootstrap 4 Text/Typography (cont.)
Display Headings
 Display headings are used to stand out more than normal headings (larger font-
size and lighter font-weight
 Four classes to choose from: .display-1, .display-2, .display-3, .display-4
 <h1 class="display-1">Display 1</h1>
 <h1 class="display-2">Display 2</h1>
 <h1 class="display-3">Display 3</h1>
 <h1 class="display-4">Display 4</h1>

25
Bootstrap 4 - Text Colors
 Bootstrap 4 has some contextual classes that can
be used to provide "meaning through colors".

 The classes for text colors are:

 .text-muted, .text-primary, .text-success, .text-
info, .text-warning, .text-danger, .text-
secondary, .text-white, .text-dark, .text-body
(default body color/often black) and .text-
light
 You can also add 50% opacity for black or white
text with the .text-black-50 or .text-white-50
classes
26
Bootstrap 4 Buttons

27
Bootstrap 4 Button Groups
 Button Groups
 Bootstrap 4 allows you to group a series of buttons together (on a single
line) in a button group
 Use a <div> element with class .btn-group to create a button group
 Vertical Button Groups
 Use the class .btn-group-vertical to create a vertical button group

28
Bootstrap 4 Images
 Rounded Corners
 The .rounded class adds rounded corners to an image
 <img src="cinqueterre.jpg" class="rounded" alt="Cinque
Terre">
 Circle
 The .rounded-circle class shapes the image to a circle
 <img src="cinqueterre.jpg" class="rounded-circle"
alt="Cinque Terre">
 Thumbnail
 The .img-thumbnail class shapes the image to a thumbnail (bordered)
 <img src="cinqueterre.jpg" class="img-thumbnail"
alt="Cinque Terre">
29
Bootstrap 4 Images (2)

30
Bootstrap 4 Tables
 Bootstrap 4 Basic Table
 The .table class adds basic styling to a table
 Striped Rows
 The .table-striped class adds zebra-stripes to a table
 Bordered Table
 The .table-bordered class adds borders on all sides of the table and cells
 Hover Rows
 The .table-hover class adds a hover effect (grey background color) on table
rows
 Borderless Table
 The .table-borderless class removes borders from the table
31
Bootstrap 4 Tables (2)
 Bootstrap - Table

32
Bootstrap 4 Tables (3)
 Bootstrap - Table Filter with jQuery

33
Bootstrap 4 Dropdowns

34
Bootstrap 4 Navs

35
Bootstrap 4 Forms

36
Bootstrap 4 Forms (2)

37
Bootstrap 4 Forms (3)

38
Fix top navbar

39
Bootstrap 4 Modal

40
41