Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
23 views25 pages

ICT245 Web Programming Bootstrap Lecture1 2

The document outlines the ICT245 Web Programming course for the second semester of 2023/2024, focusing on Bootstrap, JavaScript, and PHP. It provides an introduction to Bootstrap, including its setup, components, and usage in web development. The lecture objectives include understanding the Bootstrap framework, setting it up, and designing web pages using Bootstrap 5 components.

Uploaded by

ampofohemmanuel72
Copyright
© © All Rights Reserved
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
23 views25 pages

ICT245 Web Programming Bootstrap Lecture1 2

The document outlines the ICT245 Web Programming course for the second semester of 2023/2024, focusing on Bootstrap, JavaScript, and PHP. It provides an introduction to Bootstrap, including its setup, components, and usage in web development. The lecture objectives include understanding the Bootstrap framework, setting it up, and designing web pages using Bootstrap 5 components.

Uploaded by

ampofohemmanuel72
Copyright
© © All Rights Reserved
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/ 25

04-Jul-24

ICT245; Web Programming-- 2024


 Computer Lab 2, Library Block,
AAMUSTSED

 May 27 – August 16, 2024 Weekly
 Second Semester 2023/2024

 Maxwell Dorgbefu Jnr.


Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 1

ICT245; Web Programming - Course Themes

Theme 1
Bootstrap Theme 3
Theme 2 PHP
JavaScript

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 2

1
04-Jul-24

Today’s Lecture

1. Overview of Bootstrap
2. Setting up Bootstrap
3. Bootstrap Containers,
Introduction 4. Bootstrap Grid System,
to Bootstrap 5. Bootstrap Typography
6. Bootstrap Tables,
7. Bootstrap Images
8. Bootstrap Alerts

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 3

Lecture Objectives
By the end of the lecture, the student will be able to
1. Explain the Bootstrap framework and its
importance in web development
2. Setup bootstrap for web development
3. Design a Bootstrap 5 web page with key Bootstrap
components and preview in a web browser

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 4

2
04-Jul-24

Introduction to Bootstrap
 Bootstrap is a free mobile-first, and responsive front-end web
development framework based on HTML, CSS and JavaScript.
 Bootstrap was developed by Mark Otto, and Jacob Thornton
then of Twitter now X in the mid-2010, and was released as an
open-source product in August 2011 on GitHub.
 The current version released in 2021 is Bootstrap 5.
 The main differences between Bootstrap 5 and Bootstrap 3 & 4,
is that Bootstrap 5 has switched to vanilla JavaScript instead of
jQuery in the earlier versions.

©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology 5


Thursday, July 4, 2024 Education

Getting Started with Bootstrap


 To get started with Bootstrap, visit https://getbootstrap.com
 There are two ways of setting up Bootstrap as shown in the figure 1

 <!-- Latest compiled and minified CSS -->


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleshee
t">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scrip
t>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 6

3
04-Jul-24

Bootstrap – Getting Started Step-by-Step


1. Choose, download, and install your favorite text editor or IDE such as
Visual Studio Code, SublimeText, BBedit, Text Wrangler, Vim etc.
2. Head to https://getbootstrap.com/ , choose the appropriate version
of Bootstrap (in our case Bootstrap 5), copy the starter template
code.
3. Launch your installed text editor or IDE and paste the starter
template code.
4. Save your file with .html extension, and preview in a web browser.
5. Add more Bootstrap components and have fun coding.

 Happy coding with Bootstrap 5 !


Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 7

Bootstrap 5 Starter Template


 <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid"> <!–- We are using the .container-fluid class, it could also be .container
class -->
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the
viewport.</p>
</div>
</body>
</html>
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 8

4
04-Jul-24

Bootstrap 5 Containers
 Bootstrap requires a containing element to wrap the entire contents
of your web page.
 Containers are used to wrap the content inside of them, and there are
two container classes available in Bootstrap 5, these are:

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


2. The .container-fluid class provides a full width container, spanning
the entire width of the viewport

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 9

Responsive Containers
 Use the .container-sm|md|lg|xl|xxl classes to determine when the
container should be responsive.
 The max-width of the container will change on different screen
sizes/viewports.

Source: https://www.w3schools.com/bootstrap5/bootstrap_containers.html
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 10

5
04-Jul-24

Spacing Utilities for Containers


 Containers in Bootstrap have left and right paddings, and no
top and bottom paddings by default.
 Spacing utilities such as extra padding, margins, borders and
color are often used to improve their appearance.
 For instance, .pt-5 means “add large top padding”.

 <div class="container pt-5"></div>


 <div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 11

Responsive Containers – Code Samples


 <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleshee
t">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scrip
t>
</head>
<body>
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
 </body>
</html>
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 12

6
04-Jul-24

Bootstrap 5 Grid System


 Bootstrap's grid system is built with flexbox and allows up
to 12 columns across the page.
 As shown in the figure, if you are not using all 12 columns
individually, you can group the columns together to create
wider columns.

Source: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 13

Grid System Classes


 There are six (6) classes in Bootstrap 5 grid system:
1. .col- (extra small devices - screen width less than 576px)
2. .col-sm- (small devices - screen width equal to or greater than 576px)
3. .col-md- (medium devices - screen width equal to or greater than 768px)
4. .col-lg- (large devices - screen width equal to or greater than 992px)
5. .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
6. .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
 These classes can be combined to create more dynamic and flexible
layouts.

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 14

7
04-Jul-24

Grid System Classes Usage


 <!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>

<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 15

Grid System – Code Samples


 <!-- 4 Equal Columns-->
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
 <!-- 2 Unequal Columns -->
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 16

8
04-Jul-24

Classes for Text and Background Colors


 Bootstrap 5 has some contextual classes that can be used to provide
"meaning through colors".
 The classes for text colors are:
 .text-muted, .text-primary, .text-success, .text-info, .text-warning,
.text-danger, .text-secondary, .text-white, .text-dark, .text-body
(default body color/often black) and .text-light
 The classes for background colors are:
 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light.

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 17

Contextual Backgrounds – Sample Codes

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 18

9
04-Jul-24

Bootstrap 5 Tables – Core Classes


 By using the .table Bootstrap styles a table with a light padding and
horizontal dividers.
 The .table class is the base class and you can add other classes for
further styling such as the following:
 The .table-striped class adds zebra-stripes to a table.
 The .table-bordered class adds borders on all sides of the table and
cells.
 The .table-hover class adds a hover effect (grey background color) on
table rows.
 The .table-dark class adds a black background to the table.
 The .table-borderless class removes borders from the table

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 19

Bootstrap Contextual Table Classes


Class Description
.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action

.table-danger Red: Indicates a dangerous or potentially negative action

.table-info Light blue: Indicates a neutral informative change or action

.table-warning Orange: Indicates a warning that might need attention

.table-active Grey: Applies the hover color to the table row or table cell

.table-secondary Grey: Indicates a slightly less important action


.table-light Light grey table or table row background
.table-dark Dark grey table or table row background
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 20

10
04-Jul-24

 The .table-responsive class adds a scrollbar to the table


when needed (when it is too big horizontally).
 <div class="table-responsive">
<table class="table">
... Class Screen width
</table> .table-responsive-sm < 576px
</div> .table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 21

Bootstrap 5 – Image Shapes

 <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">


 <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
 <img src="cinqueterre.jpg" class=“img-thumbnail" alt="Cinque Terre">

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 22

11
04-Jul-24

Aligning Images in Bootstrap 5


 Align images to the left with the .float-start class or to the right with
.float-end.
 For aligning images to the center, we use utility classes .mx-auto
(margin:auto) and .d-block (display:block).
 <img src="parrot.jpg" class="float-start">
<img src=“nature.jpg" class="float-end">
 <img src=“butterfly.jpg" class=“mx-auto d-block">

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 23

End of Lecture 1

Don’t miss next week’s lecture


on
Alerts, Cards, Collapse, Nav,
NavBars, Carousels, Modals,
Toasts, and Flex in Bootstrap 5

©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology 24


Thursday, July 4, 2024 Education

12
04-Jul-24

Today’s Lecture

1. Bootstrap Alerts
2. Bootstrap Cards
Introduction 3. Bootstrap Collapse
to Bootstrap 4. Bootstrap Nav, and
NavBars
5. Bootstrap Carousels

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 25

Bootstrap 5 Alerts
 Alerts are used to display messages that demand users’ attention as a
result of initial user actions.
 Bootstrap 5 provides an easy way to create predefined alert messages.
 Alerts are created with the .alert as the base class, followed by one of
the contextual classes.
 Thus .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-
primary, .alert-secondary, .alert-light or .alert-dark.

 <div class="alert alert-success">


<strong>Success!</strong> Indicates a successful or positive action.
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 26

13
04-Jul-24

Bootstrap Alert Links


 Alerts can be used on links by adding the .alert-link class to
any links inside the alert box to create "matching colored
links“.

 <div class="alert alert-success">


<strong>Success!</strong> You
should <a href="#" class="alert-link">read this
message</a>.
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 27

Closing Alerts
 To close the alert messages, add a .alert-dismissible class to the
alert container.
 Then add class="btn-close" and data-bs-dismiss="alert" to a link or
a button element (when you click on this the alert box will
disappear).

 <div class="alert alert-success alert-dismissible">


<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or
positive action.
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 28

14
04-Jul-24

Bootstrap 5 Cards
 A card in Bootstrap 5 is a bordered box with some padding around its
content.
 Cards also include options for headers, footers, content, colors etc.
 A basic card is created with the .card class, and content inside the card
has a .card-body class.
 The .card-header, and .card-footer classes add a heading, and a footer
respectively to the card.
 <div class="card">
<div class="card-header">Card Header goes here</div>
<div class="card-body">Card Content goes here</div>
<div class="card-footer">This is the Footer of the Card</div>
</div>
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 29

Cards with Contextual Classes


 To style your cards with contextual background colors, we wrap the
card body in a <div> element with .card as a base class followed by a
specific contextual background class such as .bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark
and .bg-light

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 30

15
04-Jul-24

Card Titles, Text and Links


 Within the .card-body class, you can make use of the .card-title, .card-text,
and .card-link classes for a more aesthetically pleasing card designs.
 The .card-title class adds card titles to any heading element.
 The .card-text class removes bottom margins for a <p> element if it is the
last child (or the only one) inside the .card-body.
 The .card-link class adds a blue color and a hover effect to any link within
the card-body.
 <div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Actual text of the Card.</p>
<a href="#" class="card-link">Card link here</a>
<a href="#" class="card-link">Another Card link</a>
</div>
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 31

Card Images
 To add an image to a card, use .card-img-top or .card-img-bottom classes in
the <img> tag to place the image at the top or at the bottom of the card
respectively.
 Add the image outside of the .card-body to span the entire width.
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
 alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 32

16
04-Jul-24

Bootstrap 5 - Dropdowns
 Head to w3schools for Dropdowns

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 33

Bootstrap Collapse
 Collapsibles are useful when you want to hide and show large amount
of content on a web page.
 The collapse JavaScript plugin is used to show and hide content.
 Buttons or anchors are used as triggers that are mapped to specific
elements you toggle.
 Collapsing an element will animate the height from its current value
to 0.
 Given how CSS handles animations, you cannot use padding on a
.collapse element. Instead, use the class as an independent wrapping
element.

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 34

17
04-Jul-24

Bootstrap Collapse – Sample Code


<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible Button</button>
<div id="demo" class="collapse">
Sample content to display when the Collapsible Button above is clicked
</div>

 The .collapse class indicates a collapsible element (a <div> in our example); this is the content
that will be shown or hidden with a click of a button.

 To control (show/hide) the collapsible content, add the data-bs-toggle="collapse" attribute to


an <a> or a <button> element. Then add the attribute to connect the button with the
collapsible content (<data-bs-target="#id" div id="demo">).

 Note: For <a> elements, you can use the href attribute instead of the data-bs-target attribute:

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 35

Bootstrap Collapse – Sample Codes


<a href="#demo" data-bs-toggle="collapse">Collapsible Link</a>
<div id="demo" class="collapse">
Content to display when the Collapsible Link is clicked</div>

 By default, the content under collapsible object is hidden, you can add
the .show class to show the content by default.

Take note of the show class


<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 36

18
04-Jul-24

Bootstrap Nav
 Nav short for navigation is used for creating professional looking menu items on a
web page.
 Add the .nav class to a <ul> element, followed by .nav-item for each <li> and add
the .nav-link class to their links for a simple horizontal menu.
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled Link</a>
</li>
</ul>
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 37

Aligning Nav
 By default the menu items of a Nav are left-aligned.
 You may want to align the menu items to the right or have them
centered.
 Use the .justify-content-center class to center the nav, and the
.justify-content-end class to right-align the nav.

<!-- Centered nav -->


<ul class="nav justify-content-center">

<!-- Right-aligned nav -->


<ul class="nav justify-content-end">

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 38

19
04-Jul-24

Vertical Nav, Tabs and Pills


 To create a vertical nav, follow the .nav class of the <ul> element with
the .flex-column class as shown the code snippet below.
<ul class="nav flex-column">

Turn the nav menu into navigation tabs with the .nav-tabs class,
and add the .active class to the active/current link.
<ul class="nav nav-tabs">

Use the .nav-pills class to turn the nav into pills.


<ul class="nav nav-pills">

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 39

Bootstrap NavBars
 NavBar short for navigation bar is a navigation header that is placed
at the top of a web page.

 To make a standard navigation bar, use the .navbar class, followed by


a responsive collapsing class such as .navbar-expand-xxl|xl|lg|md|sm
to stack the navbar vertically on xxlarge, extra large, large, medium or
small screens.
 To add links inside the navbar, use either an <ul> element (or a
<div>) with class="navbar-nav". Then add <li> elements with a .nav-
item class followed by an <a> element with a .nav-link class.

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 40

20
04-Jul-24

Bootstrap NavBar – Sample Code


 <!-- A dark horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 41

NavBar Alignment and Coloring


 Use the .justify-content-center class to center the navigation bar.
 <nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
 Use any of the background contextual classes to change the background color
of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger,
.bg-secondary, .bg-dark and .bg-light).
 Tip: Add a white text color to all links in the navbar with the .navbar-dark
class, or use the .navbar-light class to add a black text color.
 The .navbar-brand class is used to add the brand/logo/project name of
your web page.

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 42

21
04-Jul-24

NavBar with Logo


 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 43

Bootstrap 5 - Carousel
 A carousel is a slideshow for cycling through elements especially
images on a web page.
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

<!-- Indicators/dots -->


<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to
="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 44

22
04-Jul-24

Bootstrap 5 – Carousel Images


 <!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src=“parrot.jpg" alt=“Parrot" class="d-block w-100">
</div>
<div class="carousel-item">
<img src=“butterfly.jpg" alt=“Butterfly" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="nature.jpg" alt=“Nature" class="d-block w-100">
</div>
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 45

Bootstrap 5 – Carousel Controls


<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-
target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div> <!-- Closing tag of the first div that wraps the entire carousel-->

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 46

23
04-Jul-24

Description of the Classes for Carousels


Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which
indicates how many slides there are in the carousel, and which slide the user are currently viewing)

.carousel-inner Adds slides to the carousel


.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go back between the slides

.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go forward between the slides

.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" button

.carousel-control-next-icon Used together with .carousel-control-next to create a "next" button

.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this
class if you do not want this effect
Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 47

Adding Captions to Carousel Items


 To give a brief description of each carousel item, put the captions
inside <div class="carousel-caption"> element within each <div
class="carousel-item"> .
<div class="carousel-item">
<img src=“parrot.jpg" alt=“Parrot">
<div class="carousel-caption">
<h3>Parrot</h3>
<p>A beautiful talking bird!</p>
</div>
</div>

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 48

24
04-Jul-24

Bootstrap 5 -- Modal
 The Modal component of Bootstrap 5 is a dialog box/popup window
that is displayed on top of the current page.
 Head to w3schools.com for code implementations.

Thursday, July 4, 2024 ©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology Education 49

End of Lecture 2

Don’t miss next week’s lecture


on
Forms, Pagination, Badges, and
Progress Bar in Bootstrap 5

©2024 - Maxwell Dorgbefu Jnr. ~~ Department of Information Technology 50


Thursday, July 4, 2024 Education

25

You might also like