Web Technologies (CSC336)
Week 05-06
Introduction to Bootstrap & JavaScript
MIAN MUHAMMAD TALHA
LECTURER
DEPARTMENT OF COMPUTER SCIENCE
COMSATS UNIVERSITY ISLAMABAD, WAH
CAMPUS
Layout
01 Recap of Week 03-04
02 What is Bootstrap?
03 Basic Features of Bootstrap
04 Self Learning Task (Lab)
05 What is JavaScript?
06 How JavaScript works with Web Structure?
07 Self Learning Task (Lab)
Prepared by Mian Muhammad Talha 2
01.
Recap of
Week
03-04
Prepared by Mian Muhammad Talha 3
Previous Week
• CSS, is a simple design language intended to simplify the process of
making web pages presentable. A style rule is made of three parts −
selector { property: value }
• Types of Selectors, Universal, ID, Class, Grouping …….
• Inline , Internal and External CSS
• CSS Comments, Div, Flexbox, Grid ……
Prepared by Mian Muhammad Talha 4
What is
Bootstrap?
Prepared by Mian Muhammad Talha 5
What is Bootstrap?
• Bootstrap is a powerful front-end framework for faster and easier
web development.
• Bootstrap gives you ability to create flexible and responsive web
layouts with much less efforts.
• Due to the complexities of CSS, developers introduced Bootstrap as a
solution for streamlined and efficient front-end development.
Prepared by Mian Muhammad Talha 6
Advantages of Bootstrap?
• 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.
• 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.
Prepared by Mian Muhammad Talha 7
How to Add Bootstrap?
You can use Bootstrap without downloading it by utilizing a content delivery
network (CDN). A CDN hosts the Bootstrap files on their servers, allowing
you to include them in your HTML directly from the CDN.
Link Bootstrap Files:
Add the following code to the <head> section of your HTML document.
Place these links before your custom CSS or JavaScript files.
<!-- Link to Bootstrap CSS via CDN -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Optional: Link to Bootstrap JavaScript and jQuery via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Prepared by Mian Muhammad Talha 8
Prepared by Mian Muhammad Talha 9
Basic
Features of
Bootstrap
Prepared by Mian Muhammad Talha 10
Bootstrap Helper Classes
Margin
Classes
This is a Bootstrap utility class that sets margin spacing on an element.
The m stands for "margin," and the # represents a specific spacing value.
In this case, m-4 applies a margin spacing of medium size (4 units) to
the element.
m-0 has no margin (0 units).
m-1 applies a small margin (0.25rem or about 4 pixels).
m-2 applies a medium margin (0.5rem or about 8 pixels).
m-3 applies a large margin (1rem or about 16 pixels).
m-4 applies an extra-large margin (1.5rem or about 24
pixels).
m-5 applies a huge margin (3rem or about 48 pixels).
Prepared by Mian Muhammad Talha 11
Bootstrap Helper Classes
Padding
Classes
Padding is the space between the content of an element and its borders.
Similar to margin classes, Bootstrap's padding classes are designed to
provide consistent and easily applicable spacing to your elements.
p-0: No padding.
p-1: Small padding (0.25rem or about 4 pixels).
p-2: Medium padding (0.5rem or about 8 pixels).
p-3: Large padding (1rem or about 16 pixels).
p-4: Extra-large padding (1.5rem or about 24 pixels).
p-5: Huge padding (3rem or about 48 pixels).
Prepared by Mian Muhammad Talha 12
Margin & Padding Classes
<div>
<div class="border border-dark m-0">m-0</div>
<div class="border border-dark p-1">p-1</div>
<div class="border border-dark m-2">m-2</div>
<div class="border border-dark p-3">p-3</div>
<div class="border border-dark m-4">m-4</div>
<div class="border border-dark m-5 p-5">m-5
p-5</div>
<div class="border border-dark m-3 p-4">
This is a content block with medium padding.
</div>
</div>
Prepared by Mian Muhammad Talha 13
Bootstrap Helper Classes
Color Classes
You can use the contextual color classes to emphasize the text and
convey meaning through color. Here's the complete list of available
contextual color classes.
<div class="m-4">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
</div>
Prepared by Mian Muhammad Talha 14
Color Classes
Prepared by Mian Muhammad Talha 15
Bootstrap Helper Classes
Background Color
Classes
Similar to the contextual color classes, you can use the contextual
background color classes to set the background-color of an element to
apply extra emphasis on them.
<div class="m-4">
<div class="p-3 mb-2 bg-primary
text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-
secondary</div>
<div class="p-3 mb-2 bg-success
text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger
text-white">.bg-danger</div>
Prepared by Mian Muhammad Talha <div class="p-3 mb-2 bg-warning 16
Background Color Classes
Prepared by Mian Muhammad Talha 17
Bootstrap Helper Classes
Border Classes
You can use the border utility classes to quickly style the border and
border-radius of an element. They are very useful for images, buttons, or
any other element.
<div class="bs-example">
<span class="border
border-primary"></span>
<span class="border
border-secondary"></span>
<span class="border
border-success"></span>
<span class="border border-danger"></span>
<span class="border
border-warning"></span>
Prepared by Mian Muhammad Talha 18
Border Classes
Prepared by Mian Muhammad Talha 19
Bootstrap Helper Classes
Text Alignment Classes
You can use these text alignment classes to align and format your text
content.
<div class="m-4">
<h2>Text alignment</h2>
<p class="text-start">Left aligned text on all viewport
sizes.</p>
<p class="text-center">Center aligned text on all viewport
sizes.</p>
<p class="text-right">Right aligned text on all viewport
sizes.</p> </div>
Prepared by Mian Muhammad Talha 20
Text Alignment Classes
Prepared by Mian Muhammad Talha 21
Bootstrap Helper Classes
Spacing Classes
You can use the spacing utility classes to quickly adjust the margin and
padding of an element.
The # character in the classes .mt-#, .pt-#, etc. represents the size of the
margin or padding. The value of the size can be an integer from 0 to 5,
or auto.
<div class="bs-example">
<div class="mt-0">.mt-0</div>
<div class="mt-1">.mt-1</div>
<div class="mt-2">.mt-2</div>
<div class="mt-3">.mt-3</div>
<div class="mt-4">.mt-4</div>
</div>
Prepared by Mian Muhammad Talha 22
Spacing Classes
Prepared by Mian Muhammad Talha 23
Containers with Bootstrap
Containers are the most basic layout element in Bootstrap and are required
when using the grid system. Containers are basically used to wrap content
with some padding. They are also used to align the content horizontally
center on the page in case of fixed width layout.
Bootstrap provides three different types containers:
• .container, which has a max-width at each responsive breakpoint.
• .container-fluid, which has 100% width at all breakpoints.
• .container-{breakpoint}, which has 100% width until the specified
breakpoint.
Prepared by Mian Muhammad Talha 24
Containers with Bootstrap
Prepared by Mian Muhammad Talha 25
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.
• It is fully responsive and uses twelve column system (12 columns
available per row) and six default responsive tiers.
Prepared by Mian Muhammad Talha 26
Bootstrap Grid System
Prepared by Mian Muhammad Talha 27
Self
Learning
Task (Lab)
Prepared by Mian Muhammad Talha 28
Self Learning Task (Lab)
Explore Bootstrap
Bootstrap is an extensive framework.
While we've touched on its fundamental
concepts so far, there's a wealth of other
features to discover. I encourage you to
delve into additional components like
tables, forms, buttons, and navigation
bars.
Prepared by Mian Muhammad Talha 29
What is
JavaScript?
Prepared by Mian Muhammad Talha 30
What is JavaScript?
• High-level, versatile scripting language.
• Used for web development and interactivity.
• Runs in browser, enhances user experience.
• Dynamic typing, supports both front-end, back-end.
• Manipulates HTML, CSS for responsive design.
Prepared by Mian Muhammad Talha 31
What is JavaScript?
• While HTML is responsible for structuring the content and CSS
for styling, JavaScript enhances user experience by making
websites responsive, interactive, and functional.
• A basic JavaScript program consists of lines of code that are
executed sequentially. Here's an example of a simple "Hello,
World!" program in JavaScript:
console.log( “Hello, World!” );
Prepared by Mian Muhammad Talha 32
Variables and Data Types
Declaring
•
Variables
var: used to declare variables globally or within a function scope.
It has some peculiar behaviors that can lead to unintended results,
so it's less commonly used nowadays.
• let: Introduced in modern JavaScript, it allows you to declare
variables with block scope (limited to the block of code where
they are defined). It's a better choice for most scenarios.
• const: Also has block scope like let, but it declares a variable that
cannot be reassigned after its initial value is assigned. It's used for
constants.
Prepared by Mian Muhammad Talha 33
Variables and Data Types
Data
•
Types
Strings: Used to represent text. Enclosed in single (' ') or
double (" ") quotes.
• Numbers: Used for numeric values. Can be integers or
decimals.
• Booleans: Represents either true or false values, used in
logical operations and comparisons.
Prepared by Mian Muhammad Talha 34
Type Coercion and Conversion
JavaScript automatically converts one type to another in certain
operations which is called Coercion.
let num = 10;
let str = "5";
console.log(num + str); // Output: "105" (coerced string)
To ensure correct operations, it's a good practice to explicitly
convert between types when needed:
let num = 10;
let str = "5";
let sum = num + Number(str); // Convert str to a number
console.log(sum); // Output: 15
Prepared by Mian Muhammad Talha 35
Common Programming Concepts
Operators and
Expressions Control Flow and Conditionals
let x = 10; let hour = 14;
let y = 5; if (hour < 12) {
console.log(x + y); // Output: 15 console.log("Good morning!");
console.log(`Sum: ${x + y}`); } else if (hour < 18) {
console.log("Good
Loops and Iteration afternoon!");
} else {
for (let i = 0; i < 5; i++) {
console.log("Good evening!");
console.log(`Iteration ${i}`);
}
}
Prepared by Mian Muhammad Talha 36
Common Programming Concepts
Functions Objects
function greet(name) { let person = {
return `Hello, ${name}!`; firstName: "Alice",
} lastName: "Johnson",
console.log(greet("Bob")); age: 30,
greet: function() {
Arrays return `Hello, $
{this.firstName}!`;
let colors = ["red", "green", "blue"];
}
colors.push("yellow");
};
console.log(colors);
console.log(person.greet());
Prepared by Mian Muhammad Talha 37
How JavaScript
works with Web
Structure?
Prepared by Mian Muhammad Talha 38
Where?
• In HTML, JavaScript code is inserted between <script> and
</script> tags.
• Scripts can be placed in the <body>, or in the <head> section
of an HTML page, or in both.
• Scripts can also be placed in external files:
Prepared by Mian Muhammad Talha 39
How ?
• To access an HTML element, JavaScript can use the
document.getElementById (id) method.
• The id attribute defines the HTML element. The innerHTML
property defines the HTML content
Prepared by Mian Muhammad Talha 40
Turn On the Bulb
Prepared by Mian Muhammad Talha 41
Common JavaScript Methods
Here's a table that lists some commonly used methods of
JavaScript in the context of HTML, CSS, and web development.
Method Name Syntax in JavaScript Purpose
innerHTML element.innerHTML = content Sets or retrieves the
HTML content within an
element.
document.write document.write(content)` Writes content directly to
the HTML document.
Used for testing and
simple demos
window.alert window.alert(message)` Displays an alert dialog
with a message to the user.
Prepared by Mian Muhammad Talha 42
Common JavaScript Methods
Method Syntax in JavaScript Purpose
Name
window.prom window.prompt(message, Displays a dialog box for
pt defaultValue) user input. Used for
simple input gathering.
window.confir window.confirm(message) Displays a confirmation
m dialog with OK and
Cancel buttons.
window.open window.open(url, windowName, Opens a new browser
features) window or tab with
specified URL and
options.
window.close window.close() Closes the current
browser window or tab (if
Prepared by Mian Muhammad Talha allowed). 43
Common JavaScript Methods
Method Name Syntax in JavaScript Purpose
window.scrollTo window.scrollTo(x, y) Scrolls the window to a
specific position on the
page.
window.location window.location.href = Manages the current URL
newURL and performs navigation.
String.prototype.leng “Hello".length Returns the length of a
th string.
String.prototype.inde "Hello".indexOf("lo") Returns the index of the
xOf first occurrence of a
substring.
String.prototype.slice "Hello".slice(1, 3)` Extracts a portion of a
string.
String.prototype.repl
Prepared by Mian Muhammad Talha "Hello".replace("H", "J") Replaces a substring with 44
Common JavaScript Methods
Method Name Syntax in Purpose
JavaScript
String.prototype.toUpper `"hello".toUpperCase Converts a string to
Case () uppercase.
String.prototype.toLower `"Hello".toLowerCas Converts a string to
Case e() lowercase.
String.prototype.trim “Hello".trim()` Removes whitespace from
the beginning and end of
a string.
Prepared by Mian Muhammad Talha 45
Self
Learning
Task (Lab)
Prepared by Mian Muhammad Talha 46
Self Learning Task (Lab)
Explore JavaScript
JavaScript offers many possibilities. We've
covered the basics, but there's a lot more
to learn. You might want to explore tasks
like changing colors, showing alerts,
making pop-up boxes, and updating
content when you click a button.
Prepared by Mian Muhammad Talha 47
