Scribd
Upload
4 views

Topic 5

The document provides a comprehensive guide on making web applications responsive using Bootstrap. It covers objectives such as using Bootstrap classes, implementing responsive design through the grid system, and utilizing various components and CSS classes for formatting. Additionally, it includes practical steps for adding Bootstrap and jQuery libraries to a project, along with examples of HTML code for forms, buttons, and tables.

Uploaded by

khajezjhozhua131
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Topic 5

The document provides a comprehensive guide on making web applications responsive using Bootstrap. It covers objectives such as using Bootstrap classes, implementing responsive design through the grid system, and utilizing various components and CSS classes for formatting. Additionally, it includes practical steps for adding Bootstrap and jQuery libraries to a project, along with examples of HTML code for forms, buttons, and tables.

Uploaded by

khajezjhozhua131
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 71

How to make

a web app responsive


with Bootstrap

C3, Slide 1
Objectives (part 1)
Applied
1. Use any of the Bootstrap CSS classes and components presented in
this chapter in your web apps.
2. Use LibMan to add the NuGet packages for client-side libraries
such as Bootstrap and jQuery to a project.

Knowledge
1. Explain what responsive web design is and how it’s implemented
using Bootstrap.
2. Describe how the Bootstrap grid system works.
3. Describe how to use the Bootstrap CSS classes to format and align
labels, text boxes, and buttons within a form.
4. Describe how to use the Bootstrap CSS classes to format images,
HTML tables, and text.

C3, Slide 2
Objectives (part 2)
5. Describe how to use Bootstrap components such as jumbotrons,
button groups, icons, badges, button dropdowns, list groups, alerts,
breadcrumbs, navs, and navbars.
6. Describe how to use Bootstrap CSS classes to provide context.
7. Describe how to use Bootstrap CSS classes to adjust margins and
padding.

C3, Slide 3
The Future Value app in a desktop browser

C3, Slide 4
The Future Value app in a tablet browser

C3, Slide 5
The Future Value app in a phone browser

C3, Slide 6
The dialog box for adding the jQuery library

C3, Slide 7
The dialog box for adding the Bootstrap library

C3, Slide 8
How to add the Bootstrap and jQuery libraries
1. Start Visual Studio and open a project. In the Solution Explorer,
expand the wwwroot/lib folder and delete any old Bootstrap or
jQuery libraries.
2. In the Solution Explorer, right-click on the project name and
select the AddClient-Side Library item.
3. In the dialog box that appears, type “jquery@”, select “3.3.1”
from the list that appears, and click the Install button.
4. Repeat steps 2 and 3 for the library named “twitter-
[email protected]”, but change the target location to
“www/lib/bootstrap”.
5. Repeat steps 2 and 3 for the library named “[email protected]”.
6. Repeat steps 2 and 3 for the library named “jquery-
[email protected]”.
7. Repeat steps 2 and 3 for the library named “jquery-validation-
[email protected]”.

C3, Slide 9
The libman.json file for the client-side libraries

C3, Slide 10
A Razor layout that enables client-side libraries
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewData["Title"]</title>
<link rel="stylesheet"
href="~/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/custom.css" />

<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/popper.js/popper.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js"></script>

<script src="~/lib/jquery-validate/
jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/
jquery.validate.unobtrusive.min.js"></script>
</head>
<body>
@RenderBody()
</body>
</html>

C3, Slide 11
An extra directory that may be included
by the MVC template
<link rel="stylesheet"
href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

C3, Slide 12
The URL for the Bootstrap documentation
https://getbootstrap.com/docs/

Valid Bootstrap class values


container
container-fluid
row
col
col-size-count
offset-size-count

Valid size values


lg
md
sm
(none)

C3, Slide 13
Two columns that are automatically sized
<div class="col">Column 1</div>
<div class="col">Column 2</div>

An element that spans four columns


on medium and large screens
<div class="col-md-4">This element spans four columns</div>

An element that spans 4 columns


on medium screens and 3 on large
<div class="col-md-4 col-lg-3">
This element spans three or four columns
</div>

An element that is moved one column to the right


on medium screens
<div class="col-md-4 offset-md-1">
This element is offset by one column
</div>

C3, Slide 14
The HTML for a grid
<main class="container">
<div class="row">
<div class="col-12">Column 1</div>
<div class="col-12">Column 2</div>
</div>
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-8">Column 2</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">Column 1</div>
<div class="col-md-8 col-sm-6">Column 2</div>
</div>
</main>

C3, Slide 15
Custom CSS classes that override
the Bootstrap CSS classes
.row { /* custom row styles */
margin-bottom: 0.5rem;
}
.row div { /* custom column styles */
border: 1px solid black;
padding: 0.5rem;
background-color: aliceblue;
}

C3, Slide 16
The Bootstrap grid on a medium screen

C3, Slide 17
The Bootstrap grid on a small screen

C3, Slide 18
The Bootstrap grid on an extra small screen

C3, Slide 19
Two Bootstrap CSS classes for forms
form-group
form-control

C3, Slide 20
A form with two text boxes in vertical layout

C3, Slide 21
The HTML for the form in vertical layout
<form asp-action="Login" method="post">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" class="form-control" />
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" />
</div>
</form>

C3, Slide 22
A form with two text boxes in horizontal layout

C3, Slide 23
The HTML for the form in horizontal layout
<form asp-action="Login" method="post">
<div class="form-group row">
<label for="email" class="col-sm-2">Email:</label>
<div class="col-sm-10">
<input type="email" id="email" class="form-control" />
</div>
</div>
<div class="form-group row">
<label for="pwd" class="col-sm-2">Password:</label>
<div class="col-sm-10">
<input type="password" id="pwd" class="form-control" />
</div>
</div>
</form>

C3, Slide 24
Bootstrap CSS classes for working with buttons
btn
btn-primary
btn-secondary
btn-outline-primary
btn-outline-secondary

Bootstrap CSS classes for working with images


img-fluid
rounded

A Bootstrap CSS class for creating a jumbotron


jumbotron

C3, Slide 25
A jumbotron, an image, and two buttons

C3, Slide 26
The HTML for the jumbotron, image, and buttons
<div class="container">
<header class="jumbotron">
<img id="logo" alt="Murach logo"
src="~/images/MurachLogo.jpg"
class="img-fluid rounded" />
</header>
<main>
<form asp-action="Index" method="post">
<span class="mr-2">I accept the terms for this site:
</span>
<button type="submit" class="btn btn-primary">
Yes
</button>
<button id="btnNo" class="btn btn-outline-secondary">
No
</button>
</form>
</main>
</div>

C3, Slide 27
Bootstrap CSS classes for working with margins
mt-size
mr-size
mb-size
ml-size
m-size

Bootstrap CSS classes for working with padding


pt-size
pr-size
pb-size
pl-size
p-size

C3, Slide 28
Some elements that use margins and padding

C3, Slide 29
The HTML for the elements
<div class="container">
<header class="jumbotron mt-2">
<img id="logo" alt="Murach logo"
src="~/images/MurachLogo.jpg"
class="img-fluid rounded" />
</header>
<main>
<form asp-action="Index" method="post">
<span class="mr-2">
I accept the terms for this site:
</span>
<button type="submit"
class="btn btn-primary p-3 mr-2">Yes
</button>
<button id="btnNo"
class="btn btn-outline-secondary p-3">No
</button>
</form>
</main>
</div>

C3, Slide 30
The code for the Index view (part 1)
@model FutureValueModel
@{
ViewBag.Title = "Future Value Calculator";
}
<div class="container">
<header class="jumbotron">
<img id="logo" alt="Murach logo"
src="~/images/MurachLogo.jpg"
class="img-responsive rounded" />
<h1 class="mt-3">@ViewBag.Title</h1>
</header>
<main>
<form asp-action="Index" method="post">
<div class="row form-group">
<label asp-for="MonthlyInvestment"
class="col-sm-3">Monthly Investment: </label>
<div class="col-sm-3">
<input asp-for="MonthlyInvestment"
class="form-control" />
</div>
<span asp-validation-for="MonthlyInvestment"
class="col text-danger"></span>
</div>

C3, Slide 31
The code for the Index view (part 2)
<div class="row form-group">
<label asp-for="YearlyInterestRate"
class="col-sm-3">Yearly Interest Rate:
</label>
<div class="col-sm-3">
<input asp-for="YearlyInterestRate"
class="form-control" />
</div>
<span asp-validation-for="YearlyInterestRate"
class="col text-danger"></span>
</div>
<div class="row form-group">
<label asp-for="Years" class="col-sm-3">
Number of Years: </label>
<div class="col-sm-3">
<input asp-for="Years" class="form-control" />
</div>
<span asp-validation-for="Years"
class="col text-danger"></span>
</div>

C3, Slide 32
The code for the Index view (part 3)
<div class="row form-group">
<label class="col-sm-3">Future Value:</label>
<div class="col-sm-3">
<input value="@ViewBag.FutureValue" readonly
class="form-control" />
</div>
</div>
<div class="row form-group">
<div class="col offset-sm-3">
<button type="submit" class="btn btn-primary">
Calculate</button>
<a asp-action="Index"
class="btn btn-outline-secondary">Clear</a>
</div>
</div>
</form>
</main>
</div>

C3, Slide 33
CSS classes for working with HTML tables
table
table-bordered
table-striped
table-hover
table-responsive
w-size

C3, Slide 34
A table with default styling

C3, Slide 35
The HTML for the table
<table class="table">
<thead>
<tr>
<th>Department</th>
<th>Phone Number</th>
<th>Extension</th></tr>
</thead>
<tbody>
<tr>
<td>General</td>
<td>555-555-5555</td>
<td>1</td></tr>
<tr>
<td>Customer Service</td>
<td>555-555-5556</td>
<td>2</td></tr>
<tr>
<td>Billing and Accounts</td>
<td>555-555-5557</td>
<td>3</td></tr>
</tbody>
</table>

C3, Slide 36
A table with alternating stripes and borders

The HTML for the table


<table class="table table-striped table-bordered table-hover">...

C3, Slide 37
Common CSS classes for text
text-left
text-right
text-center
text-lowercase
text-uppercase
text-capitalize

C3, Slide 38
Some examples of the text CSS classes

The HTML for the text


<p class="text-right">
This text is <span class="text-uppercase">
right-aligned</span>.
</p>
<p class="text-center">
<span class="text-capitalize">This text is centered.
</span>
</p>
<p class="text-left">
This text is <span class="text-lowercase">
LEFT-ALIGNED</span>.
</p>

C3, Slide 39
The context classes available to most elements
Class Default color
primary Dark blue
secondary Gray
success Green
info Light blue
warning Orange
danger Red
light White
dark Gray

C3, Slide 40
Some of the context classes applied to buttons

The HTML for the buttons


<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

C3, Slide 41
The success class applied to the text
of an element

The HTML for the element


<p class="text-success">
Congratulations! You are now registered.
</p>

C3, Slide 42
The warning class applied to the background
of an element

The HTML for the element


<p class="bg-warning p-2 rounded">
Warning! Some required fields are empty.
</p>

C3, Slide 43
Common CSS classes for creating button groups
btn-group
btn-toolbar
btn-group-size
btn-group-vertical

C3, Slide 44
A basic button group

The HTML for the button group


<div class="btn-group" role="group"
aria-label="Button group">
<a href="/" class="btn btn-outline-primary">Home</a>
<a href="/cart" class="btn btn-outline-primary">
Cart</a>
<a href="/products" class="btn btn-outline-primary">
Products</a>
<a href="/contact-us" class="btn btn-outline-primary">
Contact Us</a>
</div>

C3, Slide 45
A toolbar with two button groups

The HTML for the button groups


<div class="btn-toolbar" role="toolbar"
aria-label="Toolbar with groups">
<div class="btn-group mr-2" role="group"
aria-label="First group">
<a href="/" class="btn btn-outline-primary">Home</a>
<a href="/Cart" class="btn btn-outline-primary">Cart</a>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<a href="/products" class="btn btn-outline-primary">
Products</a>
<a href="/contact-us" class="btn btn-outline-primary">
Contact Us</a>
</div>
</div>

C3, Slide 46
The URL for the Font Awesome website
https://fontawesome.com/

A typical <link> element that enables


Font Awesome icons
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha-long-hash_code" crossorigin="anonymous">

C3, Slide 47
A button group that includes icons for its buttons

The HTML for the button group


<div class="btn-group" role="group"
aria-label="Button group">
<a href="/" class="btn btn-outline-primary">
<span class="fas fa-home"></span>&nbsp;Home&nbsp;
</a>
<a href="/cart" class="btn btn-outline-primary">
<span class="fas fa-shopping-cart"></span>
&nbsp;Cart&nbsp;
</a>
</div>

C3, Slide 48
A button with a badge

The HTML for the button


<a href="/cart" class="btn btn-outline-primary">
&nbsp;Cart&nbsp;
<span class="badge badge-primary">2</span>
</a>

C3, Slide 49
A button with an icon and a badge

The HTML for the button


<a href="/cart" class="btn btn-outline-primary">
<span class="fas fa-shopping-cart">
</span>&nbsp;Cart&nbsp;
<span class="badge badge-primary">2</span>
</a>

C3, Slide 50
CSS classes for creating button dropdowns
dropdown
dropdown-toggle
dropdown-menu
dropdown-item
dropup

An HTML5 data attribute


for creating button dropdowns
data-toggle

C3, Slide 51
A button dropdown

The HTML for the button dropdown


<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle"
id="productsDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Products
</button>
<div class="dropdown-menu" aria-labelledby="productsDropdown">
<a class="dropdown-item"
href="/product/list/guitars">Guitars</a>
<a class="dropdown-item"
href="/product/list/drums">Drums</a>
</div>
</div>

C3, Slide 52
Common CSS classes for creating list groups
list-group
list-group-item
active
disabled

C3, Slide 53
A basic list group

The HTML for the list group


<ul class="list-group">
<li class="list-group-item">Guitars</li>
<li class="list-group-item">Basses</li>
<li class="list-group-item">Drums</li>
</ul>

C3, Slide 54
Another basic list group with an active item

The HTML for the list group


<div class="list-group">
<a href="/guitars" class="list-group-item active">
Guitars</a>
<a href="/basses" class="list-group-item">Basses</a>
<a href="/drums" class="list-group-item">Drums</a>
</div>

C3, Slide 55
Common CSS classes for creating alerts
alert
alert-context
alert-dismissible
alert-link
close

An HTML5 data attribute for creating alerts


data-dismiss

C3, Slide 56
A dismissible alert with a link

The HTML for the alert


<div class="alert alert-success alert-dismissible">
<button class="close" data-dismiss="alert">
&times;
</button>
Success! <a href="#" class="alert-link">
Learn more</a>
</div>

C3, Slide 57
Common CSS classes for creating breadcrumbs
breadcrumb
breadcrumb-item
active

C3, Slide 58
A breadcrumb with three segments

The HTML for the breadcrumb


<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">Home</a>
</li>
<li class="breadcrumb-item">
<a href="/Products">Products</a>
</li>
<li class="breadcrumb-item active"
aria-current="page">Guitars
</li>
</ol>
</nav>

C3, Slide 59
Common CSS classes for creating navs
nav
nav-tabs
nav-pills
nav-item
nav-link
active

C3, Slide 60
Nav links styled as tabs

The HTML for the nav links


<nav class="nav nav-tabs">
<a class="nav-item nav-link active" href="/">Home</a>
<a class="nav-item nav-link" href="/products">
Products</a>
<a class="nav-item nav-link" href="/cart">Cart</a>
</nav>

C3, Slide 61
The same nav links styled as pills

The HTML for the nav links


<nav class="nav nav-pills">
<a class="nav-item nav-link active" href="/">Home</a>
<a class="nav-item nav-link" href="/products">
Products</a>
<a class="nav-item nav-link" href="/cart">Cart</a>
</nav>

C3, Slide 62
A more verbose way of coding the same nav links
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/products">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cart">Cart</a>
</li>
</ul>

C3, Slide 63
Common CSS classes for creating navbars
navbar
navbar-expand-size
navbar-light-or-dark
navbar-brand
navbar-toggler
navbar-collapse
collapse
navbar-nav
navbar-alignment

HTML5 data attributes for creating navbars


data-toggle
data-target

C3, Slide 64
A navbar expanded on a wide screen

A navbar expanded on a small screen

C3, Slide 65
The HTML for the navbar (part 1)
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<a class="navbar-brand" href="/">My Guitar Shop</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse"
id="navbarSupportedContent">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="/">Home</a>
<a class="nav-item nav-link"
href="/products">Products</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>

C3, Slide 66
The HTML for the navbar (part 2)
<div class="navbar-nav navbar-right">
<a class="nav-item nav-link" href="/cart">
<span class="fas fa-shopping-cart"></span>
&nbsp;Cart&nbsp;
<span class="badge badge-primary">2</span>
</a>
</div>
</nav>
</nav>

C3, Slide 67
More CSS classes for positioning navbars
fixed-top
fixed-bottom

C3, Slide 68
A navbar that’s fixed at the top of the screen

C3, Slide 69
The HTML that displays the navbar
<body>
<nav class="navbar navbar-expand-md navbar-dark
bg-primary fixed-top">
<!-- navbar items go here -->
</nav>
<div class="container">
<!-- container items go here -->
</div>
</body>

The CSS that sets the top margin


body {
margin-top: 70px;
}

C3, Slide 70
A navbar that’s fixed at the bottom of the screen

C3, Slide 71

You might also like