Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1

B
Bootstrap Overview
Silicus Training Name I V1.0 Silicus Technologies India Pvt Ltd © 2017 1
Training Name: Bootstrap
Trainer Name : Shilpi Saraogi
Silicus Technologies India Pvt Ltd © 2018
Training date : 0/0/0
Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 2

Know your Trainer
• Domain Background : Healthcare IT, Oil & Gas, Energy
• Designation/Project Name : Senior Visual Designer III
• Year of Experience : 7.5 years
• In Silicus since : Dec 2015

Agenda
What we shall cover today?
 Responsive Design
 What is Bootstrap
 Why Bootstrap
 How to start
 Grid System
 Responsive Utility Classes
 Bootstrap Components
 Bootstrap Plugins
 Bootstrap Code Validation
 Advantages
 Limitations
 Estimations & Costing
 Bootstrap Alternatives

Objective of the Training
Statistics on internet usage patterns reveal a very interesting phenomenon more than 60 percent of
smartphone users throughout the world use the internet through their mobile devices to get
relevant information quickly, especially when they are away from their computers.
Bootstrap is an essential framework for creating responsive websites. Following are some
Objective of this training:
 Understand Bootstrap framework

 Build responsive pages with Bootstrap
 Understand how the HTML, CSS and JavaScript components of Bootstrap work
 Customize a Bootstrap installation
Target Audience
 Experienced web designers
 Experienced web developers
Training Pre-requisites
Working knowledge of HTML and CSS

Responsive Design
Responsive website changes the appearance after changes in width of browser
every point. For example, if the browser 1024 px wide and width changes below or
above 1024 px then layout will respond accordingly. Responsive sites adjust
the layout fluidly not considering on which device is being used.
 To resize the page element most common concept is used in RW design is fluid grid.
It uses relative units like percentages.
 RWD are implemented in different coding languages like PHP, .Net, Java and
many new technologies which supports RWD.
 Media queries are most commonly used to set different CSS style for different
resolutions. It looks for the width of the browser to apply the appropriate size
based on the width defined.
 Using power of HTML and CSS can implement RWD with ease, few of the features of
CSS and HTML allows you to resize images, screen resolution automatically.
 Responsive website design works on the lower and upper limit to resize the website.
Most of the time the breakpoints are defined based on the width of the website,
if the website goes above or below of the break-point the appropriate web design
gets applied.

What is Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for

developing responsive websites quickly, easily and elegantly.
Bootstrap v4.0.0-alpha.6
Bootstrap 4 provided the following benefits;
 Flexbox based grid

 New XL grid tier
 Latest auto-layout grid
 Navbar customization options
 New Spacing utilities
 Sans Glyphicons configuration (Bloat-free zone)
 Responsive sizing
 Responsive Floats
 Auto Margins
 Vertical Centering
Current Bootstrap Version: 3.3.7

What has really changed in version 4
There are a ton of major changes to Bootstrap and it’s impossible to cover them all
in detail here, so here are some of highlights:
 Moved from Less to Sass

 Improved grid system
 Opt-in flexbox support is here
 Dropped wells, thumbnails, and panels for cards
 Consolidated all our HTML resets into a new module, Reboot
 Brand new customization options.
 Dropped IE8 support and moved to rem and em units.
 Rewrote all our JavaScript plugins.
 Improved auto-placement of tooltips and popovers

How are these changes different?
Parameters Bootstrap 3 Bootstrap 4
Source CSS file LESS SASS
Grid Tiers 4 grid tier system 5 gid tier system
Dropdown Structure Can be created with <ul> and <li> Can be created with <ul> or <div>
.page-item must be added to to

.pagination needs to be added to
Default Pagination each <li> element and .page-link to
<ul> element
each <a> element
Responsive Images Apply .img-responsive class Apply .img-fluid class
.table-responsive class should be .table-responsive class to be added

Responsive Tables
added to parent <div> element to <table> element
Employ spacing utilities such as

Employ .navbar-right, .navbar-left
Navbar Alignment .mr-auto, or flexbox alignment
to align components
utilities

How to start
You can download Bootstrap from getbootstrap.com
Once downloaded, unzip the compressed folder and you’ll see something like this:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.min.js
├── bootstrap.js
└── bootstrap.min.js
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We
provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

Comparison of CSS files
CSS files Layout Content Components Utilities

bootstrap.css All All All All
bootstrap.min.cs
s
bootstrap- Only grid system No No Only flex utilities
grid.css
bootstrap-
grid.min.css
bootstrap- No Only Reboot No No
reboot.css
bootstrap-
reboot.min.css
Bootstrap HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.
0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.
js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/po
pper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>

Grid System

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)
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints
for our layouts and interfaces.
// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575px) { ... }
// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)

// Large devices (desktops, 992px and up)

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }
Silicus Training Name I V1.0 Company Confidential 15
GRID OPTIONS
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
Extra small Small Medium Large Extra large

<576px ≥576px ≥768px ≥992px ≥1200px
Horizontal at all
Grid behavior Collapsed to start, horizontal above breakpoints
times
Max container
None (auto) 540px 720px 960px 1140px
width
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

RESPONSIVE CLASSES
For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes.
Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
<div class="row">
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>

STACKED TO HORIZONTAL
Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked
on extra small devices before becoming horizontal on desktop (medium) devices.
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
</div>

MIX AND MATCH
Use a combination of different classes for each tier as needed. See the example below for a better idea of how it
all works

<div class="row">
<div class="col col-md-8">.col .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<div class="row">
</div>

<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>

MIX AND MATCH

Auto-layout Columns
Company Confidential
Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 21
Equal-width
Add any number of unit-less classes for each breakpoint you need and every column will be the same width & grid
layouts that apply to every device and viewport, from xs to xl.
<div class="row">
<div class="col"> 1 of 2 </div>
</div>
<div class="row">
</div>
</div>

Setting one column width
you can set the width of one column and the others will automatically resize around it.
<div class="row">
<div class="col-6"> 2 of 3 (wider) </div>
</div> <div class="row">
<div class="col-5"> 2 of 3 (wider) </div>
</div>
</div>

Variable width content
Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content. This is
super handy with single line content like inputs, numbers, etc.
<div class="row justify-content-md-center">
<div class="col col-lg-2"> 1 of 3 </div>
<div class="col-12 col-md-auto"> Variable width content </div>
</div>
<div class="row">
<div class="col-12 col-md-auto"> Variable width content </div>
</div>
</div>

Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to
a new line.
<div class="row">
<div class="w-100"></div>
</div>

Alignment
Vertical alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
<div class="row align-items-start">
<div class="col"> One of three columns </div>
</div> <div class="row align-items-center">
</div>
<div class="row align-items-end">
</div>
</div>

Vertical alignment
<div class="row">
<div class="col align-self-start">One of three columns </div>
<div class="col align-self-center"> One of three columns </div>
<div class="col align-self-end"> One of three columns </div>
</div>
</div>

Horizontal alignment
<div class="row justify-content-start">
<div class="col-4"> One of two columns </div>
</div> <div class="row justify-content-center">
</div> <div class="row justify-content-end">
</div> <div class="row justify-content-around">
</div>
<div class="row justify-content-between">
</div>
</div>

Horizontal alignment
<div class="row justify-content-start">
</div> <div class="row justify-content-center">
</div> <div class="row justify-content-end">
</div> <div class="row justify-content-around">
</div>
<div class="row justify-content-between">
</div>
</div>

Bootstrap Utilities Classes
Bootstrap includes dozens of utilities—classes with a single purpose to reduce the
frequency of highly repetitive declarations.
FLEX
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex
containers and items are able to be modified further with additional flex properties.
Enable flex behaviors

<div class="d-flex">I'm a flexbox container!</div>
OR
<div class="d-inline-flex">I'm an inline flexbox container!</div>
Direction
Use .flex-row to set a horizontal direction or .flex-row-reverse to start the horizontal direction from the opposite side.
Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.
* Responsive variations also exist for flex-direction.
Justify content
Use justify-content utilities on flexbox containers to change the alignment of flex the main axis (the x-axis to start,
y-axis if flex-direction: column). Choose from start (browser default), end, center, betweeitems on n, or around.
Align items
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start,
x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch(browser default).

DISPLAY PROPERTY
the classes are named using the format:
•.d-{value} for xs
•.d-{breakpoint}-{value} for sm, md, lg, and xl.
Where display is one of:

•none
•inline
•inline-block
•block
•table
•table-cell
•table-row
•flex
•inline-flex
Display in print
Class Print style
.d-print-block Applies display: block; to the element when printing
.d-print-inline Applies display: inline; to the element when printing
.d-print-inline-block Applies display: inline-block; to the element when
printing
.d-print-none Applies display: none; to the element when printing

DISPLAY PROPERTY
Hiding Elements
Screen Size Class

Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block

FLOAT
Classes
Toggle a float with a class:
<div class="float-left">Float left on all viewport sizes</div><br>

<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
Responsive
Responsive variations also exist for each float value.
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

SIZING
Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
<div class="w-25 p-3”>Width 25%</div>

<div class="w-50 p-3">Width 50%</div>
<div>
<div class="h-25 d-inline-block">Height 25%</div>
</div>

SPACING
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand
classes.
Where property is one of:
•m - for classes that set margin
•p - for classes that set padding
Where sides is one of:

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

•0 - for classes that eliminate the margin or padding by setting it to 0
•1 - (by default) for classes that set the margin or padding to $spacer * .25
•2 - (by default) for classes that set the margin or padding to $spacer * .5
•3 - (by default) for classes that set the margin or padding to $spacer
•4 - (by default) for classes that set the margin or padding to $spacer * 1.5
•5 - (by default) for classes that set the margin or padding to $spacer * 3
•auto - for classes that set the margin to auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)

Bootstrap Content
Bootstrap Table
*Useful Classes – table-striped, table-hover, table-condensed, table-responsive

Bootstrap Components
Bootstrap Glyphicons

Bootstrap Buttons
Button Class Description
btn btn-default Default gray button with gradient.
btn btn-primary Provides extra visual weight to indicate primary action button in a
set of buttons.
btn btn-info Can be used as an alternative to the default button.
btn btn-success Indicates a successful or positive action.
btn btn-warning Indicates caution should be taken with this action.
btn btn-danger Indicates a dangerous or potentially negative action.
btn btn-link Deemphasize a button by making it look like a link while

maintaining button behavior.
*Useful Classes – btn-lg, btn-sm, btn-xs, btn-block, disabled

Bootstrap Modal

Other Bootstrap Components
 Button groups  Page header
 Button dropdowns  Thumbnails
 Input groups  Alerts
 Navs  Progress bars
 Navbar  Media object
 Breadcrumbs  List group
 Pagination  Panels
 Labels  Responsive embed
 Badges  Wells
 Jumbotron
*Useful Link: getbootstrap.com/components
Validating Bootstrap Code
One of the most challenging part of responsive website testing is to test the websites on all browsers,
resolutions, screen sizes and Operating Systems etc. However it is not realistic to test the website with all
above combinations.
 viewport sizing option: By using this option you can change the size of the viewport to that of a
smartphone or a tablet and notice the responsiveness of the web design for that particular website. It is a
quick and very easy option available to test the responsiveness of the web design across the variable
viewport sizes of the multiple devices.
 browser emulator: Browser emulators are great for testing a site's responsiveness, but they don’t emulate
differences in API, CSS support, and certain behaviors that you'd see on a mobile browser. Test your site
on browsers running on real devices to be certain everything behaves as expected.
 Browser extensions: Responsiveness can also be tested by browser extensions such as Viewport Resizer,
Mobile/Responsive Web Design Tester for Chrome etc.
 Responsive Design Mode (Firefox): Responsive Design Mode gives you a simple way to simulate these
factors, to test how your website will look and behave on different devices.
 Changing the size of your browser: when you are testing the responsiveness of a web design, you can
easily check the compatibility by changing the size of your browser.
 Online responsive checker: There are online free checker website available. You just need to put your
website URL and check for responsiveness. They are very easy to use and you can get results in less than
one minute.

Advantages
 Great standardized platform with all the basic styles and components
needed (layout grid, panels, tables, buttons, modals, form styles, etc.) to
build on which saves a lot of time.
 Support for all major browsers and fixes CSS compatibility issues.
 Consistent UI that looks good out of the box.
 Lightweight and customizable (on their site or via less and sass) files so
you can include only what you use.
 Designed with responsive structures and styles for mobile devices.
 Several JavaScript plugins included using jQuery.
 Icons included (now as a font file for infinite scaling).
 Good documentation and community support.
 Lots of free and professional templates, themes and plugins.

Limitations
 It doesn’t follow best practices
 JavaScript is tied to jQuery (it's by the far the most common JavaScript
library though and the plugins can just as easily be left unused).
 Can require lots of overriding styles or rewriting their files if you have
lots of customizations or want to deviate from Bootstrap structure.
 Twitter Bootstrap is heavy
 Updating Bootstrap framework can be a pain
 Websites can start to look the same if you don't customize the styles
and colors much.

Alternatives of Bootstrap
 Skeleton
 Pure
 UI Kit
 HTML5 Boilerplate
 Simple Grid
 Material-UI
 Materialize
 Metro UI
 Foundation
 Ink
 Groundwork
Estimating and Costing

Questions?
Thank You!

Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1

Uploaded by

Copyright:

Available Formats

Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1

Uploaded by

Copyright:

Available Formats

B

Silicus Technologies India Pvt Ltd © 2018

Training date : 0/0/0

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 2

• Designation/Project Name : Senior Visual Designer III

• Year of Experience : 7.5 years

• In Silicus since : Dec 2015

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 3

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 4

 Understand Bootstrap framework

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 5

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 6

Bootstrap is the most popular HTML, CSS, and JS framework for

 Flexbox based grid

Current Bootstrap Version: 3.3.7

 Moved from Less to Sass

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 9

.page-item must be added to to

Responsive Images Apply .img-responsive class Apply .img-fluid class

.table-responsive class should be .table-responsive class to be added

Employ spacing utilities such as

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 10

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 11

CSS files Layout Content Components Utilities

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 13

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 14

•.col- (extra small devices - screen width less than 576px)

// Extra small devices (portrait phones, less than 576px)

// Small devices (landscape phones, 576px and up)

// Medium devices (tablets, 768px and up)

// Large devices (desktops, 992px and up)

// Extra large devices (large desktops, 1200px and up)

Extra small Small Medium Large Extra large

Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

Gutter width 30px (15px on each side of a column)

Column ordering Yes

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 16

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 17

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 18

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 19

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 20

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 22

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 23

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 24

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 25

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 27

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 28

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 29

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 30

Enable flex behaviors

* Responsive variations also exist for flex-direction.

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 32

Where display is one of:

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 33

Screen Size Class

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 34

<div class="float-left">Float left on all viewport sizes</div><br>

Silicus Training Name I V1.0 QMS-SEPG-TPL-095/3.0 Company Confidential 35

<div class="w-25 p-3”>Width 25%</div>