WEB DEVELOPMENT

LESSON ELEVEN

By Oluwadamilare Idowu Joshua

 Table of Content
• Bootstrap Navbar

• Bootstrap Carousel

• Bootstrap Footer
 Bootstrap Navigation Bar
With Bootstrap, a navigation bar can extend or collapse, depending on the
screen size.

A standard navigation bar is created with the .navbar class, followed by a

responsive collapsing class: .navbar-expand-xxl|xl|lg|md|sm (stacks
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:

The .navbar-brand class is used to highlight the brand/logo/project name

of your page:
 Bootstrap Navigation Bar Example
<nav class="navbar navbar-expand-sm <a class="nav-link" href="#">Link</a>
bg-dark navbar-dark"> </li>
<div class="container-fluid"> <li class="nav-item">
<a class="navbar-brand" <a class="nav-link"
href="#">Logo</a> href="#">Link</a>
<button class="navbar-toggler" </li>
type="button" data-bs-toggle="collapse" </ul>
data-bs-target="#collapsibleNavbar"> </div>
<span </div>
class="navbar-toggler-icon"></span> </nav>
</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">
Bootstrap Carousel

The Bootstrap Carousel is a

component in the Bootstrap
framework used to create a
slideshow of images or content
on a web page. It allows you to
display multiple items in a
rotating manner, which can be
navigated manually by the user
or automatically at specified
intervals.
 Code Sample for the Carousel in the Previous Slide
<!-- 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>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
 Code Sample for the Carousel in the Previous Slide
<div class="carousel-item"> <span
<img src="chicago.jpg" alt="Chicago" class="carousel-control-prev-icon"></sp
class="d-block" style="width:100%"> an>
<div class="carousel-caption"> </button>
<h3>Chicago</h3> <button class="carousel-control-next"
<p>Thank you, Chicago!</p> type="button" data-bs-target="#demo"
</div> data-bs-slide="next">
</div> <span
<div class="carousel-item"> class="carousel-control-next-icon"></sp
<img src="ny.jpg" alt="New York" an>
class="d-block" style="width:100%"> </button>
<div class="carousel-caption"> </div>
<h3>New York</h3>
<p>We love the Big Apple!</p> <div class="container-fluid mt-3">
</div> <h3>Carousel Example</h3>
</div> <p>The following example shows how to
</div> create a basic carousel with indicators
<!-- Left and right controls/icons --> and controls.</p>
<button class="carousel-control-prev" </div>
type="button" data-bs-target="#demo"
data-bs-slide="prev">
A description of what each class from the
example above do:
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
A description of what each class from the
example above do:
Class Description

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

icon button

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

icon 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
Bootstrap Footer
The website footer an element placed at the very bottom of a web page.
The <footer> element is a structural element used to identify the footer of a
page, document, article, or section. A <footer> typically contains copyright and
authorship information or navigational elements pertaining to the contents of
the parent element.
Designing the footer of a website using Bootstrap is an efficient way to ensure a
responsive and visually appealing layout. Bootstrap offers a range of utility
classes and components that simplify the creation of footers with a professional
look and feel.
Bootstrap Icons allows you to add icons to various items in your footer or other
parts of your website, giving it a more appealing view. To use Bootstrap icons,
add this link tag to your head tag “<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.3/font/boot
strap-icons.min.css" rel="stylesheet">”
 Bootstrap Footer Example

<footer class="bg-dark text-light pt-5">

<div class="container">
<div class="row">
<!-- Contact Information -->
<div class="col-md-4 mb-4">
<h5>Contact Us</h5>
<ul class="list-unstyled">
<li><i class="bi bi-envelope"></i> Email: [email protected]</li>
<li><i class="bi bi-telephone"></i> Phone: +123 456 7890</li>
<li><i class="bi bi-geo-alt"></i> Address: 123 Street Name,
City</li>
 Bootstrap Footer Example
</ul>
</div> <h5>Quick Links</h5>
<!-- Social Media Links --> <ul class="list-unstyled">
<div class="col-md-4 mb-4"> <li><a href="#"
<h5>Follow Us</h5> class="link-light text-decoration-none">About
<ul Us</a></li>
class="list-unstyled"> <li><a href="#"
<li><a href="#" class="link-light
class="link-light text-decoration-none"><i text-decoration-none">Services</a></li>
class="bi bi-facebook"></i> <li><a href="#"
Facebook</a></li> class="link-light text-decoration-none">
<li><a href="#" Contact</a></li>
class="link-light text-decoration-none"><i </ul>
class="bi bi-twitter"></i> Twitter</a></li> </div>
<li><a href="#" </div>
class="link-light text-decoration-none"><i </div>
class="bi bi-instagram"></i> <div class="bg-secondary text-center
Instagram</a></li> py-3">
</ul> <small>&copy; 2024 Your Company.
</div> All rights reserved.</small>
<!-- Quick Links --> </div>
<div class="col-md-4 mb-4"> </footer>
FINAL PROJECT ASSIGNMENT
FOR HTML, CSS AND BOOTSTRAP
Create a Business Website using, HTML, CSS
and Bootstrap.
Take note of the following when Designing
the Website

● The code must be clean and readable

● The website must be responsive in all devices
● You are not allowed to clone the code from an existing source
code
● It must be a multiple page website with at least four webpages,
such as homepage, about, services, contact, etc