5 : Introduction to bootstrap

IT2406 - Web Application Development 1

Level I - Semester 2

© 2020 e-Learning Centre, UCSC

Introduction
• Bootstrap is a front-end framework (Front end frameworks are used
for decorating the look and feel of the view)
• Bootstrap helps in building mobile responsive websites quickly and
easily
• Bootstrap is totally free for anyone to use
• First developed by Twitter known as Twitter Bootstrap
• It is now used for developing simple web applications to complex
ones focusing the front end of the web sites

2
© 2020 e-Learning Centre, UCSC
Introduction
• Bootstrap has a number of jQuery plugins that can provide additional
functionality
• Eg: carousels, buttons, tooltips, typography, buttons, tables, navigation, modals and
• It includes HTML and CSS based design templates for, forms, buttons,
tables, navigation, modals, image carousels and many other components,
as well as optional JavaScript plugins
• It saves effort, cost of development and time
• A basic understanding of HTML and CSS to create sites that are responsive,
mobile-first, and compatible with all modern browsers
• Preconditions
• Basic knowledge of HTML and CSS

3
© 2020 e-Learning Centre, UCSC
License of Bootstrap
• Bootstrap is under MIT License
• See the project repository for more details of the license
https://github.com/twbs/bootstrap/blob/mai/LICENSE

Source: https://github.com/twbs/bootstrap/blob/mai/LICENSE
4
© 2020 e-Learning Centre, UCSC
Setup Bootstrap into the development
environment
• It is essential to integrated the bootstrap framework with the web
pages you develop
• Integration can be done in two different ways

1. You can download the bootstrap framework and integrate locally with the
HTML files

2. Directly refer the CDN (Content Delivery Network) links online

5
© 2020 e-Learning Centre, UCSC
Download and install in different
environments
• Bootstrap allows source code version download or precompiled
development ready versions or third party package managers to
install bootstrap

1. Compiled CSS and JS

2. Source code
3. Package managers
• Examples: Npm, RubyGems, yarn, composer and nuget

6
© 2020 e-Learning Centre, UCSC
Using compiled CSS and JS
• This version includes

• Compiled and minified CSS versions

• Compiled and minified JavaScript plugins

• Source files, bootstrap documentation

content and supportive materials are
excluded
• Can be directly used in a local web
development setup
7
© 2020 e-Learning Centre, UCSC
Example integration
• Link external style sheet into the web page

<Link rel=“stylesheet” href=“local path to css file”>

• Link javascript file into web page

<script src=“local path to js file”>

8
© 2020 e-Learning Centre, UCSC
Source files download
• Source files can be customized in case you need to change the default
definitions
• If you download the source file version, it is your responsibility to
compile it using a suitable compiler (Syntactically awesome style
sheets compiler)
• Eg : Libsass , Ruby Sass

• Once you compile the source files you can use it for development
purposes

9
© 2020 e-Learning Centre, UCSC
Bootstrap bundle contents
• “dist” directory contains the
compiled version of js and css
• “scss” and “js” directories include
the source files of js and css
• “site” directory includes the files
related to documentation and
example codes of Bootstrap usage
• any other included file provides
support for packages, license
information
10
© 2020 e-Learning Centre, UCSC
Bootstrap CDN (Content Delivery Network)
• Integrate the bootstrap files through urls (Do not need to locally
maintain the files)
• No need of downloading files and using in your projects locally
• Both css and JavaScript content can be linked through CDN
• Use conventional “link” and “script” tags to include css and javascript
files
• Include CDN versions of jQuery and Popper.js before integrating the
compiled JavaScript

11
© 2020 e-Learning Centre, UCSC
Example CSS integration through
BootstrapCDN

<link rel="stylesheet“
href="https://stackpath.bootstrapcdn.com/bootst
rap/4.4.1/css/bootstrap.min.css"
integrity="sha384Vkoo8x4CGsO3+Hhxv8T/Q5PaXt
kKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">

Source: https://getbootstrap.com/docs/4.4/getting-started/download/
12
© 2020 e-Learning Centre, UCSC
Example JavaScript integration through
BootstrapCDN
<script
src="https://stackpath.bootstrapcdn.com/bootstr
ap/4.4.1/js/bootstrap.min.js"
integrity="sha384wfSDF2E50Y2D1uUdj0O3uMBJn
juUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
</script>
Source: https://getbootstrap.com/docs/4.4/getting-started/download/
13
© 2020 e-Learning Centre, UCSC
CDN versions of jQuery and Popper.js
• <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfo
RSJoZ+n" crossorigin="anonymous"></script>

• <script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/poppe
r.min.js" integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvox
MfooAo" crossorigin="anonymous"></script>
Source: https://getbootstrap.com/docs/4.4/getting-started/download/
14
© 2020 e-Learning Centre, UCSC
Using Package Managers to install Bootstrap
Package Manager Command to install Bootstrap
npm npm install bootstrap
yarn yarn add bootstrap
RubyGems gem ‘bootstrap’, ‘~> 4.4.1’
(4.4.1 is the version you want to install)
Composer composer require twbs/bootstrap:4.4.1
NuGet Install-Package bootstrap

15
© 2020 e-Learning Centre, UCSC
Example [all in one place]

16
© 2020 e-Learning Centre, UCSC
Advantages of Bootstrap
• Easy to use: Needs basic knowledge of HTML and CSS to start using
Bootstrap
• Responsive features: Allows to adjust the interface to phones,
tablets, and desktops
• Mobile-first: Bootstrap 3, mobile-first styles are part of the core
framework
• Compatible with browsers: Supports frequently used common
browsers like Chrome, Firefox, Internet Explorer, Edge, Safari, and
Opera

17
© 2020 e-Learning Centre, UCSC
Advantage of using the Bootstrap CDN:
• Bootstrap CDN will not load each site access
• It will be loaded from cache without recurrently downloading the files
from the source online
• Caching files lead to faster loading time
• jQuery (Important)
Bootstrap depends on jQuery for JavaScript plugins
• (Eg: modals, tooltips, etc)
• jQuery is not necessary only if the css part is used

18
© 2020 e-Learning Centre, UCSC
Bootstrap Grid System

19
© 2020 e-Learning Centre, UCSC
Introduction to Grids in Bootstrap
• Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases
• It includes predefined classes for easy layout options
• It includes powerful mixins for generating more semantic layouts
• Grid systems are used for creating page layouts through a series of
rows and columns which hosts the content of a web page
• The Grid is made up of groupings of Rows & Columns inside one or
more containers

20
© 2020 e-Learning Centre, UCSC
How Bootstrap grid system works
• Rows must be placed within a “.container” class for proper alignment
and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns
• Columns may be immediate children of rows
• Predefined grid classes like “.row” and “.col-xs-4” are available for
quickly making grid layouts

21
© 2020 e-Learning Centre, UCSC
How Bootstrap grid system works
• Columns create gutters (gaps between column content) via padding
• Padding is offset in rows for the first and last column via negative
margin on “.rows”.
• Grid columns are created by specifying the number of twelve
available columns
• For example:
• Three equal columns would use three “.col-xs-4”
• Two equal columns would use three “.col-xs-6”

22
© 2020 e-Learning Centre, UCSC
 Bootstrap Grids
• Bootstrap grid system allows up to 12 individual columns
• It allows to group the columns together to create wider columns too
• These columns will re-arrange automatically depending on the screen size

You can use any combinations to prepare the layout

<div class="col-md-12">Span 12 columns</div>
<div class="col-md-6"> 6 units</div><div class="col-md-6"> 6 units </div>
<div class="col-md-4"> 4 units </div><div class="col-md-8"> 8 units </div>
<div class="col-md-4"> 4 units </div><div class="col-md-4"> 4 units </div> <div class="col-md-4"> 4 units </div>

23
© 2020 e-Learning Centre, UCSC
 Grid Classes
• The Bootstrap grid system has four classes

• xs - focuses on mobile phones

• sm - focuses on tablets
• md - focuses on desktops
• lg - focuses on larger desktops

• These classes can be used to create more dynamic, flexible and

complex layout structures.

24
© 2020 e-Learning Centre, UCSC
 Basic Structure of a Bootstrap Grid
<div class="row"> Create a row (<div class="row">)
<div class="col-*-*"></div>
</div>
<div class="row"> Add the desired number of
<div class="col-*-*"></div> columns (tags with
<div class="col-*-*"></div> appropriate .col-*-*classes)
<div class="col-*-*"></div>
</div> Note that numbers in .col-*-
<div class="row">
... * should always add up to 12 for
</div> each row

25
© 2020 e-Learning Centre, UCSC
GRID Options

26
© 2020 e-Learning Centre, UCSC
Media Queries
• Media queries are conditional CSS rules.
• It simply applies some CSS based on certain conditions
• When the specified conditions are met, the style is applied
• Media Queries in Bootstrap allows to move, show and hide
content based on viewport size

27
© 2020 e-Learning Centre, UCSC
Example media queries to create key break
points
• Extra small devices (phones, less than 768px)
• No media query since this is the default in Bootstrap
• Small devices (tablets, 768px and up)
@media (min-width: @screen-sm-min) { ... }
• Medium devices (desktops, 992px and up)
@media (min-width: @screen-md-min) { ... }
• Large devices (large desktops, 1200px and up)
@media (min-width: @screen-lg-min) { ... }

28
© 2020 e-Learning Centre, UCSC
Basic example of single column

<div class="container">
<div class="row">
<div class="col">Single column grid</div>
</div>
</div>

29
© 2020 e-Learning Centre, UCSC
Basic example of two column structure

<div class="container">
<div class="row">
<div class="col">column one</div>
<div class="col">column two</div>
</div>
</div>
30
© 2020 e-Learning Centre, UCSC
Basic example of three columns

<div class="container">
<div class="row">
<div class="col"> left column </div>
<div class="col">center column</div>
<div class="col">right column</div>
</div>
</div>
31
© 2020 e-Learning Centre, UCSC
The fundamental Rules of the Grid creation

Commonly three abstract level rules which are very useful

• Columns must be the immediate child of a Row

• Rows are only used to contain Columns, nothing else
• Rows should be placed inside a Container

IMPORTANT
The Rows & Columns always work together

32
© 2020 e-Learning Centre, UCSC
.container class
• The Container can be used to hold any elements and content
• It is not only used for holding the Grid Rows & Columns
• It is very important to control width of the layout
• The Container is also used to evenly align the left and right edges of
the layout within the browser’s viewport
• The Container is used to counteract the negative margins of the Row

Viewport: The visible area inside the browser window

33
© 2020 e-Learning Centre, UCSC
Types of containers in Bootstrap 4
• Fixed-width container to center your layout in
the middle:
<div class="container"></div>
• Full-width container for a layout the spans the
entire width:
<div class="container-fluid"></div>

34
© 2020 e-Learning Centre, UCSC
Container fixed
• The .container class provides a responsive fixed width container

35
© 2020 e-Learning Centre, UCSC
Container fluid
• The .container-fluid class provides a full width container, spanning the
entire width of the viewport

36
© 2020 e-Learning Centre, UCSC
Responsive containers
• .container-sm|md|lg|xl classes can be used to create responsive
containers
• The max-width of the container will change on different screen
sizes/viewports depending on the device

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>

© 2020 e-Learning Centre, UCSC

37
Maximum width change according to the
viewport

38
© 2020 e-Learning Centre, UCSC
Grouping columns to create wider columns

39
© 2020 e-Learning Centre, UCSC
Bootstrap Components

40
Introduction
• Components in Bootstrap can be understood as a collection of related
HTML elements each associated with predefined CSS classes in order to
generate a particular functionality and UI affect.
• Some major component packages provided with Bootstrap
• Glyphicons
• Navigation bar
• Badges
• Button
• Alerts and warnings

41
Glyphicons
• This is a library of monochromatic icons and symbols

• These are icon fonts to depict and symbolize easy and common
behaviors and contexts.

• https://glyphicons.com/ is the original vendor of Glyphicons

42
Glyphicons
• Following are some of the examples of Glyphicons

https://glyphicons.com/
43
How to use Glyphicons
• Add a span element with the CSS class of the icon.

Class of the icon

https://getbootstrap.com/docs/3.3/components/
44
How to use Glyphicons
• Example

<span class="glyphicon glyphicon-envelope”></span>

45
Navigation bar
• Before the Navigation bar there should be a Page header to a web page.

• Page header can be easily created by Bootstrap using following method

<div class="page-header">
<h1>Bachelor of Information Technology
<small>University of Colombo School of Computing</small></ h1>
</div>

46
Navigation bar
• After the page header, the next important thing is to have a
navigation bar for the user to browse through different pages of the
website.

• Following image shows a sample Navigation bar.

https://getbootstrap.com/docs/3.3/components/#navbar
47
How to add a Navigation bar to the web page
• Example
<nav class=“navbar navbar-default”>
<div class=“container-fluid”>
<div class=“navbar-header”>
<a class="navbar-brand" href="#">Home</a>
</div>
</div>
</nav>

https://getbootstrap.com/docs/3.3/components/#navbar
48
Adding features to Navigation bar
• Fix the navigation bar at the top of the browser, so it will always be
visible to the user

<nav class="navbar navbar-default navbar-fixed-top">

49
Adding features to Navigation bar
• Add icons to the menu items of the Navigation bar

<ul class="nav navbar-nav”>

<li class=“active">
<a href=“/index.html”>
<span class="glyphicon glyphicon-home”></span>Home</a>
</li>
<li>
<a href=“/contact.html">
<span class="glyphicon glyphicon-earphone”></span>Contact Us</a>
</li>
</ul>

50
Adding features to Navigation bar
• Add search box to the Navigation bar

<form class="navbar-form navbar-right visible-md-inline">

<div class="form-group" style="margin-top: 4px”>
<label class="sr-only" for=“keyword">Keyword</label>
<input type="text" class="form-control input-sm" id="search"
placeholder="Search" />
</div>
</form>

51
Badges
• Badges are simple indicators to show count of the items you want to
highlight.

• Very simple use cases are showing number of unread notifications.

https://getbootstrap.com/docs/3.3/components/#badges
52
How to add Badges
• Example

<a href="#">Notifications <span class="badge">15</span></a>

53
Buttons and Button groups
• Buttons are in several colors and sizes in Bootstrap.

https://getbootstrap.com/docs/3.3/components/#btn-groups
54
How to use Buttons
• Example

<button type="button" class="btn btn-default">default</button>

<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-success”>success</button>

55
Button groups
• Grouping a number of buttons together

56
How to create a Button group
• Example
<div class="btn-group">
<button type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-success">success</button>
</div>

57
Button groups with different sizes

58
How to create a Button group with different
sizes
• Example
<div class=“btn-group btn-group-lg”>
<button type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-danger">danger</button>
</div>

<div class=“btn-group btn-group-sm”>

<button type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-danger">danger</button>
</div>

59
Alerts
• Alerts to provide communicative information to the user, such as

• Status of the operation

• Warning messages

• Error messages

60
Alerts
• Bootstrap has four main classes of Alerts, they are
• alert-success
• alert-info
• alert-warning
• alert-danger

61
Alerts
• Following figure shows the four main classes of alerts

62
How to use Alerts
• Example

<div class="alert alert-success" role="alert">Success</div>

<div class="alert alert-info" role="alert">Info</div>
<div class="alert alert-warning" role="alert">Warning</div>
<div class="alert alert-danger" role="alert">Danger</div>

63
Most common bootstrap components

• You may find a number of components available in the bootstrap

documentation.
• Highly encourage to practice the sample code segments in the
documentation guide of the official bootstrap site
(https://getbootstrap.com/docs/3.3/components/)

64
Most common bootstrap components
• Outline
• Dropdowns
• Button Dropdowns
• Form inputs controls
• Input box
• File input field
• Check boxes
• Radio buttons
• Reference for further items

65
Dropdowns
• Bootstrap dropdown can be used to
provide a list of selections.
• Dropdown plugin from java script can add
interactivity to bootstrap dropdowns
• Button element and unordered list can be
used to create dropdowns easily

66
The button component in dropdown
• Use a simple button to show the list of items upon clicking

Button class definition

Important to link with list

<button class="btn btn-default dropdown-toggle" type="button" id=“dropMenu">

Dropdown
<span class="caret"></span> Shows the little downward arrow head
</button>

67
Creating dropdown list
• Specify the list of items as an unordered list in HTML
• CSS class “dropdown-menu”in bootstrap is used to add the styling

<ul class="dropdown-menu“ >

<li><a href="#">Item one</a></li>
<li><a href="#"> Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Any other</a></li>
</ul>

68
 Code example for a basic dropdown
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropMenu">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby=“dropMenu">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Other links</a></li>
</ul>
</div> 69
Adding separator to drop down
• Role attribute is used to define the separator and class “divider” in
bootstrap will apply the styling

• Example:
<li> Items before the separator </li>
<li role="separator" class="divider"></li>
<li> Items after the separator </li>

70
Specifying disabled items in a dropdown
• To disable a certain item in the dropdown list you can use the class
“disable” as below.

<ul class="dropdown-menu" aria-labelledby="dropMenu">

<li><a href="#">Item one</a></li>
<li class="disabled"><a href="#">Item two - disabled</a></li>
<li><a href="#">Item three</a></li>
</ul>

71
Button group for split button dropdown
• Using two buttons, you can create a split drodown.
• Specifying the type of the button using the respective class (Eg:
default, primary, danger, info etc.) look and feel of the split button
dropdown canbe customized.

72
Example: split button dropdown
<div class="btn-group">
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Acer</a></li>
<li><a href="#">Dell</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Toshiba</a></li>
</ul>
</div>

73
Adding drop up variation
• In div tag, use the classes “btn-group” and “dropup” to create a list of
items to expand upward

<div class="btn-group dropup">

……………………..
……………………..
……………………..
</div>

74
Complete example First button Second button

<div class="btn-group dropup">

<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Acer</a></li>
<li><a href="#">Dell</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Toshiba</a></li>
</ul>
</div>

75
Form controls
• In bootstrap, form controls are styled with the class “form-controls”
• Form groups used to organize controls within the form
• <input>, <select>, <textarea> tags can be styled using “form-controls”
class.
• Example,
• Changing the size
• Appearance of the controls, etc.

76
Form group and control example
Create form group and enclose the form controls in it
Use form-group class and form-control class

<div class=“form-group”>
<label for=“input-1”>Email address</label>
<input type=“email” class=“form-control” id=“input-1” >
</div>

77
Adding file input field to form
• File input fields allow user to browse and select files
• Here form-control class will be changed to form-control-file

<form>
<div class=“form-group”>
<label for=“file-input”>File input</label>
<input type=“file” class=“form-control-file” id=“file-input">
</div>
</form>

78
Readonly attribute in input controls
• Readonly attribute prevents editing the content of the input
• Shows the cursor but can not edit

<input class=“form-control” type=“text” readonly>

• form-control-plaintext class will remove the standard styling of the

input field and show readonly content as plain text

<input type=“text” readonly class=“form-control-plaintext“>

79
Check boxes
• Allow users to select multiple options
• form-check class changes the default look and feel and behavior of
the element
• disabled attribute is used to disable the check box
<div class="form-check">
<input class="form-check-input" type="checkbox" id=“check-2” disabled>
<label class="form-check-label" for="check-2 ">
Disabled checkbox
</label>
</div>
80
 Radio buttons
• Radio buttons are used to select one option out of multiple options
• form-check class changes the default look and feel and behavior of
the element
• disabled attribute is used to disable the check box

<div class="form-check">
<input class=“form-check-input” type=“radio” id=“radio” value=“radio-3” disabled>
<label class=“form-check-label” for=“radio”>
Disabled radio
</label>

81
Further reference
• There are a lot of controls and classes available
• Refer the bootstrap documentation given in the beginning
• Practice with practical examples available in the reference
• Do more customizations apart from the basics and commonly used
controls discussed in the slides

82