Angular 4

Lesson 5—Introduction to Bootstrap

© Simplilearn. All rights reserved.

 Learning Objectives

By the end of this lesson, you should be able to:

Explain Responsive Web Design (RWD)

Discuss Bootstrap Grid System

Describe Bootstrap Components

Introduction to Responsive Web Design (RWD)

There was a time when User Interface (UI) was not a concern.
Introduction to Responsive Web Design (RWD)

Since 1968 , many UI innovations have happened.

 Introduction to Responsive Web Design (RWD)

Many companies have successfully created excellent designs for their web applications.
 Introduction to Responsive Web Design (RWD)

But today, just a unique web application screen is not enough. We need "Responsive Web Design (RWD).
Introduction to Bootstrap
Topic 1—What is Responsive Web Design (RWD)
 What Is Responsive Web Design?

A Responsive Web Design is browser-responsive and can adapt to screens of any size.
 Responsive vs. Adaptive

A responsive web design is a fluid design that responds to the browser and can
Responsive
resize according to the screen size with no empty spaces on the sides.

Adaptive An adaptive design adapts to the screen size only at specific points.

Responsive Web Design

 Relative vs. Static Units

Relative units like percentages can adapt to any screen, unlike static units such as pixels.

100% 600px

50% 50% 300px 300px

Relative units Static units

 Flow vs. Static

The flow in a responsive web design helps the content to smoothly adjust when the screen size changes,
which does not happen in static screens.

Flow Static
 With Breakpoints vs. Without Breakpoints

The presence of breakpoints allows you to adapt your content to the screen size when screen size changes.

With Breakpoints
Without Breakpoints
 Vectors vs. Images

A vector adapts to the resolutions of the retina, and its quality is independent of the screen resolution.

Vector Image
 Mobile First

To develop a mobile-first design:

• Start with CSS development for mobile device, followed by media

queries to adapt to desktops and tablets.

• You also need to determine the content that is most important.

 Why Mobile First?

It will be a design independent of the screen size.

It helps avoid overwriting of code.

Millions of
mobile users
worldwide
It will narrow down the website information to a convenient portion.
Introduction to Bootstrap

Topic 2—Bootstrap 3
 Bootstrap

HISTORY

Bootstrap was first Bootstrap 2 was Bootstrap 3.0

created at Twitter released was shipped
January 2012 August 2013
Mid 2010

August 2011 February 2012

Bootstrap was Bootstrap became the most
launched as an open starred development project of
source project GitHub
 Main Features of Bootstrap

One framework Full of

Preprocessors for every device features
Features of Bootstrap 3

New flat design

SAAS support

JavaScripts are rewritten

New powerful Grid system

New Glyphicons icon font

Mobile-first approach

New components
 Advantages of Bootstrap 3

You can create a web It is a natively It is easily and fully

application very fast responsive framework customizable
 Disadvantages of Bootstrap 3
There is not much difference in the look of the website created using Bootstrap 3.

Bootstrap does not offer backward compatibility between versions.

Bootstrap 2 to Bootstrap 3
 Competitors

Bootstrap offered by Twitter is the top front-end developing tool.

But there are other alternatives in the field.

VS.
VS.

Bootstrap Foundation Skeleton

Introduction to Bootstrap
Topic 3—Creating a Responsive Web Application
 Responsive with Bootstrap 3

Bootstrap 3 helps you to create responsive and mobile-friendly websites easily.

It offers:

Grid system

CSS3 media queries Responsive embed and

flexible image

Responsive utilities
 Use of @media Rule

With @media rule in Bootstrap 3, you can have a different layout for all screens, including
tablet, mobile, and desktops.
 Introduction to Grid Systems

In Bootstrap 3

• Grid system permits a maximum of 12 columns in a page.

• You can group and create wider columns instead of using them individually.

• For decent organization and padding, place the rows within .container-fluid (full-width) or a

.container (fixed-width).

• Group columns horizontally using rows.

• Create grid columns by specifying the number of available 12 columns you wish to span.

For example, 3 equal columns would use three .col-xs-4.

• Place the content within columns, and only columns may be immediate children of rows.
 Grid System

In Bootstrap 3, the grid system presents a swift and simple way to build responsive website layouts.
 Bootstrap Grid Classes

The Bootstrap grid system has four classes:

lg (for larger
xs (for phones) sm (for tablets) md (for desktops)
desktops)

These classes can be combined to create more dynamic and flexible layouts.
 Bootstrap Grid Classes

This is a basic Bootstrap grid structure :

<div class="row">

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

</div>
 Responsive Utilities

For quick mobile-friendly development, Bootstrap offers you utility classes.

 Bootstrap Components

Bootstrap 3 offers various components:

• Labels • Badges
• Panels • Dropdowns
• Jumbotron • Button groups
• Page Header • Glyphicons
• Navbar • Button Drops
• Thumbnails • Breadcrumbs
• Alerts • Input groups
• List group • Navs
• Page Header • Pagination
• Wells • Media Object
 Step 1: Creating First Page with Bootstrap

At the start of the page, include HTML5 doctype. Also include the lang attribute and the right character set.

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
</head>
</html>
 Step 2: Creating First Page with Bootstrap

• Add the viewport <meta> tag for proper touch zooming and rendering

• Adjust the width of the page and the initial zoom level per your device

• This will ensure that you have a better experience, and there will be no need for zooming
 Step 3: Creating First Page with Bootstrap

• Include the following files:

o bootstrap.min.css

o jquery.min.js

o bootstrap.min.js

• Download these files and include in your page. In this example, we include them from the Internet:

<link rel=“stylesheet”
href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script
src=“https://ajax.googleapis.com/ajax/libs/jquesry/3.1.1/jquery.min.js”></script>
<script
src=“https://maxcdn.bootstrapcdn.com/ajax/bootstrap/3.3./js/bootstrap.min.js”></script>
 Step 4: Creating First Page with Bootstrap

In Bootstrap 3, you can include elements to wrap the site contents.

<div class=“container”>
<h1>My First Bootstrap Page</h1>
<p>this is some text.</p>
</div>

<div class=“container-fluid”>
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
 Bootstrap Grids

• Grid system allows a maximum of 12 columns in a page.

• Each container can be divided into rows and each row into columns with the space multiple 12.
 Bootstrap Grids

Example:

• In this example, the space inside the container is divided into a single row and the row is divided into 3
columns.
• Each column has the same sides, that is, 4+4+4 = 12
• Any possible combination that sums up to 12 can be used.

<div class=“container”>
<h1>Bootstrap Grid</h1>
<div class=“row”>
<div class=“col-sm-4”>.col-sm-4</div>
<div class=“col-sm-4”>.col-sm-4</div>
<div class=“col-sm-4”>.col-sm-4</div>
</div>
 Bootstrap Grids

Output:
Here is what a responsive grid system in Bootstrap 3 with 3 columns in the page looks like:

Small Screens Big Screens

 Bootstrap Tables

There are four main and five contextual classes in Bootstrap 3 tables:

1. .table
Main Classes 2. .table-striped
3. .table-bordered
Contextual Classes
4. .table-hover
 Bootstrap Tables

There are four main and five contextual classes in Bootstrap 3 tables:

1. .active
Main Classes 2. .success
3. .info
Contextual Classes
4. .warning
5. .danger
 Bootstrap Tables—Example
<div class=“container”>
<h1>Bootstrap Table</h1>
<table class=“table table-stripped table-bordered table-hover”>
<thead>
<tr>
<th>Firstname</th>
<th>lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Joseph</td>
<td>saints</td>
<td>[email protected]</td>
</tr>
<tr class=“warning”>
<td>Mary Help</td>
<td>saints</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
 Bootstrap Tables—Example

Output:

Firstname Lastname Email

John Doe [email protected]
Joseph Saints [email protected]
Mary Saints [email protected]
 Bootstrap Images

Bootstrap 3 has three main classes for images:

.img-circle

.img-thumbnail
.img-rounded
1 3
 Bootstrap Images—Example

<div class=“row”>
<div class=“col-md-4”>
<img class=“img-rounded” src=“garden-house-hotel-11.jpg”
alt=“Garden” style=“width:100%”>
</div>
<div class=“col-md-4”>
<img class=“img-circle” src=“Xmas-House-5-25*256.jpg” alt=“Snow”
style=“width:100%”>
</div>
<div class=“col-md-4”>
<img class=“img-thumbnail” src=“Accomodation_image.jpg” alt=“beach”
style=“width:100%”>
</div>
</div>
 Bootstrap Images

Output:

.img-rounded .img-circle .img-thumbnail

 Bootstrap Alerts

In Bootstrap 3, you have an easy way to create predefined alert messages using alert
class, followed by one of these contextual classes.

.alert-success .alert-info

.alert-danger .alert-warning
 Bootstrap Alerts—Example

<div class=“container”>
<h1>Bootstrap Alerts</h1>

<div class=“alert alert-success”>

<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class=“alert alert-info”>
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class=“alert alert-warning”>
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class=“alert alert-danger”>
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
</div>
 Bootstrap Alerts

Output:

Success! Indicates a successful or positive action.

Info! Indicates a neutral informative change or action.

Warning! Indicates a warning that might need attention.

Danger! Indicates a dangerous or potentially negative action.

 Bootstrap Buttons

In Bootstrap 3, there are seven styles of buttons that can be created using these contextual classes:

.btn-primary .btn-success
2 3

.btn-default 1 4 .btn-info

7 5 .btn-warning
.btn-link

.btn-danger
 Bootstrap Buttons—Example

<div class=“container”>
<h1>Bootstrap Button</h1>
<button type=“button” class=“btn btn-default”>Default</button>
<button type=“button” class=“btn btn-default”>Primary</button>
<button type=“button” class=“btn btn-default”>Success</button>
<button type=“button” class=“btn btn-default”>Info</button>
<button type=“button” class=“btn btn-default”>Warning</button>
<button type=“button” class=“btn btn-default”>Danger</button>
<button type=“button” class=“btn btn-default”>Link</button>
</div>

Output:

Default Primary Success Info Warning Danger Link

 Bootstrap Glyphicons

• The Glyphicons Halflings set provides 260 glyphicons.

• (http://getbootstrap.com/components/)
 Bootstrap Glyphicons—Example

<div class=“container”>
<h1>Bootstrap glyphicon</h1>
<p>simple span:
<span class=“glyphicon glyphicon-check”></span>
</p>
<p>Default button with icon:
<button type=“button” class=“btn btn-default”>Play
<span class=“glyphicon glyphicon-play”></span>
</button>
</p>
<p>search icon on a styled button:
<button type=“button” class=“btn btn-info”>
<span class=“glyphicon glyphicon-search”></span> Search
</bbutton>
</p>
<p>Link with icon:
<a href=“#” class=“btn btn-success btn-lg”>
<span class=“glyphicon glyphicon-print”></span>Print
</a>
</p>
</div>
Bootstrap Glyphicons

Output:
 Bootstrap Labels

In Bootstrap 3:

• The main purpose of label is to provide information.

• You can create labels with backgrounds of different colors using the .label class and one of these:

.label-danger .label-default

.label-warning
Contextual .label-primary
Classes

.label-info .label-success
 Bootstrap Labels—Example

<div class=“container”>
<h1>Bootstrap Label</h1>

<span class=“label label-default”>Default Label</span>

<span class=“label label-primary”>Primary Label</span>
<span class=“label label-success”>Success Label</span>
<span class=“label label-info”>Info Label</span>
<span class=“label label-warning”>Warning Label</span>
<span class=“label label-danger”>Danger Label</span>

Output:

Default Label Primary Label Success Label Info Label Warning Label Danger Label
 Bootstrap Panels

• In Bootstrap 3, a panel is a box with a border and padding around the content.

• The main purpose of the panel is to highlight or separate some information.

• To create a panel, use one of the following contextual classes:

.panel-danger .panel-default
6
1

. panel-warning 5
2 .panel-primary

4
.panel-info 3 .panel-success
 Bootstrap Panels—Example

<div class=“container”>
<h1>Bootstrap Panel</h1>

<div class=“Panel panel-success”>

<div class=“panel-heading”>Panel heading</div>
<div class=“panel-body”>Panel Content</div>
<div class=“panel-footer”>Panel Footer</div>
</div>

Output:

Panel Heading
Panel Content
Panel Footer
 Bootstrap Themes and Templates

• Theme: A customized CSS

• Template: One or more predesigned HTML pages that use a theme

• Both theme and template are a collection of elements like grids, buttons,
and panels that are put together to create a fully functional website/web
application.
• You can download several freely available templates themes.
• Some templates can be downloaded from
https://startbootstrap.com/template-categories/all/
 Bootstrap Themes and Templates

SB Admin 2 template is relevant for web applications. It consists of tables, forms, charts, and other components.
 Bootstrap Themes and Templates
• Download the SB Admin 2 template on your computer

• Open the /pages/index.html in your web browser

• Customize it or write the application design from scratch

 Key Takeaways

A Responsive Web Design is a unique design that can adapt to any

screen size.

A grid system presents a swift and simple way to build responsive

website layouts.

Bootstrap 3 offers various components, including tables, images,

alerts, panels, buttons, templates, themes and more that you can use
to create your web design.
Quiz
QUIZ
Bootstrap's grid system allows up to ____________.
1

a. 6 columns across the page

b. 12 columns across the page

c. 24 columns across the page

d. 10 columns across the page

 QUIZ
Bootstrap's grid system allows up to ____________.
1

a. 6 columns across the page

b. 12 columns across the page

c. 24 columns across the page

d. 10 columns across the page

The correct answer is b.

Bootstrap's grid system allows up to 12 columns across the page.
QUIZ In <meta name="viewport" content="width=device-width, initial-scale=1">the
2 width=device-the width part sets ___________.

a. The view in Desktop only

b. The width of the page to follow the screen-width of the device (which will vary
depending on the device)

c. The view for Mobile only

d. None of the above

 QUIZ In <meta name="viewport" content="width=device-width, initial-scale=1">the
2 width=device-the width part sets ___________.

a. The view in Desktop only

b. The width of the page to follow the screen-width of the device (which will vary
depending on the device)

c. The view for Mobile only

d. None of the above

The correct answer is b.

In <meta name="viewport" content="width=device-width, initial-scale=1">the width=device-, the
width part sets the width of the page to follow the screen-width of the device (which will vary
depending on the device).
QUIZ
We can create badges inside buttons.
3

a. True

b. False
 QUIZ
We can create badges inside buttons.
3

a. True

b. False

The correct answer is a

We can create badges inside buttons.
QUIZ
Which class creates a list of items?
4

a. lst-group

b. list-group

c. menu-group

d. list-grp
 QUIZ
Which class creates a list of items?
4

a. lst-group

b. list-group

c. menu-group

d. list-grp

The correct answer is b.

list-group is the class that creates a list of items.
Thank You