0% found this document useful (0 votes)

11 views66 pages

Chapter 6

Uploaded by

sandilya23panda

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

11 views66 pages

Chapter 6

Uploaded by

sandilya23panda

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 66

Introduction to Bootstrap 1

Chapter 6

Introduction to Bootstrap

Introduction
 Bootstrap was developed and introduced in the beginning of 2010 by Mark Otto and
Jacob Thornton at Twitter.
 It was released as an open source product in August 2011 on GitHub and by June 2014
Bootstrap was the No.1 project on GitHub.
 Bootstrap is one of the most prominent and leading front-end frameworks used for easier
and faster web development.
 It is absolutely free to download and use.
 Bootstrap brings out a whole new set of designs and functionalities in HTML, CSS, and
even JavaScript components for developing a responsive and mobile friendly website.
o A website is called responsive website which can automatically adjust itself to
look good on all devices, from smart phones to desktops etc.
 Bootstrap can change anything on the webpage – buttons, text, tables, links, images, and
other elements − while it introduces some of its built-in features which decrease the need
of writing HTML and CSS from scratch.
 It includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many others.
 It can also use JavaScript plug-ins.

Benefit of Bootstrap Framework

 It produces fewer cross-browser bugs.
 It is a consistent framework supported by all web browsers and CSS-based compatibility
improvements.
 It is a lightweight and hence widely used framework for creating responsive sites.
 It's easily customizable.
 It has a simple and effective grid system.

How to use Bootstrap 4 on a webpage:

 In this chapter, Bootstrap 4 is used. There are two ways to include Bootstrap:
o Include Bootstrap from the CDN link.
o Download Bootstrap and use it.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 2

Include Bootstrap from the CDN link

 This method of installing Bootstrap is easy and it is highly recommended.

 Go to www.getbootstrap.com and click Getting Started. Scroll down and copy the
Bootstrap CDN for CSS, JS, Popper.js, and jQuery links and paste them into the <head>
element section of the HTML code.

 Bootstrap CSS Library:

 jQuery Library:
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

 JS Library:
<script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>

 The Latest compiled JavaScript Library:

Download Bootstrap:

 This method of installing bootstrap is also easy, but it can work offline (doesn’t require
an internet connection) but it might not work for some browsers.
 Go to www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap
button.
 A.zip file would get downloaded. Extract it and go into the distribution folder. It contains
two folders named CSS and JS.

 Bootstrap CSS Library:

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>

 jQuery Library:

<script src=”js/bootstrap.min.js”> </script>

 Add the file link into the <head> element section of the HTML code.

Structure of a Bootstrap-enabled Webpage

 This section, explore the structure of an HTML webpage to make it suitable for
Bootstrap.
 Consider the following example to generate a basic Bootstrap-powered HTML webpage.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 3

 In the beginning place the HTML5 doctype, the language attribute, and the
appropriate character set as follows:

<!DOCTYPE html>
<html lang=“fr”>
<head>
<meta charset=“utf-7”>
</head>
</html>

 In general, Bootstrap was originally designed for smartphones. Therefore, it is

common to find mobile-first styles in it. For incorporating the appropriate touch
zooming and rendering, make sure to go inside the <head> element and add a <meta>
tag:

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

o When the page is initially loaded in a browser, the “initial-scale=1” sets the
beginning zoom level.
o For setting the page’s width to correspond it with the device’s screen width, the
“width=device-width” is used.

<!DOCTYPE html>
<html lang=“fr”>
<head>
<meta charset=“utf-7”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
</head>
</html>

 In Bootstrap, the contents of the website are encompassed in an element known as a

container. Container has two classes:
o .container class
o .container-fluid class

.container class

 The .container class provides a responsive fixed width container.

 The .container class has fixed width which is applicable for all the screen sizes (xs, sm,
md, and lg). Following are the details of the screen sizes:
• xs: Extra small devices (less than 768; e.g., smart phones).
• sm: Small screens (from 768 pixels and up; e.g., tablets).
• md: Medium screen (>= 992 pixels; e.g., desktops or laptops).
• lg: Large screens (>= 1200 pixels; e.g., large desktops).

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 4

 Hence, depending on the available viewport of the page, .container gives a specific width
to the div tag.
 In the below example, the div with class “container” will have a fixed left and right
margin and will not take the complete width of its parent or the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Container Class Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div class="container">
<h1>This heading is placed in a container class.</h1>
<p>This paragraph is placed in a container class.</p>
<p>This paragraph is placed in a container class.</p>
</div>
</body>
</html>

.container-fluid class

 The .container-fluid class provides a full-width container which spans the entire width of
the viewport.
 In the below example, the div with class “container-fluid” will take up the complete
width of the viewport and will expand or shrink whenever the viewport is resized.

<!DOCTYPE html>
<html lang="en">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 5

<head>
<title>Container-fluid Class Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<h1>This heading is placed in a container-fluid class.</h1>
<p>This paragraph is placed in a container-fluid class.</p>
<p>This paragraph is placed in a container-fluid class.</p>
</div>
</body>
</html>

Grids
 Grid systems are one of the most prominent features of Bootstrap.
 Grid is created through a flexbox and can accept up to 12 columns in a webpage.
 The lesser the number of columns means that wider the columns.
o Due to Bootstrap’s responsiveness, this grid system rearranges the columns
according to the screen size.
 There are five types of classes in grids:
i. .col: This is used for smallest screens where the width of the screen falls under
576px.
ii. .col-sm: This is used for small screens where the width of the screen exceeds 576px.
iii. .col-md: This is used for medium screens where the width of the screen exceeds
768px.
iv. .col-lg: This is used for large screens where the width of the screen exceeds 992px.
v. .col-xl: This is used for extra-large screens where the width of the screen exceeds
1200px.
 Consider the following example which generates four columns of equal size.
 In this example, the outer div element start with “row” class and inner div starts with
“col” class.
<div class=“row”>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 6

<div class="col" style="background-color:red; border-style: dotted">.col</div>

 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Columns Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/ootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></scri
pt>
</head>
<body>
<div class="container-fluid">
<h1>Four Columns</h1>
<div class="row">
<div class="col" style="background-color:red;border-style:
dotted;">.col</div>
<div class="col" style="background-color:red;border-style:
dotted">.col</div>
<div class="col" style="background-color:red;border-style:
dotted">.col</div>
<div class="col" style="background-color:red;border-style:
dotted">.col</div>
</div>
</div>
</body>
</html>

 The following shows how the grid layout changes according to screen sizes.

<!DOCTYPE html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 7

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<h1>Column Example</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the
screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3" style="background-color:green;"> First
Column </div>
<div class="col-sm-3" style="background-color:lightgreen;">
Second Column </div>
<div class="col-sm-3" style="background-color:green;"> Third
Column </div>
<div class="col-sm-3" style="background-color:lightgreen;">
Fourth Column </div>
</div>
</div>
</body>
</html>

Typography
 Bootstrap supports various properties to format text properly for various device sizes.
 Some of the texts are rendered properly with default behavior, which means without even
using any specific classes.
 By default, Bootstrap 4 assigns the default settings for text-related content (Table 6.1).

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 8

Display Headings

 Bootstrap also offers another set of headings known as display headings.

 These headings are more prominent than HTML’s headings.
 In total, there are four types of display headings, each distinguished by their number.
 They are distinguished due to their font-size and font-weight.
1. .display-1
2. .display-2
3. .display-3
4. .display-4
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Headings</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 9

</script>

</head>
<body>
<div class="container-fluid">
<h1>This Is Our First Heading</h1>
<h1 class="display-1">This Is Our First Display Heading!</h1>
<h1 class="display-2">This Is Our Second Display Heading!</h1>
<h1 class="display-3">This Is Our Third Display Heading!</h1>
<h1 class="display-4">This Is Our Fourth Display Heading!</h1>
</div>
</body>
</html>

HTML Text Elements in Bootstrap

 Many of HTML’s elements offer a different result in Bootstrap. Consider the impact of
following properties in Bootstrap:
o The <small> element from HTML is used in Bootstrap 4 for a different purpose.
Bootstrap uses it to generate a secondary text which displays a lighter tone.
o The <mark> element is used for highlighting any piece of information with a
little padding and a yellow color for its background.
o When an abbreviation is written via <abbr> then Bootstrap 4 adds a dotted border
at its bottom.
o Instead of <blockquote> element in HTML, Bootstrap provides the “.blockquote”
class for quotations.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Text Elements</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 10

<blockquote class="blockquote">
<p>Europe's new data protection rules will be a reality tomorrow.
Europeans' privacy will be better protected and companies benefit
from a single set of rules across the EU. Strong data protection
rules are the basis for a functioning Digital Single Market and for
the online economy to prosper. The new rules ensure that citizens
can trust in how their data is used and that the EU can make best of
the opportunities of the data economy. Our new data protection
rules were agreed for a reason: Two-thirds of Europeans are
concerned about the way their data was being handled, feeling they
have no control over information they give online. Companies
need clarity to be able to safely extend operations across the EU.
Recent data scandals confirmed that with stricter and clearer data
protection rules we are doing the right thing in Europe.</p>

<footer class="blockquote-footer">Andrus Ansip</footer>

</blockquote>
</div>
</body>
</html>

Colors
 Bootstrap provides several color classes for both the colors of font and their backgrounds.

Color Classes to Convey Meaning

 Bootstrap provides various color classes to apply color properties to various elements.
 Table 6.2 explains all the color classes.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 11

 To understand the use of all these color classes, check the following example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Text Elements</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 12

<p class="text-primary">If text-primary is used, then the text looks like

this line.</p>
<p class="text-success">If text-success is used, then the text looks like
this line.</p>
<p class="text-info">If text-info is used, then the text looks like this
line.</p>
<p class="text-warning">If text-warning is used, then the text looks like
this line.</p>
<p class="text-danger">If text-danger is used, then the text looks like this
line.</p>
<p class="text-secondary">If text-secondary is used, then the text looks
like this line.</p>
<p class="text-dark">If text-dark is used, then the text looks like this
line.</p>
<p class="text-body">If text-body is used, then the text looks like this
line.</p>
<p class="text-light">If text-light is used, then the text looks like this
line.</p>
<p class="text-white">If text-white is used, then the text looks like this
line.</p>
</div>
</body>
</html>

Background Colors

 The background color of text can also be configured with Bootstrap’s color classes.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Text Elements</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 13

Images
 Bootstrap offers different classes for images to make their appearance better and also to
make them responsive.
 Making an image responsive means that it should scale according to its parent element.
 That is, the size of the image should not overflow its parent and will grow and shrink
according to the change in the size of its parent without losing its aspect ratio.
 Bootstrap also facilitates web designers to display their images in different styles.
 The different classes available in Bootstrap for images are as explained below:
o .img-responsive class
o .img-fluid class
o .rounded class
o .rounded-circle class
o .img-thumbnail class

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 14

.img-responsive class

 Responsive images in Bootstrap are created by adding .img-responsive class to <img>

tag.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Images in Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

.img-fluid class

 Responsive images in Bootstrap are created by adding .img-fluid class to <img> tag.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Images in Bootstrap</title>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 15

.rounded class

 To display an image with rounder corners, the .rounded class is used.

 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Images in Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 16

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>

.rounded-circle class

 To reshape the image’s structure as a circle, the .rounded-circle class is used.

 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Images in Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 17

<img src="photography.jpg" class=" rounded-circle" alt=" rounded-circle

scenery image" width="350" height="250">
</div>
</body>
</html>

.img-thumbnail class

 To shape an image to a thumbnail, the .img-thumbnail class is used.

 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Images in Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 18

Jumbotron
 One of the most popular features of Bootstrap 4 is the “jumbotron”.
 It is basically a giant box with a gray background which is used to highlight importance
of a piece of content.
 Jumbotron can accept other Bootstrap classes as well as majority of the HTML elements.
 To create a jumbotron, add a <div> element and place a .jumbotron class in it.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Jumbotron</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

 To ensure that your jumbotron widens up to the complete width, use the .jumbotron-fluid
class and add the container classes inside it.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 19

 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Full-width Jumbotron</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="container">
<h1>This heading does not come under jumbotron's content.</h1>
<p>This paragraph does not come under jumbotron's content.</p>
</div>
</body>
</html>

Alerts
 Bootstrap provides numerous types of alert boxes (or simply alerts) to display a special
meaning.
 Alerts begin with the .alert class and are followed by contextual classes.
 Table 6.3 explains these contextual classes.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 20

 The following example demonstrate the different alert classes

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alerts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 21

<strong>Info!</strong> Such an alert describes a piece of

information which can neither be categorized as positive or
negative.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Such an alert generates a warning for
the user.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Such an alert describes the presence of
a negative action.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Such an alert describes important
information.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Such an alert describes low priority
information.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Such an alert has a dark grey background.
</div>
<div class="alert alert-light">
<strong>Light!</strong> Such an alert a light green background.
</div>
</div>
</body>
</html>

 It is also possible to add a link in alert boxes by using the alert-link class.
 In the following example a link is added in each of the alert boxes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Alert Links</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 22

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 23

<strong>Dark!</strong> To download Bootstrap<a

href="https://getBootstrap.com" class="alert-link"> click this
link</a>.
</div>
<div class="alert alert-light">
<strong>Light!</strong> To download Bootstrap<a
href="https://getBootstrap.com" class="alert-link"> click this
link</a>.
</div>
</div>
</body>
</html>

Closing Alerts

 In order to display an alert which can be closed upon clicking, use the .alert-dismissible
class in the container of the alert. Subsequently, place class=“close” and data-
dismiss=“alert” on the content which you want to be disappear upon clicking.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Closing Alerts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 24

<button type="button" class="close" data-

dismiss="alert">×</button>
<strong>Congratulations!</strong> Your ID was successfully
created!
</div>
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Information!</strong> Check our About Us page to see
our services.
</div>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Warning!</strong> Avoid travel in this weather.
</div>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Danger!</strong> This website may contain a virus.
</div>
<div class="alert alert-primary alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Attention!</strong> The flight to Detroit is cancelled!
</div>
<div class="alert alert-secondary alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Suggestion:</strong> Use text editor for professional web
designing projects.
</div>
<div class="alert alert-dark alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>See Below</strong> to understand the random forest
algorithm.
</div>
<div class="alert alert-light alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>See above!</strong> to understand the decision tree
algorithm.
</div>
</div>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 25

</body>
</html>

Animated Alerts

 Bootstrap also allows us to add a little animation effect to the alert boxes.
 It provides two classes
o .fade class
o .show class
 These will add fading effect when closing the pop-up.
 In the following example shows, upon clicking on the close button (x), the popup will
disappear slowly.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated Alerts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 26

<button type="button" class="close" data-

dismiss="alert">×</button>
<strong>Information!</strong> Check our About Us page to see
our services.
</div>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Warning!</strong> Avoid travel in this weather.
</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Danger!</strong> This website may contain a virus.
</div>
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Attention!</strong> The flight to Detroit is cancelled!
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Suggestion:</strong> Use text editor for professional web
designing projects.
</div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>See Below</strong> to understand the random forest
algorithm.
</div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>See above!</strong> to understand the decision tree
algorithm.
</div>
</div>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 27

Buttons
 Bootstrap provides buttons elements to design buttons which represents a certain type of
action.
 In the following example shows all types of buttons that Bootstrap provides and explains
how to create buttons.

<!DOCTYPE html>
<html lang="en">
<head>
< title>Buttons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 28

</button>
<button type="button" class="btn btn-secondary">
Secondary Button
</button>
<button type="button" class="btn btn-link">
Link Button
</button>
<button type="button" class="btn btn-dark">
Dark Button
</button>
<button type="button" class="btn btn-info">
Info Button
</button>
<button type="button" class="btn btn-light">
Light Button
</button>
</div>
</body>
</html>

Outline and Size Buttons

 Bootstrap 4 supports eight outline buttons and three basic sizes for buttons.
 Table 6.4 explains these eight outline buttons and three basic sizes.

 The following example demonstrate all eight outline buttons and three basic sizes

<!DOCTYPE html>
<html lang="en">
<head>
< title>Buttons Outline and Size</title>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 29

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 30

</body>
</html>

Button Groups
 Sometimes the webpage need multiple buttons, at that time Instead of creating each
button separately, create multiple buttons group.
 Bootstrap 4 offers button groups through which multiple buttons can be created at once
by using the “.btn-group” class in the <div> element.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Groups</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 31

Reset
</button>
</div>
</div>
</body>
</html>

 To adjust the size of buttons, use the following classes.

o .btn-group-lg
o .btn-group-md
o .btn-group-sm
 The below example, which shows the group sizes in large, medium, and small.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Groups Sizes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<p>With btn-group-lg in large size:</p>

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Enter</button>
<button type="button" class="btn btn-primary">Cancel</button>
<button type="button" class="btn btn-primary">Reset</button>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 32

</div>

<p>With btn-group-md in medium size:</p>

<div class="btn-group btn-group-md">
<button type="button" class="btn btn-primary">Enter</button>
<button type="button" class="btn btn-primary">Cancel</button>
<button type="button" class="btn btn-primary">Reset</button>
</div>

<p>With btn-group-md in small size:</p>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Enter</button>
<button type="button" class="btn btn-primary">Cancel</button>
<button type="button" class="btn btn-primary">Reset</button>
</div>
</div>
</body>
</html>

Buttons in a vertical format

 To display buttons in a vertical format use the .btn-group vertical class.

 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Button in Vertical Format</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 33

</head>
<body>
<div class="container">
<h2>Button Listed Vertically</h2>
<p>The .btn-group-vertical class is used to generate a vertical button
group:</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">
HTML
</button>
<button type="button" class="btn btn-primary">
CSS
</button>
<button type="button" class="btn btn-primary">
Bootstrap
</button>
</div>
</div>
</body>
</html>

Dropdown Menus

 To generate a dropdown menu needs to nest the button groups (add one group into
another).
 Button groups are inherently “inline”, which means that multiple button groups would
appear side by side.
 To click a button which opens the menu, go into its body and add the “dropdown-toggle”,
which creates the dropdown on it and then add ‘data-toggle=“dropdown”’ so it can open.
 The following example shows a dropdown menu

<!DOCTYPE html>
<html lang="en">
<head>
<title>Dropdown Menus</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 34

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>

<div class="btn-group">
<button type="button" class="btn btn-primary">
Cybersecurity
</button>

<button type="button" class="btn btn-primary">

Mobile App Development
</button>

<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-
toggle" data-toggle="dropdown">
Website Development
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">Bootstrap</a>
</div>
</div>
</div>
</div>
</body>
</html>

Progress Bars
 Progress bars are used to display the remaining portion of an online activity.
 Progress bar can be created by using the .progress class in the container after which the
“.progress-bar” class is placed in the element of the container.
 In order to define the “progress” of the bar, apply a percentage through the CSS width
property.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 35

 The following example demonstrates code for a simple progress bar.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Progress Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Height and Label of a progress bar

 To resize the height of a progress bar, use the “height” property.

 Note that this height must be set same for two elements: progress bar container and the
progress bar.
 To show the percentage of the bar, simply add the value of the width in its <div> tag.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title> Height and Label of Progress Bar</title>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 36

Adding Colors to Progress Bar

 By default, Bootstrap’s progress bar is primary.

 However, it can be modified to accept any of the color contextual classes.
 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Adding colours to Progress Bar</title>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 37

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 38

style="width:49%">49%</div>
</div><br>
<div class="progress border">
<div class="progress-bar bg-light" style="width:56%">56%</div>
</div><br>
<div class="progress">
<div class="progress-bar bg-dark" style="width:63%">63%</div>
</div>
</div>
</body>
</html>

Adding Stripes to Progress Bars

 By utilizing the “.progress-bar-striped” class, it is possible to incorporate stripes in the

progress bars.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title> Striped Progress Bars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 39

</div>
<br>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped"
style="width:20%">20%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped"
style="width:30%">30%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped"
style="width:40%">40%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped"
style="width:40%">40%</div>
</div>
</div>
</body>
</html>

Adding Animations to the Progress Bar

 To make “lively” animated progress which shown in many websites, use the “.progress-
bar-animated” class.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title> Animated Progress Bars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 40

Pagination
4
 Pagination can be implemented using Bootstrap, when the number of webpages in a
website increases.
 To apply pagination, the .pagination class is used in an unordered list while the .page-
item and .page-link classes are used with the list items.
 For example,

<!DOCTYPE html>
<html lang="en">
<head>
<title> Pagination </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 41

 To show the current page, an active class can be used. To modify the size, simply add
“pagination-lg”, “pagination-md” or “pagination-sm”.
 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Pagination </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 42

<body>
<div class="container">
<h1>Active State and Size in Pagination</h1>

<h3>Pagination in Large Size:</h3>

<h3>Pagination in Medium Size:</h3>

<h3>Pagination in Small Size:</h3>

Cards
 A 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.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 43

 The basic card consists Card with the building block of a card is called the card-body.
 The Basic Card is generated by using the “.card” class while its contents are specified by
using the “.card-body” class.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="card">
<div class="card-body">Second Card</div>
</div>
</div>
</body>
</html>

 Headers and footers can be placed in the card through the use of “.card-header” and
“.card-footer” classes, respectively.
 For example

<!DOCTYPE html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 44

<html lang="en">
<head>
<title>Card with Header and Footer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Navigation Menus
 Navigation menu can be used to create a main menu or submenus for easy navigation.
 The navigation menus are two types
o Horizontal Navigation Menus
o Vertical Navigation Menus

Horizontal Navigation Menus

 The horizontal navigation menu is a standard navigation menu.

 To generate horizontal navigation menu, use the “.nav” class in an unordered list along
with “.nav-item” and “.nav-link” classes in its contents (list items).

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 45

 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title> Horizontal Nav Menu </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<li class="nav-item">
<a class="nav-link" href="#">Second Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Third Item</a>
</li>

<li class="nav-item">
<a class="nav-link disabled" href="#">Fourth Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Fifth Item</a>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 46

</li>
</ul>
</div>
</body>
</html>

Vertical Navigation Menus

 To convert the above-mentioned horizontal menu in a vertical navigation menu, simply

add “.flex column” ahead of the “nav” class.
 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Vertical Nav Menu </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<li class="nav-item">
<a class="nav-link" href="#">Second Item</a>
</li>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 47

<li class="nav-item">
<a class="nav-link" href="#">Third Item</a>
</li>

<li class="nav-item">
<a class="nav-link disabled" href="#">Fourth Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Fifth Item</a>
</li>
</ul>
</div>
</body>
</html>

Tabs

 The “.nav-tabs” class is used, in order to change the navigation menu into one which has
tabs.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title> Tabs Menu </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 48

<h1> Tabs Menu Example</h1>

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">First Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Second Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Third Item</a>
</li>

<li class="nav-item">
<a class="nav-link disabled" href="#">Fourth Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Fifth Item</a>
</li>
</ul>
</div>
</body>
</html>

Pills

 Pills are simple navigation components which offer various different layouts to enable
faster navigation between options.
 To add pills in the navigation menu, use the “.nav-pills” class.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Pills Menu </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 49

<li class="nav-item">
<a class="nav-link" href="#">Second Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Third Item</a>
</li>

<li class="nav-item">
<a class="nav-link disabled" href="#">Fourth Item</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Fifth Item</a>
</li>
</ul>
</div>
</body>
</html>

Navigation Bar
 A navigation bar consists of a header which is positioned on the top of a webpage.
 In Bootstrap, the functionality of such navigation bars relies on the size of user screens –
it can extend or collapse accordingly.
 There are two types of Navigation Bar
o Horizontal Navigation Bars
o Vertical Navigation Bars

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 50

Horizontal Navigation Bars

 To create a horizontal navigation bar, use the .navbar class while the responsiveness can
be configured through the “.navbar-expandxl|lg|md|sm” class.
 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Navigation Bars </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 51

<br>
<div class="container-fluid">
<h1> Navigation Bars Example </h1>
</div>
</body>
</html>

Vertical Navigation Bars

 To generate a vertical navigation bar, simply eliminate the “.navbar-expand-xl|lg|md|sm”

class.
 For getting the navigation bar in the middle of the page, use the “.justify-content-center”
class.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Navigation Bars </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 52

Colorful Navigation Bars

 All the background color classes can be used to modify the navigation bar’s background
colors.
 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Navigation Bars </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 53

Forms
 Bootstrap offers two types of layouts for forms.
o Bootstrap Stacked form.
o Bootstrap Inline form.

Bootstrap Stacked Form

 The stacked form creates input field and submit button in stacked format.
 The “.form-group” class is used to generate a stacked form.
 For example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Stacked Forms </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 54

<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email"
placeholder="Type Your Email Address" name="email">
</div>

<div class="form-group">
<label for="contact">Contact No:</label>
<input type="text" class="form-control" id="contact"
placeholder="Enter Contact Number" name="contact">
</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>
</div>
</body>
</html>

Bootstrap Inline Form

 The inline form contains elements that are left-aligned and inline.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 55

 The inline property applies when viewports are at least 576px wide. If screen size is
smaller than 576px then the form element will be stacked vertically.
 The “.form-inline” class is used with <form> element to create inline form.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title> Inline Forms </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<label for="fname">First Name:</label>

<label for="lname">Last Name:</label>

<label for="email">Email Address:</label>

<label for="contact">Contact No:</label>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 56

<input type="text" class="form-control" id="contact"

placeholder="Enter Contact Number" name="contact">

<button type="submit" class="btn btn-primary">Submit</button>

</form>
</div>
</body>
</html>

Carousel
 The Bootstrap Carousel is used to create an image slide show for the webpage to make it
look more attractive.
 To creating the carousel, first need to set the number of “indicators”, which says the
number of images in the slideshow.
 The “indicators” is set using the “carousel-indicators” class which is placed in an
unordered list.
 For the list items, the “data-target” class is used.
 Afterward, the images in the slideshow have to be specified by using the “carousel-
inner” class in a div tag. Images are set through the “carousel-item” class.
 In the end, controls are added through “carousel-control-prev” and “carousel-control-
next” class.
 The “carousel-control-prev” and “carousel-control-next” class are used to go back and
forth in the slideshow. Note that by default the slideshow would run itself.
 In the following example the number of “indicators” set as 4.which shows a page with
carousel like sliding images. It also has two buttons to go to previous or next image.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Carousel Example </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 57

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
<style>
.carousel-inner img {
width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="container">
<h1> Carousel Example </h1>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>

<div class ="carousel-item">

</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 58

</a>

<a class="carousel-control-next" href="#demo" data-slide="next">

 To Add Captions inside the slides use “.carousel-caption” class is used inside the
“.carousel-item” class.
 For example

<!DOCTYPE html>
<html lang="en">
<head>
<title> Carousel Example </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 59

<div class="carousel-caption">
<h3>London Bridge</h3>
<p>London is quite expensive but it is worth
it!</p>
</div>
</div>

<div class="carousel-caption">
<h3>Berlin Winter</h3>
<p>Berlin is one of the biggest tech hubs in the
world.</p>
</div>
</div>

<div class="carousel-caption">
<h3>Zurich Switzerland</h3>
<p>Zurich is the center of banking and finance.</p>
</div>
</div>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 60

<h3>Venice Italy</h3>
<p>Few cities can claim to match Venice in
beauty.</p>
</div>
</div>

<a class="carousel-control-next" href="#demo" data-slide="next">

Media Objects
 Bootstrap is known for providing a simple method to align (left- or right-aligned) media
objects such as images or videos along with the textual content.
 These objects could be used for various types of components like blog comments, tweets,
etc.
 The main aim of the object is to keep the code for building these blocks of information
very short.

Basic Media Object

 The .media class is used to float a media object (e.g., video, image, or audio) to the left or
right side of a content block.
 To make the Media Object, use .media class to the container element and place media
content inside the child container with the .media-body class.
 The following example shows a page with media object.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Carousel Example </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 61

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="media-body">
<h5 class="mt-0">Some Special Quotes</h5>
Every "Failure" brings new "Opportunity".
Every "Darkness" brings new "Light".
Every "Blindness" brings new "Vision".
Every "No" brings new “Yes”.
Every "Closed Door" opens up a new door.
There is no such thing called "End of the World".
Keep fighting the good fight my friend. One day would be
yours, if not today, it will be tomorrow.
</div>
</div>
</div>
</body>
</html>

Nested Media Objects

 The media object can be added inside media object. It is called nested media object.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 62

 It can be used for creating comment threads in a blog post.

 For example

<body>
<div class="container">
<h1>Media Object Nested Example</h1>
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img width="60px" class="mr-3" src="photography.jpg"
alt=" scenery photo">
</a>
<div class = "media-body">
<h4 class = "media-heading">Quotation 1</h4>
<p>
Trust is the most important element. By con you can
win once and lose forever but with honesty you can
win over and over again.
</p>
<div class = "media">
<a class = "pull-left" href = "#">
<img width="60px" class="mr-3"
src="photography.jpg" alt=" scenery
photo">
</a>
<div class = "media-body">

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 63

<h4 class = "media-heading">Quotation

2</h4>
World is so beautiful when you look beyond
your self-interest. Success and self do not
work together. Rise up the ordinary.
<div class = "media">
<a class = "pull-left" href = "#">
<img width="60px"
class="mr-3"
src="photography.jpg" alt="
scenery photo">
</a>
<div class = "media-body">
<h4 class = "media-
heading">Quotation 3</h4>
The greatest thing in the
world is not in dying rich but
leaving the richness behind
for the world to treasure.
</div>
</div>
</div>
</div>

<div class = "media">

<a class = "pull-left" href = "#">
<img width="60px" class="mr-3"
src="photography.jpg" alt=" scenery
photo">
</a>
<div class = "media-body">
<h4 class = "media-heading">Quotation
4</h4>
Dreams are dreams until you make them a
reality. And that won’t happen until you
give up your sleep, Wake Up.
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 64

The alignment of media objects

 The horizontal alignment media and content are changed easily.
 Apart from this, by utilizing the flexbox utility classes, the images or other media files
can be aligned at the centre or bottom of the content block.
 The following example, which shows various alignment of media objects.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Media Object Nested Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Media Object Alignment Example</h1>
<div class="media">
<img width="30px" class="align-self-start mr-3" src="photography.jpg"
alt="scenery photo">
<div class="media-body">
<h5 class="mt-0">Quotation 1</h5>
Don’t waste your time competing with someone. Instead focus on
competing with yourself. Leaders don’t compete, followers do.
</div>
</div>
<br /><br />
<div class="media">
<img width="30px" class="align-self-center mr-3" src="photography.jpg"
alt="scenery photo">
<div class="media-body">
<h5 class="mt-0">Quotation 2</h5>
Spread your wings, become a role model for others to follow so
that they can match you step for step in their own quest to achieve
success.
</div>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 65

</div>
<br /><br />
<div class="media">
<img width="30px" class="align-self-end mr-3" src="photography.jpg"
alt="scenery photo">
<div class="media-body">
<h5 class="mt-0">Quotation 3</h5>
Opportunity to help others is the opportunity to help yourself in
disguise.
</div>
</div>
</div>
</body>
</html>

Creating a media list

 The media lists are very resourceful in the representation of user comment threads, lists,
articles, etc.
 A media list can be created by placing media objects inside a list, using the media object
classes and HTML list elements.
 In the following example shows a page with simple media object list.

Lecturer Notes Prepared by Dr. Sangram Panigrahi

Introduction to Bootstrap 66

<a class = "pull-left" href = "#">

<img width="60px" class="mr-3" src="photography.jpg"
alt="scenery photo">
</a>
<div class = "media-body">
<h4 class = "media-heading">Quotation 1</h4>
<p>
Fools are those who do not understand, every action
has an equal and opposite reaction. Take your
actions carefully to avoid unwanted results.
</p>
</div>
</li>
<li class = "media">
<a class = "pull-left" href = “#”>
<img width="60px" class="mr-3" src="photography.jpg"
alt="scenery photo">
</a>
<div class = "media-body">
<h4 class = "media-heading">Quotation 2</h4>
<p>
Experience every failure closely because each
failure is taking you closer to your goal and
preparing you to be the unbeatable.
</p>
</div>
</li>
<li class = "media">
<a class = "pull-left" href = "#">
<img width="60px" class="mr-3" src="photography.jpg"
alt="scenery photo">
</a>
<div class = "media-body">
<h4 class = "media-heading">Quotation 3</h4>
<p>
Explore new avenues and look for ways to have a
greater, much more influential impact on the world
around you.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

PP 2021 Icas en Eng D C
100% (1)
PP 2021 Icas en Eng D C
46 pages
Bootstrap Lecture 1
100% (1)
Bootstrap Lecture 1
16 pages
UNIT-4
No ratings yet
UNIT-4
30 pages
Section 2_Unit 1 Bootstrap
No ratings yet
Section 2_Unit 1 Bootstrap
55 pages
Web Lecture5
No ratings yet
Web Lecture5
29 pages
WT Module 4
No ratings yet
WT Module 4
40 pages
Bootstrap
No ratings yet
Bootstrap
4 pages
CDBBB 4521711186739687
No ratings yet
CDBBB 4521711186739687
52 pages
Bootstrap
No ratings yet
Bootstrap
50 pages
Bootstrap Introduction
No ratings yet
Bootstrap Introduction
28 pages
Bootstrap Tutorial
No ratings yet
Bootstrap Tutorial
46 pages
What Is Bootstrap?
No ratings yet
What Is Bootstrap?
166 pages
9 Responsive Website Development Bootstrap Class Note
No ratings yet
9 Responsive Website Development Bootstrap Class Note
8 pages
UNIT3newpptx 2023 10 13 10 47 03
No ratings yet
UNIT3newpptx 2023 10 13 10 47 03
190 pages
BootStrap 5
No ratings yet
BootStrap 5
148 pages
Responsive Web Design Using Bootstrap
No ratings yet
Responsive Web Design Using Bootstrap
23 pages
Ch5 Bootstrap
No ratings yet
Ch5 Bootstrap
31 pages
GMR Institute of Technology Rajam, Ap: Class Course Coursecode Preparedby Lecturetopic
No ratings yet
GMR Institute of Technology Rajam, Ap: Class Course Coursecode Preparedby Lecturetopic
13 pages
Lecture 12
No ratings yet
Lecture 12
27 pages
Module 3
No ratings yet
Module 3
35 pages
Responsive Web Design
No ratings yet
Responsive Web Design
22 pages
ICT Lab Session 5
No ratings yet
ICT Lab Session 5
8 pages
TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau
No ratings yet
TI33031 Pemrograman Web I: M Rizki Fadhilah S.T., M.Eng. Prodi Teknik Informatika Fakultas Teknik Universitas Islam Riau
63 pages
Bootstrap
No ratings yet
Bootstrap
15 pages
ELF Tudy Ootstrap
No ratings yet
ELF Tudy Ootstrap
15 pages
Bootstrap5 ITIS243
No ratings yet
Bootstrap5 ITIS243
49 pages
Bootstrap 3 Tutorial: Printed by
No ratings yet
Bootstrap 3 Tutorial: Printed by
33 pages
Responsive Web Design
No ratings yet
Responsive Web Design
29 pages
fsd2 (1)
No ratings yet
fsd2 (1)
11 pages
Bootstrap Css
No ratings yet
Bootstrap Css
51 pages
Exercise: Getting Started With Bootstrap: Index - HTML
No ratings yet
Exercise: Getting Started With Bootstrap: Index - HTML
3 pages
Bootstrap PDF
No ratings yet
Bootstrap PDF
32 pages
Lecture Bootstrap 17-18-19
No ratings yet
Lecture Bootstrap 17-18-19
67 pages
Chapter 4 Bootstrap
No ratings yet
Chapter 4 Bootstrap
37 pages
Cours Gratuit - Com Id 9973
No ratings yet
Cours Gratuit - Com Id 9973
26 pages
UNIT 5 Bootstrap
No ratings yet
UNIT 5 Bootstrap
10 pages
Bootstrap
No ratings yet
Bootstrap
65 pages
Unit 5(BCA 1)Bootstrap
No ratings yet
Unit 5(BCA 1)Bootstrap
5 pages
Bootstrap - Intro
No ratings yet
Bootstrap - Intro
27 pages
Intro To Bootstrap
No ratings yet
Intro To Bootstrap
27 pages
WT-Unit 4-BootStrap
No ratings yet
WT-Unit 4-BootStrap
86 pages
Introduction To BOOTSTRAP
0% (1)
Introduction To BOOTSTRAP
48 pages
Introduction to Bootstrap (2)
No ratings yet
Introduction to Bootstrap (2)
21 pages
Module 4 Notes
No ratings yet
Module 4 Notes
41 pages
Unit 4 Eit
No ratings yet
Unit 4 Eit
60 pages
Bootstrap
No ratings yet
Bootstrap
30 pages
Bootstrap_ Comprehensive Guide
No ratings yet
Bootstrap_ Comprehensive Guide
8 pages
WEEK 8 Introduction To Bootstrap 1577604054
No ratings yet
WEEK 8 Introduction To Bootstrap 1577604054
90 pages
BS and JS
No ratings yet
BS and JS
157 pages
Unit 1 HTML CSS
No ratings yet
Unit 1 HTML CSS
40 pages
INTRODUCTION-TO-BOOTSRAP
No ratings yet
INTRODUCTION-TO-BOOTSRAP
90 pages
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
No ratings yet
Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad
28 pages
Bootstrap
No ratings yet
Bootstrap
152 pages
Lecture 2
No ratings yet
Lecture 2
9 pages
Ch.1.pptx
No ratings yet
Ch.1.pptx
27 pages
Bootstrap Reference Guide Bootstrap 4 and 3 Cheat Sheets Collection Bootstrap 4 Quick Start
No ratings yet
Bootstrap Reference Guide Bootstrap 4 and 3 Cheat Sheets Collection Bootstrap 4 Quick Start
69 pages
Python
No ratings yet
Python
12 pages
Your First Week With Bootstrap
From Everand
Your First Week With Bootstrap
Syed Fazle Rahman
No ratings yet
Html5: QuickStudy Laminated Reference Guide
From Everand
Html5: QuickStudy Laminated Reference Guide
Robin Nixon
5/5 (1)
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
From Everand
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
Stephen J Link
5/5 (3)
Chapter 3
No ratings yet
Chapter 3
29 pages
8_Graph_SPP
No ratings yet
8_Graph_SPP
23 pages
6_GraphTraversal
No ratings yet
6_GraphTraversal
82 pages
5_heapsort
No ratings yet
5_heapsort
41 pages
7_Graph_MST
No ratings yet
7_Graph_MST
29 pages
4_sorting
No ratings yet
4_sorting
23 pages
java BlockinOueue
No ratings yet
java BlockinOueue
11 pages
GPPAs As of December 31 2022
No ratings yet
GPPAs As of December 31 2022
127 pages
OTo8NNY93b2p DR John Chung x27 S Sat Math 58 Perfect Tips and 1481959794
No ratings yet
OTo8NNY93b2p DR John Chung x27 S Sat Math 58 Perfect Tips and 1481959794
2 pages
DAD Manual
No ratings yet
DAD Manual
8 pages
Long termbehaviorofFRP
No ratings yet
Long termbehaviorofFRP
9 pages
Beti Bachao Beti Padhao
No ratings yet
Beti Bachao Beti Padhao
20 pages
Virtual Activities Corona
No ratings yet
Virtual Activities Corona
3 pages
React - Concept and Implementation
No ratings yet
React - Concept and Implementation
55 pages
The Effectiveness of Jean Piaget's Cognitive Theory On The Cognitive Abilities of Students in Indonesia
No ratings yet
The Effectiveness of Jean Piaget's Cognitive Theory On The Cognitive Abilities of Students in Indonesia
13 pages
Unsafe Act and Unsafe Conditions
No ratings yet
Unsafe Act and Unsafe Conditions
5 pages
Postpartum Care PDF
No ratings yet
Postpartum Care PDF
8 pages
EN Tennant 800 Cat 3.4
No ratings yet
EN Tennant 800 Cat 3.4
94 pages
DS82 Complete
No ratings yet
DS82 Complete
6 pages
Mary Shelley Timeline
No ratings yet
Mary Shelley Timeline
3 pages
Alcina PDF
No ratings yet
Alcina PDF
24 pages
Philippine Political Culture and Governance PDF
No ratings yet
Philippine Political Culture and Governance PDF
38 pages
Composition, My Personal Approach Alan Belkin Music
No ratings yet
Composition, My Personal Approach Alan Belkin Music
2 pages
Preference Assessment
No ratings yet
Preference Assessment
3 pages
The Problem With Woke Capitalism
No ratings yet
The Problem With Woke Capitalism
12 pages
assignment ch 01
No ratings yet
assignment ch 01
3 pages
Competition Theory in Ecology Peter A. Abrams - Download the full set of chapters carefully compiled
100% (1)
Competition Theory in Ecology Peter A. Abrams - Download the full set of chapters carefully compiled
44 pages
08 - Chapter 3 PDF
No ratings yet
08 - Chapter 3 PDF
49 pages
Gaming In Social Locative And Mobile Media Larissa Hjorth Ingrid Richardson Auth download
No ratings yet
Gaming In Social Locative And Mobile Media Larissa Hjorth Ingrid Richardson Auth download
54 pages
Python Basics Code Full Notes
No ratings yet
Python Basics Code Full Notes
53 pages
P. Pascua v. People
100% (1)
P. Pascua v. People
2 pages
Martes, Hulyo 03 2012: Philippine Legal Maxims With Meaning and Legal Cases
No ratings yet
Martes, Hulyo 03 2012: Philippine Legal Maxims With Meaning and Legal Cases
68 pages
The Stranger Reporte Final
No ratings yet
The Stranger Reporte Final
3 pages
Time-Table (OFFLINE) 6th To 10th From 20 Sep.-Converted-1
No ratings yet
Time-Table (OFFLINE) 6th To 10th From 20 Sep.-Converted-1
1 page
Vowlan Guidelines Stellar Awos3.0.5 Ed1 It2
No ratings yet
Vowlan Guidelines Stellar Awos3.0.5 Ed1 It2
171 pages