Bootstrap

ITIS243
Resources:
1. Official Bootstrap Website (http://getbootstrap.com/)
2. W3 Schools (http://www.w3schools.com/bootstrap/default.asp )
3. Tutorial Point (http://www.tutorialspoint.com/bootstrap/)
4. Tutorial Republic (http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/ )
5.
Randy
Connolly
Connolly
andand
HoarRicardo
(2015) Hoar
Fundamentals of WebFundamentals
Developmentof– Web
Sections
Development
5.6 & 5.7
Textbook to be published by Pearson Ed in early 2014
1
http://www.funwebdev.com
 Mobile vs. Desktop Views
More websites were viewed on mobile devices and tablets
than desktops for the first time ever in October 2016

http://qz.com/825014/mobile-website-views-surpassed-desktop-views-for-the-first-time-ever-in-october-2016/
2
 What is Bootstrap?
• A CSS framework is a pre-created set of CSS classes and other software tools that
make it easier to use and work with CSS.
• Bootstrap is the most popular and powerful front-end (HTML, CSS, and JavaScript)
framework for faster and easier responsive web development.
• It includes HTML and CSS based design templates for creating common user interface
components like Typography, Forms Controls, Tables, Buttons, Navigations,
Dropdowns, Alerts, Modals, Tabs, Accordions, Carousels, Tooltips, and so on.
• Bootstrap gives you ability to create flexible and responsive web layouts with much
less efforts.
• Bootstrap was originally created by a designer and a developer at Twitter in mid-
2010. Before being an open-sourced framework, Bootstrap was known as Twitter
Blueprint.
• You can save a lot of time and effort with Bootstrap.
• Current version is Bootstrapv5.3.0-alpha3;

3
What You Can Do with Bootstrap
There are lot more things you can do with Bootstrap.

•Easily create
•responsive websites;
•components like accordions, modals, etc. without writing any JS code;
•dynamic tabs to manage large amount of content; tooltips and popovers to
show hint text;
•carousel or image slider to showcase your content;

•Quickly create
•multi-column layout with pre-defined classes;
•different types of form layouts;
•different variation of navigation bar;
•different types of alert boxes.

The list does not end here, there are many other interesting things that you can do
with Bootstrap.

4
Advantages of Bootstrap
1. Save lots of time: by using the Bootstrap predefined design
templates and classes and concentrate on other development work.
2. Responsive features: web pages to appear more appropriately on
different devices and screen resolutions without any change in
markup.
3. Consistent design— All Bootstrap components share the same
design templates and styles through a central library, so the design
and layout of your web pages will be consistent.
4. Easy to use: Bootstrap is very easy to use. Anybody with the basic
working knowledge of HTML and CSS can start development with
Bootstrap.
5. Compatible with modern browsers — Bootstrap is created with
modern web browsers in mind and it is compatible with all modern
browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
6. Open Source: And the best part is, it is completely free to download
and use.
5
 Responsive Design
Bootstrap also gives you ability to create responsive
layout with much less efforts.
Responsive web design is a process of designing and
building websites to provide better accessibility and
optimal viewing experience to the user by optimizing it
for different devices.
With the growing trend of smart phones and tablets, it
has become almost unavoidable to ignore the
optimization of sites for mobile devices. Responsive
web design is a preferable alternative and an efficient
way to target a wide range of devices with much less
efforts.
Responsive layouts automatically adjust and adapts to
any device screen size, whether it is a desktop, a
laptop, a tablet, or a mobile phone. See the following
Illustration.

6
What is The Viewport?
• The viewport is the user's visible area of a web page.
• The viewport varies with the device, and will be smaller on a mobile
phone than on a computer screen.
• Before tablets and mobile phones, web pages were designed only
for computer screens, and it was common for web pages to have a
static design and a fixed size.
• Then, when we started surfing the internet using tablets and mobile
phones, fixed size web pages were too large to fit the viewport.
• To fix this, browsers on those devices scaled down the entire
web page to fit the screen.
• This was not perfect!! But a quick fix.

7
 Viewport

Without the viewport meta tag With the viewport meta tag
8
Setting The Viewport
• HTML5 introduced a method to let web designers take control over
the viewport, through the <meta> tag.
• You should include the following <meta> viewport element in all
your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• A <meta> viewport element gives the browser instructions on how

to control the page's dimensions and scaling.
• The width=device-width part sets the width of the page to follow the
screen-width of the device.
• The initial-scale=1.0 part sets the initial zoom level when the page is
first loaded by the browser.

9
 Bootstrap Essentials
1. Add the HTML5 doctype: Bootstrap uses HTML elements and CSS
properties that require the HTML5 doctype and the needed
elements
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">

2. Bootstrap 3 was mobile-first: Bootstrap 3 was designed to be

responsive to mobile devices. Mobile-first styles are part of the
core framework.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

10
 Including Bootstrap
• There are different ways to include Bootstrap framework files into your
pages:
1. Download and host the Bootstrap files.
2. Include Bootstrap from a CDN (Content Delivery Network) host.
This is faster and easier option for our course.
• To apply the second way, include in the following code in your header:
for BootStrap 5
For CSS: <link rel=“stylesheet” href=https://cdn.jsdelivr.net/npm/[email protected] /dist /css / bootstrap.min.css

For JavaScript: <Script src=https://cdn.jsdelivr.net/npm/[email protected] /dist/js /bootstrap.bundle.min.js>

or For BootStrap3
For CSS: <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
For Jquery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></sc
For JavaScript: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js

11
Bootstrap Features

• Bootstrap has loads of predefined classes and

components, these include:
• Responsive Grid System
• Navigation
• Glyphicons
• Form controls
• Themes customisation
• and many more…
• We are only going to cover some of these.

12
 What is Bootstrap Grid System?
Bootstrap grid system provides an easy and powerful way to create responsive layouts of
all shapes and sizes. It is built with flexbox with mobile-first approach.

Also, it is fully responsive and uses twelve column system (12 columns available per row)
and six default responsive tiers grid Classes provides better control over the layout as well
as how Bootstrap's predefined grid classes will be rendered on different types of devices
like mobile phones, tablets, laptops and desktops, large screen devices, and so on.
For example, you can use the .col-* classes to create grid columns for extra small
devices like mobile phones in portrait mode, and the .col-sm-* classes for mobile
phones in landscape mode.

Similarly, you can use the .col-md-* classes to create grid columns for medium screen
devices like tablets, the .col-lg-* classes for devices like small laptops, the .col-xl-
* classes for laptops and desktops, and the .col-xxl-* classes for large desktop
screens.

13
Understanding the Flex Layout Model
Flexible box, commonly referred to as flexbox, is a new layout model
introduced in CSS3 for creating the flexible user interface design with
multiple rows and columns without using the percentage or fixed
length values. The CSS3 flex layout model provides a simple and
powerful mechanism for handling the distributing of space and
alignment of content automatically through stylesheet without
interfering the actual markup.

14
 The following table summarizes the key features of the Bootstrap's grid system.

• Above table demonstrates one important thing, applying any .col-sm-* class to an element
will not only have an effect on small devices, but also on medium, large and extra large devices
(viewport width ≥768px), if a .col-md-*, .col-lg-*, .col-xl-*, or .col-xxl-* class is not
present.
• Similarly, the .col-md-* class will not only have an effect on medium devices, but also on
large and extra large devices if a .col-lg-*, .col-xl-*, or .col-xxl-* class is not present.
• Now the question arises how to create rows and columns using this 12 column responsive grid
system. The answer is pretty simple, at first create a container that acts as a wrapper for your
rows and columns using any container classes such as .container, after that create rows
inside the container using the .row class, and to create columns inside any row you can use
the .col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* and .col-xxl-* classes.
• The columns are actual content area where we will place our contents.
15
 Containers

• Bootstrap also requires a containing element to wrap site

contents.
• There are two container classes to choose from:
1. The container class provides a responsive fixed width
container.
2. The container-fluid class provides a full width
container, spanning the entire width of the viewport.
Note: Containers are not nestable (you cannot put a container
inside another container).

16
Container and Container-fluid

17
 Grid System
• The Bootstrap Grid System visualizes the webpage into a
series of rows and columns, i.e. a grid.

• The gird allows up to 12 columns across the page.

• If you do not want to use all 12 column individually, you
can group the columns together to create wider columns.
• For example: a 6-6 split, 4-4-4, 9-3, or 3-6-3….

18
 Applying the Columns
• Single Rows use the class row.
• All columns inside a row are use the class form: col-xx-y.
Where xx is the intended size (xs, sm, md, lg) and y is a
column span size (from 1 to 12).
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-6"><!--Column left--></div>
<div class="col-md-6"><!--Column right--></div>
</div>

<!--Row with two columns divided in 1:2 ratio-->

<div class="row">
<div class="col-md-4"><!--Column left--></div>
<div class="col-md-8"><!--Column right--></div>
</div>

19
 Grid System
XS, SM, MD and LG

• The Bootstrap grid system works with four screen

size classes:
1. xs: for phones
2. sm: for tablets
3. md: for desktops
4. lg: for larger desktops
xs sm md lg
Column Size Extra small devices Small devices Medium devices Large devices
Phones (<768px) Tablets (>=768px) Desktops (>=992px) Desktops (>=1200px)

Grid behaviour Horizontal at all times Collapsed to start, Collapsed to start, Collapsed to start,
horizontal above horizontal above horizontal above
breakpoints breakpoints breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)

20
Grid System - lg
Large

21
Grid System - md
Medium

22
Grid System – sm & xs
Small X-Small

23
Combining Grid Classes
• You can combine these classes in one class, for
example on a desktop screen you can have a 9/3 split
and small screens, and a 6/6 split for medium screens.
• Each class scales up, so if you wish to set the same
widths for xs and sm, you only need to specify xs.
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-sm-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-sm-3 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>

24
 Grid Offset

• Create a gap between your columns using a grid offset

• Move columns to the right using .col-md-offset-* classes.
These classes increase the left margin of a column by *
columns:

<div class="row">
<div class="col-md-6 col1">.col-md-6</div>
<div class="col-md-5 col-md-offset-1">.col-md-5 and offset-1</div>
</div>

25
Visible or Hidden Element

• We can specify a screen size for elements to be

visible or hidden according to different screen sizes.
• Use class visible-xx or hidden-xx in a div to
show or hide the element in that screen mode.
• Example: Only show the img element in medium
and large resolutions:

<div class='visible-md visible-lg'>

<img src='images/blast.png' alt='Blasting Off' />
</div>

26
 Visible or Hidden Element

Classes xs sm md lg
.visible-xs-* Visible Hidden Hidden Hidden
.visible-sm-* Hidden Visible Hidden Hidden
.visible-md-* Hidden Hidden Visible Hidden
.visible-lg-* Hidden Hidden Hidden Visible
.hidden-xs Hidden Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible
.hidden-md Visible Visible Hidden Visible
.hidden-lg Visible Visible Visible Hidden

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
27
 Navigation Bar
1. Create a list of links for the navigation bar
2. Encompass the list with nav HTML5 element and add the
class navbar and navbar-default.
3. Include a div with class navbar-header and inside that an a
element for the site title with navbar-brand class.
4. Assign the list with a nav navbar-nav class and a
navbar-right class to aligned it to the right .
5. Set a highlighted active link with class active.
<nav class="navbar navbar-deafult">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">WebSiteName</a>
</div>
<ul class="nav navbar-nav navbar-right ">
<li class="active"><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
</ul>
</div>
</nav> 28
Navigation
Pills and Tabs

• That’s how the navigation bar appears:

• Navigation links appearance can be changed to:

-Pills <ul class="nav nav-pills">

-Tabs <ul class="nav nav-tabs">

29
 Dropdown Links Menu

• Navigation bars can also hold dropdown menus. To add a drop down
list to a link item:
1. Add a class dropdown to the link list item
2. Add a class dropdown-toggle; an attribute data-toggle=
"dropdown" and a span with class caret.

3. Add a class dropdown-menu to the drop down link list items.

30
 Dropdown Links Menu

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>

31
Creating Basic Nav with Bootstrap
You can use the Bootstrap .nav class to create a basic navigation menu, like this:

Alignment of Nav Items

By default, navs are left-aligned, but you can easily align them to center or right using flexbox utilities.
The following example uses the class .justify-content-center to align nav items to center.

you can align nav items to right using the class .justify-content-end, like this:

32
you can even vertically stack your nav items by changing the flex item direction with the class .flex-column.
Also, if you want to stack your nav vertically on smaller viewports but not on others, use it with responsive
breakpoint (e.g., .flex-sm-column).

Creating the Basic Tabs

add the class .nav-tabs to the basic nav to generate a tabbed navigation, like this:

33
 You can also add icons to your tab items to make it more attractive, as shown here:

You can add dropdown menus to a link inside tabs and pills nav with a little extra markup.

The four CSS classes .dropdown, .dropdown-toggle, .dropdown-menu and .dropdown-

item are required in addition to the .nav, .nav-tabs or .nav-pills classes to create a
simple dropdown menu inside tabs and pills nav without using any JavaScript code.

34
Creating the Pills Nav
Similarly, you can create pill based navigation by adding the class .nav-pills on the basic nav instead of
class .nav-tabs, as shown in the following example:

Similarly, like nav tabs you can also add icons to your pills nav to make it more attractive:

35
Bootstrap Nav with Dropdown Menus
You can add dropdown menus to a link inside tabs and pills nav with a little extra markup.
The four CSS classes .dropdown, .dropdown-toggle, .dropdown-menu and .dropdown-item are
required in addition to the .nav, .nav-tabs or .nav-pills classes to create a simple dropdown
menu inside tabs and pills nav without using any JavaScript code.

Creating Tabs with Dropdowns

The following example will show you how to add simple dropdown menu to a tab.

36
Creating Pills with Dropdowns
The following example will show you how to add simple dropdown menu to a pill nav.

37
Fill and Justify Nav Component
You can force your .nav-items to extend and proportionately fill all available width using the class .nav-fill on
the .nav element. In the following example all horizontal space is occupied by the nav items, but every nav item
doesn't have the same width.

Alternatively, you can use the class .nav-justified instead of.nav-fill, if you want nav that
fills all horizontal space as well as every nav item has the same width.

38
 Glyphicons

• Bootstrap includes 260

glyphs, available for
Bootstrap free of cost.
• Use glyphicons in text,
buttons, toolbars, navigation,
or forms.
• Examples

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>

<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>

39
 Bootstrap Icons
Glyphicons are not supported in Bootstrap 4 & 5, Instead they have Bootstrap Icons

Using Icons in Bootstrap 5

Bootstrap now includes over 1,300 high quality icons, which are available in SVGs (Scalable Vector
Graphics), SVG sprite, or web fonts format. Can be used with or without Bootstrap in any project.

The advantage of using font icons is,

 can create icons of any color just through applying the CSS color property.
 to change the size of icons you can simply use the CSS font-size property.

how to include and use Bootstrap icons on a web page.

The simplest way to include Bootstrap icons in a web page is using the CDN link. This CDN link
basically points to a remote CSS file that includes all the necessary classes to generate font icons.

How to use Bootstrap icons?

Step 1: Include the following Bootstrap CDN link in the <head> section of the HTML document.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
Step 2: To place icons into the web page use the syntax

<i class="bi-*"></i> where * represent the class of a particular icon.

So, if an icon class is alarm then the icon HTML code would be <i class="bi-alarm"></i>,
similarly if the icon class is arrow-down the resulting icon HTML code would be <i class="bi-arrow-down"></i>, and so on.
You can include Bootstrap icons in a Bootstrap template as well as in a simple web page without using the
Bootstrap framework.
40
Many more components
And themes and customizations

• Use the resources listed on the first slide to learn more

about Bootstrap components and features. Particularly
the official Bootstrap and W3 Schools websites.

Typography
41
Typography styling and formatting of text content like headings,
paragraphs, blockquotes, and so on with Bootstrap.

Working with Headings

Define all HTML headings, <h1> through <h6> — In the same way you define in simple HTML document. Also
utilize the heading classes .h1 through .h6 on other elements, if you want to apply the style on element's text
same as headings.

Customizing Headings
Additionally, you can use the <small> tag with .text-muted class to display the secondary text of any heading
in a smaller and lighter variation.

42
Display Headings
Bootstrap also provides display headings that can be used when you need a heading to stand out.
Display headings are displayed in larger font-size but lighter font-weight.
Six different display headings are available.

Working with Paragraphs

Bootstrap's global default font-size is 1rem (typically 16px), with a line-eight of 1.5 (typically
24px), which is applied to the <body> element as well as all the paragraphs i.e. the <p> elements.
In addition to that margin-bottom of 1rem is also applied to all the paragraphs.
You can also make a paragraph stand out by adding the class .lead on it.

In CSS rem stands for "root em". 1rem is equal to the font size of the root element (i.e.
the <html> element), which is 16px in most browsers by default . 43
44
45
also align blockquotes to the right or center by simply applying the text alignment classes .text-end or .text-center on
the <blockquote> or <figure> element.

When providing attribution, wrap your <blockquote> in a <figure> element and use a <figcaption> or a
block level element (e.g., <p>) with the .blockquote-footer class, like this:

also align blockquotes to the right or center by simply applying the text alignment classes .text-end or .text-center on
the <blockquote> or <figure> element.

46
Creating Carousel with Captions
You can also add captions to carousel slides easily with the .carousel-caption element within any
.carousel-item. You can optionally use display utility classes to hide captions on smaller viewports.

47
48
 Bootstrap Buttons
Bootstrap Button Styles
Different classes are available in Bootstrap for styling the buttons as well as to indicate the different states or
semantic. Button styles can be applied to any element. However, it is applied normally to the <a>, <input>,
and <button> elements for the best rendering.

49