Digital Media Technologies

MM211
Responsive Web Design with

Zoubeir Aungnoo
 Learning Outcomes
• Bootstrap definition
• Download & installation
• Grid System
 Setup working environment
• Starting state of HTML provided to you in
Exercise folder – organised by chapter number
• Create a working folder called Bootstrap3
– Will contain Bootstrap’s CSS, JS and fonts + images
• Tools:
1. Text Editor: VS Code
– Setup Sublime Text to work with Bootstrap3
folder
• Project > Add Folder to Project
2. Web Browser: Any web browser you prefer
 What is Bootstrap?
• Responsive design framework
– Easily & quickly build websites and web apps
• Can build static web sites and dynamic web
apps
– Use Bootstrap as it is out of the box or combine
with PHP or CMS to turn it more dynamic
• Controls the front end design of your site
– Without having to know a ton of HTML and CSS
 What is Bootstrap?
• Used by a number of different organisations
• Portfolios:
1. Builtwithbootstrap.com
2. Lovebootstrap.com
3. expo.getbootstrap.com (official)
 What’s new in Bootstrap 3?
• Mobile-first approach (from ground up)
– Some work has been done for you so that you do
not have to think about certain aspects of your
designs. E.g. The grid system
• Grid system
– 4 different sized grids: Extra Small, Small, Medium
and Extra Large
– Great way for laying out webpages
– Very customizable
 What’s new in Bootstrap 3?
• CSS
– Flexible CSS
– Including LESS CSS: a CSS pre-processor system
that you can use to centralize your styles
• Customize Bootstrap the way you want
• Browser support
– Dropping support officially for IE7 and for Firefox
3.6
– will be supporting Internet Explorer 8 (minor
modifications needed) and higher.
 Any disadvantages?
• Code Bloat
– But these extra lines of code increases flexibility to
address different situations
• Takes time to learn
 Download & Install Bootstrap
1. Go to getbootstrap.com
2. Downloaded file bootstrap-3.3.5-dist.zip
contains 3 sub-folders: css, fonts & js
– The heart of Bootstrap. That's all you need.
3. Create a folder called Bootstrap3
4. Copy the css, fonts & js folders you
downoaded and paste them inside the
Bootstrap3 folder
 Examining Bootstrap file structure
1. css folder: 4 stylesheets ship with Bootstrap
– *.css vs *.min.css
2. fonts folder: 4 fonts available – same fonts
but in different formats
– Support the glyphicon fonts available
– Series of icons that can be used in your website
design
3. js folder: bootstrap.js & bootstrap.min.js
– Note: also need to download jQuery &
respond.js
 Adding CSS to a Bootstrap HTML file
A. Add meta tag
1. Copy Exercise>Chapter 1>01_04>index.html into
Bootstrap3 folder
2. Open Exercise>Chapter 1>01_04>additional.txt
and copy its content and paste into index.html
after <meta charset="utf-8">
 Adding CSS to a Bootstrap HTML file
A. Add meta tag
• <meta name="viewport" content="width=device-
width, initial-scale=1.0">
– Purpose of this meta tag: to scale screens
correctly irrespective of small screens or large
ones.
B. Link to Bootstrap stylesheet
– Afer <title> tag, add a declaration to Bootstrap's
stylesheet:
• <link href="css/bootstrap.min.css" rel="stylesheet“>
 Adding CSS to a Bootstrap HTML file
C. Link to custom stylesheet
– add another declaration to our custom stylesheet:
• <link href="css/custom.css" rel="stylesheet">

D. Create the custom stylesheet

– Create a file named custom.css in the css folder.
• This will contain css which we will be added later.
 Adding CSS to a Bootstrap HTML file
.
Adding JS to a Bootstrap HTML file
• Need to link to 3 JavaScript files:
– jQuery, Bootstrap's JavaScript and Respond.js
A. jQuery
– Download your own copy

– Find a copy of jQuery in Exercise>Chapter 1>01_05 folder.

 Adding JS to a Bootstrap HTML file
A. jQuery
– Use CDN
1. In the body of your document, just above
</body>, place this link:
• <script src="//code.jquery.com/jquery-
1.11.3.min.js"></script>
B. Bootstrap’s JavaScript
1. Add a link to Bootstrap's JavaScript file:
• <script src="js/bootstrap.min.js"></script>

Note: It is important to put it after jQuery because it depends on jQuery. So, we need
the jQuery library to load first before Bootstrap loads.
Adding JS to a Bootstrap HTML file
C. Respond.js
– Helps older versions of IE understand HTML5
semantic markup and other various
incompatibilities with IE.

1. Copy file Exercise>Chapter 1>01_05>respond.js

and paste in Bootstrap3>js folder

2. Add a link to Respond.js in the head section:

• <script src="js/respond.js"></script>
 Bootstrap HTML file template
.
 Using CDN
• Alternatively use the following template
• Bootstrap files are linked to using CDN

• Available @ https://getbootstrap.com/docs/5.1/getting-started/introduction/
 Exploring Bootstrap’s Grid System
• 12 column grid system
• Mobile first
– Designed for you to think about small screen first
– Then think about larger desktop design
afterwards
• 4 sizes to this grid:
– http://getbootstrap.com/css/#grid
 Exploring Bootstrap’s Grid System
• .
Exploring Bootstrap’s Grid System
• XS
– Designed for very small devices: phones
– <768 px
– Designed to be horizontal at all times
• SM, MD & LG
– Designed to be horizontal and at break points
they will stack.
– Breakpoints: >= 768 for SM, >= 922 for MD, >= 1200 for LG
– As grid goes narrower, SM, MD and LG grid will simply
stack vertically.
 Exploring Bootstrap’s Grid System
• Copy grid.html from Exercise>Chapter
2>02_01 folder into Bootstrap3 folder.
• First row - 'master example grid‘: 3 cells:
coded using all 4 grid sizes
– Depending on screen resolution for the width, it's
going to display the name of the grid that's in use
inside each of the cells.
• Use of visibility classes
• Other rows: coded with one grid system alone
 Which grid system to use?
• Can use all four of the grid systems together
in what you're doing
• Or can use just one/two/three depend on
your design and what you’re trying to achieve
• It really boils down to, how do things
look and how do you want them presented
on various devices
 Creating new rows & cells
• Copy folder img & 02_02.html from
Exercise>Chapter 2>02_02 into Bootstrap3
• row 1 @ line 13
• row 2 - text + desc
• row 3 @ line 23 - 4 of these units of a picture, header,
text + read more link.
• row 4 @ line 41 – footer

• Add Bootstrap markup

– Step 1: Set Rows
 Creating new rows & cells
– Step 2: Set Columns (start @row3)
Step2.1
• Set 4 cols going across the page @ desktop resolution
• We’ve 12 cols and we want 4 boxes. Therefore each
should be 3 cols wide.

• Repeat same pattern for the other boxes.

• As I go smaller, @ the medium break point, it goes
vertical.
 Creating new rows & cells
Step2.2
• Better if I had 2 boxes next to each other @lower res.
• Therefore make a call to another grid
• Remember the XS grid stays horizontal no matter what.
Everything has to add up to 12 except XS grid.
• Therefore in addition to col-md-3 we can add:
 Creating new rows & cells
– Setup row1:We'd like the logo on the left and
animals on the right.

• We add the SM grid to allow the logo and animals to

get closer together.
 Creating new rows & cells
• Class=“container”

• Issue: all images staked and pushed tight and

problem resizing.
– Will deal with responsive images later.
 Adjusting col widths using offset
• Process of having more space between two
columns on the page.
• Copy file Exercise>Chapter
2>02_03>02_03.html into Bootstrap3
Aside – 3 cols Empty – 1 col Article – 8 cols (offset)

– That’s what offset is all about

• @row2
– Reduce by 1 the size of the cols (LG grid first)
– Set the offset class
– Repeat for the SM grid
 Adjusting col widths using offset
• .

• Offset the <article> because offsetting always

add to the left side.
 Changing col order using push & pull
• Reordering your cols – new feature

• Copy file Exercise>Chapter

2>02_04>02_04.html into Bootstrap3

• @Mobile version of the site:

– We'd like the text about services (main <article>)
to appear at the top of the page and blurb of text
about dental medicine (<aside>) underneath.
 Changing col order using push & pull
1. Ensure source code in right order:
– Cut the <aside>...</aside> section and paste it
after the </article>
• This is ok only for the mobile version of the site. We
need to adjust it for the larger versions.
2. Add extra classes
– Row2 @line 26 in the <article>:
– Add col-lg-push-3 then add col-sm-push-4
 Changing col order using push & pull
3. pull:
• Have some empty spaces over there to the left
of the article.
• We want to pull back the aside across the
page, towards the left to make it appear over
there in that empty space.
• Add col-lg-pull-9 and col-sm-pull-8

<aside class="col-lg-3 col-sm-4 col-lg-pull-9

col-sm-pull-8“>
 Nesting Rows
• The concept of nesting rows in your layouts.
• Work with Exercise>Chapter
2>02_05>02_05.html
• Same page but with 4 additional cols at the bottom.
All work fine. Nothing wrong.

• Improvement: @larger dimension, we want the 4 cols

to show up underneath the services information.

• Solution: simply nest the whole row 3 @line 38

inside of <article> in row 2
 JumboTron-Style Layout
• Top Area of the webpage with big picture
occupying all 12 cols in all grid systems.
e.g. Paypal website
• Working with Exercise>Chapter
2>02_06>02_06.html
– row 2 @line24: we are going to put the Jumbotron
here.
– Instead of saying a div with a class of row, we're
just going to say a div with a class of Jumbotron.
– Add class of pull-right in <div class=“jumbotron” >
• To float the image to the right
 Recap
• Row
• Col: col-lg-x, col-md-x, col-sm-x, col-xs-x
– Add up to 12
• Container
• Offset
• Push & Pull
• Jumbotron