GMRIT/ADM/F-44

GMR Institute of Technology REV.:00

Rajam, AP
(An Autonomous Institution Affiliated to JNTUGV, AP)

Cohesive Teaching –LearningPractices(CTLP)

Class IV Sem. – B.Tech Department: CSE

Course Web Coding and Development CourseCode 21CS405
Preparedby Mr. G.Suneel
LectureTopic Bootstrap: Responsive Design, Layouts, Grids, Media Queries,
Components- Forms, Drop Downs, Cards, Input Groups, Collapse, List
Groups, Navbar, Popovers, Flex Box.
CourseOutcome(s CO2,CO3 ProgramOutcome(s) PO1,PO2,PO3,PSO1,PSO2
)
Duration 60Min Lecture 7-12 Unit I
Pre-requisite(s) Basics of HTML & CSS.

1. Objective

❖ To Develop portable and dynamic web

2. Intended Learning Outcomes(ILOs)

At the end of this session the students will able to:

A) Create portable and responsive web pages using bootstrap.

3. 2D Mapping of ILOs with Knowledge Dimension and Cognitive Learning Levels

ofRBT

CognitiveLearningLev
els
Knowledge
Remembe Understan Apply Analyze Evaluate Create
Dimension
r d
Factual A
Conceptual A,B,C
Procedural C,D,E
MetaCognitive
4. Teaching Methodology

❖ Power Point Presentation, Chalk Talk, visual presentation

5. Evocation
6. Deliverables
Lecture 7: Bootstrap: Introduction, Responsive Design, Layouts
https://getbootstrap.com/docs/3.3/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 forms, 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.

Advantages of Using Bootstrap

Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design
templates and classes and concentrate on other development work.

Responsive features — Using Bootstrap you can easily create responsive websites that appear more
appropriately on different devices and screen resolutions without any change in markup.

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.

Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML,
CSS and JavaScript can start development with Bootstrap.

Compatible with 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.

Open Source — And the best part is, it is completely free to download and use.

Creating Your First Web Page with Bootstrap

• To create a basic Bootstrap template by including the Bootstrap CSS and JS files via CDN.

• Bootstrap requires a third-party library Popper.js for some of its components like popovers
and tooltips.

• We recommend adding Bootstrap in your project via CDN (Content Delivery Network)
because CDN offers performance benefit by reducing the loading time, since they are hosting
the files on multiple servers spread across the globe so that when a user requests the file it will
be served from the server nearest to them.

Step 1: Creating a Basic HTML file

Open up your code editor and create a new HTML file.

Step 2: Making this HTML File a Bootstrap Template

In order to make this plain HTML file a Bootstrap template, just include the Bootstrap CSS and JS
files using their CDN links.

Also, you should include JavaScript files at the bottom of the page, right before the closing </body>
tag to improve the performance of your web pages.

CDN links

Description URL

CSS https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css

JS https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js

• The attributes integrity and crossorigin have been added to CDN links to implement
Subresource Integrity (SRI).

• It is a security feature that enables you to mitigate the risk of attacks originating from
compromised CDNs, by ensuring that the files your website fetches (from a CDN or
anywhere) have been delivered without unexpected or malicious modifications.

• Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and
incomplete styling.

Responsive meta tag

• Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices
first and then scale up components as necessary using CSS media queries.

• To ensure proper rendering and touch zooming for all devices, add the responsive viewport
meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Layouts in Bootstrap

Containers are the most basic layout element in Bootstrap and they are needed while using the default
grid system.

There are two major layouts for Bootstrap that are Fluid Layout and Fixed Layout.

Fluid-layout: This uses the bootstrap .container-fluid class for the layout.

• This layout uses proportional values such as measuring units for a block of content, images, or
any other item.

• Used for creating an element that is 100 % wider and covers all the screen widths.

• Fluid layout continuously resizes as you change the width of your browser by any amount,
leaving no extra empty space on the sides ever Hence it is named “fluid layout”.
Fixed-layout:

• This uses the bootstrap .container class for the layout.

• The fixed-layout has specific pixel width values that change its width value with the help of
media queries.

• It provides a responsive fixed-width container.

• Fixed layout resizes in chunks at several certain widths as pixels values are specified.

• Step by step guide for the implementation:

• Step1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to
load our CSS.

<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> <script
src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

Step 2: Add <style> tag and add CSS properties to it that you need.

Step 3: Create a new <div> for adding different layout classes.

Step 4: Information must be placed within a .container (fixed layout) or .container-fluid (fluid layout)
class for proper alignment and padding .

Lecture 8: Grids, Media Queries

• 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.

• You can use the Bootstrap's predefined grid classes for quickly making the layouts for different
types of devices like mobile phones, tablets, laptops, desktops, 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.

Creating Two Column Layouts

<div class="container">
 <div class="row">
<div class="col-md-6">Column left</div>
<div class="col-md-6">Column right</div>
</div>

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

<div class="row">
<div class="col-md-3">Column left</div>
<div class="col-md-9">Column right</div>
</div>
</div>

Creating Three Column Layouts

<div class="container">
<!--Row with three equal columns-->
<div class="row">
<div class="col-lg-4">Column left</div>
<div class="col-lg-4">Column middle</div>
<div class="col-lg-4">Column right</div>
</div>

<!--Row with three columns divided in 1:4:1 ratio-->

<div class="row">
<div class="col-lg-2">Column left</div>
<div class="col-lg-8">Column middle</div>
<div class="col-lg-2">Column right</div>
</div>

<!--Row with three columns divided unevenly-->

<div class="row">
<div class="col-lg-3">Column left</div>
<div class="col-lg-7">Column middle</div>
<div class="col-lg-2">Column right</div>
</div>
</div>

Creating Multi-Column Layouts with Bootstrap

<div class="container-lg">
<div class="row">
<div class="col-xl-4"><p>Box 1</p></div>
<div class="col-xl-4"><p>Box 2</p></div>
<div class="col-xl-4"><p>Box 3</p></div>
<div class="col-xl-4"><p>Box 4</p></div>
<div class="col-xl-4"><p>Box 5</p></div>
<div class="col-xl-4"><p>Box 6</p></div>
<div class="col-xl-4"><p>Box 7</p></div>
<div class="col-xl-4"><p>Box 8</p></div>
<div class="col-xl-4"><p>Box 9</p></div>
 <div class="col-xl-4"><p>Box 10</p></div>
<div class="col-xl-4"><p>Box 11</p></div>
<div class="col-xl-4"><p>Box 12</p></div>
</div>
</div>

The .container-lg class makes the container 100% wide if the width of the viewport is less than 992px,
thus utilizing the full available width on smaller screens.

Lecture 9: Components- Forms, Drop Downs

• HTML forms are an integral part of the web pages and applications, but creating the form
layouts or styling the form controls manually one by one using CSS are often boring and
tedious.

• Bootstrap greatly simplifies the process of styling and alignment of form controls like labels,
input fields, selectboxes, textareas, buttons, etc. through predefined set of classes.

• Bootstrap provides three different types of form layouts:

1. Vertical Form (default form layout)

2. Horizontal Form
3. Inline Form

Creating Vertical Form Layout

• To create vertical form layouts simply use the predefined margin utility classes for grouping
the labels, form controls, optional form text, and form validation messages.

Creating Horizontal Form Layout

• You can also create horizontal form layouts where labels and form controls are aligned side-
by-side using the Bootstrap grid classes.

• To create a horizontal form layout add the class .row on form groups and use the .col-*-* grid
classes to specify the width of your labels and controls.

• Also, be sure to apply the class .col-form-label on the <label> elements, so that they're
vertically centered with their associated form controls.

Creating Inline Form Layout

• Sometimes you may want to display a series of form controls, and buttons in a single
horizontal row to compact the layout.

• You can do this easily by using the Bootstrap's grid classes.

Creating Static Form Control

• There might be a situation when you just want to display a plain text value next to a form label
instead of a working form control.
 • You can do this easily by replacing the class .form-control with the .form-control-plaintext and
applying the attribute readonly.

• The .form-control-plaintext class removes the default styling from the form field, but preserves
the correct margin and padding.

Example:

<input type="email" readonly class="form-control-plaintext" id="inputEmail"

value="peterparker@example.com">

Column Sizing of Form Controls

• You can also match the size of your inputs, textareas and select boxes to the Bootstrap grid
column sizes.

• Simply, place your form controls (i.e. <input>, <textarea>, and <select>) in grid columns.

Placing Checkboxes Inline

• By default, any number of custom checkboxes and radio buttons that are immediate sibling
will be vertically stacked and appropriately spaced with .form-check class.

• But, you can also place these custom checkboxes and radio buttons inline (i.e., in the same
line) by simply adding the class .form-check-inline to .form-check element, like this:

Example:

<div class="form-check form-check-inline">

Placing Radio Buttons Inline

<div class="form-check form-check-inline">

Creating Disabled Form Controls

To disable individual form controls such as <input>, <textarea>, <select> just add the attributes
disabled to them and Bootstrap will do the rest.

Example:

<input type="text" class="form-control mb-3" placeholder="Disabled input" disabled>

<select class="form-select" disabled>

<option>Disabled select</option>
</select>

Lecture 10: Cards, Collapse

Bootstrap Cards

• Bootstrap card is a flexible and extensible content container.

 • It includes options for headers and footers, a wide variety of content, contextual background
colors, and powerful display options.

• Card replaces panel, well, and thumbnail components in old Bootstrap 3 version.

Creating a Basic Card

• The card markup is pretty straight forward.

• The outer wrapper require the base class .card, whereas content can be placed inside the .card-
body element.

• The following example will show you how to create a card with a picture, mixed with some
text content and a button.

Content Types for Card Component

• The card component support a wide variety of content, including images, text, list groups,
links, navs, and more.

Body Only Card

You can simply use .card with .card-body within, whenever you need to create a padded box.

Card with Titles, Text, and Links

<div class="m-4">
<div class="card" style="width: 300px;">
<div class="card-body">
<h5 class="card-title">Eiffel Tower</h5>
<h6 class="card-subtitle mb-3 text-muted">Champ de Mars, Paris, France</h6>
<p class="card-text">Built in 1889 Eiffel Tower is one of the most iconic landmarks in the
world.</p>
<a href="#" class="card-link">View pictures</a>
<a href="#" class="card-link">Learn more</a>
</div>
</div>
</div>

Card with Header and Footer

• You can also add header and footer within your cards using the .card-header and .card-footer
class, respectively.

<div class="card text-center">

<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">NASA Launched Solar Probe</h5>
<p class="card-text">NASA launched Parker space probe in 2018 with the mission of making
observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.</p>
<a href="#" class="btn btn-primary">Know more</a>
</div>
<div class="card-footer text-muted">copyright@gmrit</div>
</div>

Placing List Groups within Card

You can also place list groups inside the card along with other content types, as shown here.

<div class="card" style="width: 300px;">

<div class="card-header">Featured</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Add More</a>
<a href="#" class="card-link">Share</a>
</div>
</div>

Bootstrap Collapse

Toggle Display of Content with Bootstrap

• You can use the Bootstrap collapse JavaScript plugin to easily show and hide (or expand and
collapse) specific elements on a web page.

• Buttons and anchors (i.e. the <button> and <a> elements) are typically used as triggers that are
mapped to the elements you want to toggle.

Expand and Collapse Elements via Data Attributes

• You can show and hide elements in Bootstrap by clicking on a button or link via data
attributes without writing any JavaScript code.

• The data-bs-toggle="collapse" attribute is added to the trigger or controller element along with
a attribute data-bs-target (for buttons) or href (for anchors) to automatically assign control of
one or more collapsible elements.

• The data-bs-target or href attribute accepts a CSS selector (such as id selector #myCollapse in
our example) to apply the collapse to a specific element.

• The class .collapse is added to the collapsible element.

• You can optionally add the class .show to the collapsible element in addition to the class
.collapse to make it open by default.

jQuery

<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCollapse").collapse("toggle");
});
});
</script>

JavaScript

<script>
document.addEventListener("DOMContentLoaded", function(){
var btn = document.getElementById("myBtn");
var element = document.getElementById("myCollapse");

// Create a collapse instance, toggles the collapse element on invocation

var myCollapse = new bootstrap.Collapse(element);

btn.addEventListener("click", function(){
myCollapse.toggle();
});
});
</script>

Lecture 11: Input Groups, List Groups

Bootstrap Input Groups

Bootstrap input group component is a very flexible and powerful component for creating interactive
and elegant form controls, however, it is limited to text input, select, and textarea only.

Creating Prepended and Appended Inputs

• Input groups are created using the class .input-group.

• It act as a container for inputs and addons.

• Further, wrap the text or icon in a <span> element as well as apply the class .input-group-text
on it and place it before or after the input.

Dropdown and Textarea

Since Bootstrap 5 you can also prepend or append select box dropdown and textarea form controls.

Creating List Groups with Bootstrap

The list groups are very useful and flexible component for displaying lists of elements in a beautiful
manner.

In most basic form a list group is simply an unordered list with the class
.list-group
whereas, the list items having the
class .list-group-item.

<div class="m-4">
<ul class="list-group">
<li class="list-group-item">Pictures</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
 </ul>
</div>

Indicate Disabled and Active Items

You can simply add the

class .active

to a .list-group-item to indicate the current active selection.

Similarly, you can add

.disabled
to a .list-group-item to make it look like disabled.

<div class="m-4">
<ul class="list-group">
<li class="list-group-item active">Pictures</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item disabled">Videos</li>
</ul>
</div>

Creating Numbered List Groups

You can also create list groups where items are numbered through simply adding the modifier
class .list-group-numbered
on the .list-group element, like this:

List Group with Checkboxes and Radios

You can also place Bootstrap's custom checkboxes and radio buttons within the list group items.

List Group with Linked Items

• You can also link list group items with the little change in HTML markup.

• Just replace the <li> with <a> tag and use <div> element as a parent instead of <ul>.
• You can also add icons and badges to this list group to make it more elegant.

Lecture 12: Navbar, Popovers, Flex Box

Creating Navbar with Bootstrap

• You can use the Bootstrap navbar component to create responsive navigation header for your
website or application.

• These responsive navbar will be collapsed on devices having small viewports like mobile
phones but expand when user click the toggle button.

Adding Dropdowns to Navbar

Changing the Color Scheme of Navbars

navbar-dark for the dark background colors. Then, customize it with the background color utility
classes, such as .bg-dark, .bg-primary, and so on.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary" >

Bootstrap Fixed Navbars

Bootstrap also provides mechanism to create navbar that is fixed to the top, fixed to the bottom, or
stickied to the top (i.e. scrolls with the page until it reaches the top, then stays there).

Navbar Fixed to the Top

Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the
viewport, so that it won't scroll with the page.
Bootstrap Popovers

• Popover is a small overlay of content that is used to display secondary information of any
element when it is clicked by a user, like those on the iPad.

Step 1: Adding the Popover Markup

• To create a popover, you need to add the data-bs-toggle="popover" attribute to an element.

• Whereas, popover's title and its content that would display upon trigger or activation can be
specified using the title and data-bs-content attribute respectively.

Here is the standard markup for adding a popover to a button.

<button type="button" data-bs-toggle="popover" title="Popover title" data-bs-content="Here's some

amazing content.">Click to toggle popover</button>

Step 2: Enabling the Popovers

• Popovers can be triggered via JavaScript — just call the popover() Bootstrap method with the
id, class or any CSS selector of the required element in your JavaScript code.

Flex Box

• Flexbox is used to quickly manage the layout, alignment, and sizing of grid columns,
navigation, components, and more with a full suite of responsive flexbox utilities.

• You can also do complex implementations using custom CSS.

Flexbox Properties:

• Enable flex behaviors

• Direction
• Justify content
• Align items
• Align self
• Auto margins with justify-content
• Auto margins with align-items
• Wrap
 • Order
• Align content

Enable Flex Behavior

The "display" utility is used to create a flexible container and transform direct children elements into
flex items.
7. Keywords

❖ CDN
8. SampleQuestions

Remember:

1. Define the layout in bootstrap.

2. What is a card in bootsgtrap?
Understand:

1. Explain the ListGroups in bootstrap.

2. Explain the navbar in bootstrap.
3. Explain the different types of layouts in bootstrap.

9. Stimulating Question(s)
1. Create a responsive webpage for online examination system.
10. Mind Map

11. Student Summary

At the end of this session, the facilitator (Teacher) shall randomly pick-up few
students to summarize the deliverables.
12. Reading Materials
A. Programming the World Wide Web, 8th edition Robert W. Sebesta, Pearson.
B. Web Coding Development All In One for Dummies, Paul McFedries, Wiley.
C. Web programming with HTML, XHTML and CSS, 2e, Jon Duckett, Wiley India
D. Web programming Bai, Michael Ekedahl, CENAGE Learning, India edition.
E. An Introduction to Web Design + Programming, Paul S.Wang, India Edition

13.Scope for MiniProject

Student can develop responsive and dynamic web pages after completion of this unit.
-------------------------