Bootstrap 5 carousel with multiple sliders - javascript

i'm trying to make bootstrap 5 carousel with multi items. but in my code i could display 3 items at a time. how can make 6 items at a time. I try to change the value in JS code but there it doesn't work. Please correct my following so it could display 6 items at a time and can be vary later. here is complete code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container-fluid text-center my-3">
<div class="row">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/1.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/2.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/3.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>


Just change your bootstrap columns from col-md-4 to col-md-2 so that they can appear 6 columns per row and on your javascript code change minPerSlide to 6
Here is the code for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style type="text/css">
body{
background: #f7f7;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container-fluid text-center my-3">
<div class="row">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/1.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/2.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/3.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-2">
<div class="card">
<div class="card-img">
<img src="img/4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 6
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
});
</script>
</body>
</html>

Related

Bootstrap 5: slider / carousel products

I try create slider / carousel products like this below screen using Bootstrap5:
Here I paste, This is my current code:
<style>
<!-- Temporary -->
.carousel-control-next-icon {
background: black;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Home Section End -->
<div class="container-fluid mt-3">
<div class="row g-4">
<div class="col-xl-6 col-md-4 ratio_medium d-sm-block d-none">
<div class="home-section bg-white div-content" style="height:236px;">
<!-- With Captions -->
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item active">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col-xl-6 ratio_65 d-xl-block d-none">
<div class="home-section bg-white div-content" style="height:236px;">
<!-- With Captions -->
<div id="carouselExampleCaption2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item active">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption2" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption2" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Home Section End -->
But currently this look like bad:
Display only one item, but I need display like this 3 items and half. Also I try add under photo price and product title and image must be responsive. Can anyone little help me correct this code?

If you were to search for this you can find this Codepen and this Codeply.
Combining the two gives you a working example here (Codepen).
The JS clones the content of each .carousel-item, so each .carousel-item will hold the content of its (5) siblings. The CSS changes the transform so the slider moves accordingly.
It's also responsive by only showing one item before the smallest breakpoint, but this can be easily adjusted (CSS only).
Here it is in a snippet, view it in full screen using the "Full page" link:
Note: had to add a bunch of !important in the CSS which is not needed if you load your CSS after Bootstrap's, like in the Codepen.
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 5
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
.carousel-item .col {
padding: 0 5px;
}
#media (max-width: 767px) {
.carousel-inner .carousel-item>div {
display: none !important;
}
.carousel-inner .carousel-item>div:first-child {
display: block !important;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex !important;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(20%) !important;
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-20%) !important;
}
/* half slides CSS */
.carousel-inner:before {
position: absolute;
top: 0;
bottom: 0;
right: 85%;
left: 0;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-inner:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 85%;
content: "";
display: block;
background-color: #fff;
z-index: 2;
}
.carousel-control-prev {
left: 12% !important;
}
.carousel-control-next {
right: 12% !important;
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0) !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container">
<div class="row justify-content-center">
<div id="carouselExampleControls" class="carousel carousel-dark slide">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/CB997E/333333?text=1" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/DDBEA9/333333?text=2" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/FFE8D6/333333?text=3" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/B7B7A4/333333?text=4" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/A5A58D/333333?text=5" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card">
<img src="https://via.placeholder.com/700x500.png/6B705C/eeeeee?text=6" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>

Why cloning carousel-item not working perfectly?

I was trying to make a carousel that has multiple image in 1 slide. The thing is, when the image reached at 4, all 3 other image going to hide forcely. Special credit to this owner Bootstrap Codply, I found this open source here Stackoverflow.
This is the code I mixed up so far:
let items = document.querySelectorAll('.multiple-carousel .items')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
#media (max-width: 767px) {
.multiple-carousel .carousel-inner .carousel-item > div {
display: none;
}
.multiple-carousel .carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.multiple-carousel .carousel-inner .carousel-item.active,
.multiple-carousel .carousel-inner .carousel-item-next,
.multiple-carousel .carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.multiple-carousel .carousel-inner .carousel-item-end.active,
.multiple-carousel .carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.multiple-carousel .carousel-inner .carousel-item-start.active,
.multiple-carousel .carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.multiple-carousel .carousel-inner .carousel-item-end,
.multiple-carousel .carousel-inner .carousel-item-start {
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center my-3 multiple-carousel">
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active items">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e44?text=1" class="img-fluid">
</div>
<div class="card-img-overlay">picture 1</div>
</div>
</div>
</div>
<div class="carousel-item items">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e55?text=2" class="img-fluid">
</div>
<div class="card-img-overlay">picture 2</div>
</div>
</div>
</div>
<div class="carousel-item items">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e77?text=3" class="img-fluid">
</div>
<div class="card-img-overlay">picture 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e66?text=4" class="img-fluid">
</div>
<div class="card-img-overlay">picture 4</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
When I tried to edit the transform it makes more mess, same with const minPerslide where should I edit it?

I think this code works:
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
#media (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* medium and up screens */
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center my-3">
<h2 class="font-weight-light">Bootstrap Multi Slide Carousel</h2>
<div class="row mx-auto my-auto justify-content-center">
<div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/31f?text=1" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 1</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/e66?text=2" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 2</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 3</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400?text=4" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 4</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/aba?text=5" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 5</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="//via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
</div>
<div class="card-img-overlay">Slide 6</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<h5 class="mt-2 fw-light">advances one slide at a time</h5>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
</body>
</html>
Good Luck :)

Content is not sized correctly for the viewport

I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit. It is tell me that the "The viewport size of 373px does not match the window size of 360px". I have validated my HTML and CSS but have not found the specific error. I am not sure if it is in the .style.width of my side nav bars.
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "150px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "150px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0";
}
CSS
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.imgHoover:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.imgHoover {
padding: 10px 16px;
margin: 10px 0;
/*box-shadow: 2px 2px grey;*/
border-bottom: 1px solid #fafafa;
/*border: 5px solid #fab95b;*/
}
#form1 {
padding: 10px;
border: 1px solid #666;
background: #fff;
display: none;
justify-content: center;
}
#form2 {
padding: 10px;
border: 1px solid #666;
background: #fff;
justify-content: center;
}
/* card center */
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
/*box-shadow: 5px 5px grey*/
}
.card:hover {
box-shadow: 4px 8px 12px rgba(0,0,0,0.1);
}
/* side-nav */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #818181;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
html{overflow-x: hidden;}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="images/logo/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#292927">
<meta name="theme-color" content="#292927">
<title>Home-Online Supplements</title>
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #b8dff0;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo/logo.png" alt="" width="30" height="24" class="d-inline-block align-top">
NextGen-Fitness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" id="formButton">Login</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Protein</a></li>
<li><a class="dropdown-item" href="#">Vitamins</a></li>
<li><a class="dropdown-item" href="#">Preworkout</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" tabindex="-1" >Contact Us</a>
</li>
</ul>
<a class="nav-link text-left" href="#" id="userRegistered" style="color:black;" ></a>
<!-- <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<div class="center-block">
<form id="form1">
<input type="text" name="firstName" placeholder="First Name" id="fname">
<br><br>
<input type="text" name="lastName" placeholder="Last Name" id="lname">
<br><br>
<input type="text" name="email" placeholder="Email" id="email">
<br><br>
<button type="button" class="btn btn-dark" id="btnUser" onclick="funcUser()">Login</button>
</form>
</div>
<!--Side Navbar #1 -->
<div id="mySidenav" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/fatburner-logo2.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #2 -->
<div id="mySidenav2" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/preworkout-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #3 -->
<div id="mySidenav3" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>-->
<div class="bg-light">
<div class="container">
<div class="row align-items-center no-gutter">
<div class="col-xl-5 col-lg-6 col-md-12">
<div class="py-5 py-lg-0">
<a class="btn btn-ligth" style="background-color: #fab95b;" href="products.html">Browse all Products</a>
<!--<a class="btn btn-light" style="background-color: #fab95b;">Are you a Store Owner?</a>-->
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/gym-page.jpg" alt class="img-fluid">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-logo2.png" alt="fatBurner" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav()">Fatburner</a>
</div>
<div class="column">
<img src="images/preworkout-logo.png" alt="preWorkout" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav2()">Preworkout</a>
</div>
<div class="column">
<img src="images/protein-logo2.png" alt="protein" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav3()">Protein</a>
</div>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/supplement-frontpage.jpg" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
" Hand-picked ingredients and expertly crafted products,
designed for the modern athletes and trainers."
</p>
</div>
<br>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-frontpage.png" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
Benefits Of Protein Supplementation<br>
1.Fast digesting and more easily absorbed than other protein sources<br>
2.Increased muscle mass, especially when taken post-workout<br>
3.Improved appetite control, and greater feelings of fullness when dieting<br>
</p>
</div>
<div class="footer">
<div class="container">
<div class="row align-items-center no-gutters border-top py-2">
<div class="col-md-6 col-12">
<span> 2021 NextGen. All Rights Reserved</span>
</div>
<div class="col-12 col-md-6">
<nav class="nav justify-content-center justify-content-md-end">
<a class="nav-link active pl-0" href="#!">Privacy</a>
<a class="nav-link" href="#!">Terms</a>
<a class="nav-link" href="#!">Feedback</a>
</nav>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/scripts.js" ></script>
</body>
</html>

You could try docking the devtools at the bottom, or in a different window, as in this answer. Sadly, this is still an issue in 2021.

The carousel Only displays 2 element over the code

I want to see all of my items that are cards total number is 6 but I
ended up by seeing only 2 of them in loop please help me to solve this
problem we see total 3 cads at same time on screen and later on it get
replaced by further cards in row.
i want to see all of my items that are cards total number is 6 but i ended up by seeing only 2 of them in loop please help me to solve this problem we see total 3 cads at same time on screen and later on it get replaced by further cards in row.
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.carnext {}
/* card settings */
.card-body {
text-align: center;
}
.card-title {
margin-top: 20%;
}
.top-image-card {
position: absolute;
top: -20%;
left: 38%;
}
#media screen and (max-width: 1349px) and (min-width: 978px) {
.top-image-card {
position: absolute;
top: -20%;
left: 36%;
}
}
#media screen and (max-width: 991px) and (min-width: 668px) {
.top-image-card {
position: absolute;
top: -20%;
left: 28%;
}
}
.card {
margin-top: 80px;
}
/*th
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400;500;900&display=swap" rel="stylesheet">
<!--Font Owsome-->
<script src="https://kit.fontawesome.com/4575ad6c94.js" crossorigin="anonymous"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--Internal CSS-->
<link rel="stylesheet" href="css/styles.css">
<!--JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--Font Qwsome-->
</head>
<body>
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 5 </h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4 test">
<!--Insidee Here-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 6</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
<div class="top-image-card">
<img src="images/id.png" alt="test-img" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark carnext" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$('#recipeCarousel').carousel({
interval: 1000
})
$('.carousel .carousel-item').each(function() {
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</body>
</html>

ScrollSpy not working Bootstrap 4 and photo gallery not working

I am having trouble with my code. I am trying to enable scroll spy but it isn't working. I am also having trouble getting getting the photo gallery to work properly. Any help would be greatly appreciated. I attempted to add the Scrollspy to highlight the links in the top Navbar as you scroll down the page.
I also am trying to figure out whats wrong with my photo gallery. I want the images to be thumbnails that you can click on that brings up a Modal of the full size image that you can close by clicking out of it.
$('body').scrollspy({target: '#main-nav', offset: 200});
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000
});
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
$(this).ekkoLightbox();
});
.stripe {
background-color: #79EBC6;
height: 100%;
width: 100%;
}
.navbar {
margin: 0;
right: 0;
position: fixed;
z-index: 999;
background-color: #58E4B3;
width: 100%;
color: white;
}
.navbar a {
color: white;
background-color: #58E4B3;
}
.nav li {
float:left;
}
.centered {
text-align: center;
}
.text {
padding: 1rem;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
text-align: left;
flex: 0 1 32%;
}
.cards {
margin-top: 5em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 15rem;
}
.collapse {
margin-left: 15px;
}
.jumbotron {
width: 50%;
margin: auto;
background-color: #79EBC6;
}
.carousel {
height: 25%;
width: 50%;
margin: auto;
padding: 2em;
}
.tab-pane {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-color: white;
}
.display-4 {
text-align: center;
}
.fa-check {
font-size: 1.25rem;
padding: 1.5rem;
}
.d-flex {
text-align: center;
margin: auto;
}
.section {
padding: 3rem 0;
}
.form-row {
text-align: left;
}
.modal-body {
text-align: left;
}
.btn-button1 {
width: 100%;
background-color: #58E4B3;
}
.card-body {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
background-color: white;
text-align: left;
}
.card-body .btn-success {
margin-left: .5em;
}
body {
font-family: "Asap", sans-serif;
margin:10px;
font-size:16px;
}
#demo {
height:100%;
position:relative;
overflow:hidden;
}
.green{
background-color:#6fb936;
}
.thumb{
margin-bottom: 30px;
}
.page-top{
margin-top:85px;
}
img.zoom {
width: 100%;
height: 200px;
border-radius:5px;
object-fit:cover;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}
.transition {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
<!DOCTYPE html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<title>Bootstrap 4.2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Your Custom CSS -->
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Features</title>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top id=main-nav">
<div class="container">
Features
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link" href="#cards">Cards<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#carosel">Carosel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tabs">Tabs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#images">Images</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#forms">Forms</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<body data-spy="scroll" data-target="#main-nav">
<section id="images">
<a name="images"></a>
<h2 class="mb-5 text-center">Photo Gallery</h2>
<div class="container">
<div class="row">
<div class="row text-center text-lg-left align-items-end">
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 thumb">
<a href="images/150.png" data-toggle="lightbox" data-title="Caption">
<img src="images/150.png" class="zoom img-fluid " alt="">
<img class="img-fluid img-thumbnail" src="images/150.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="images">
</section>
<a name="forms"></a>
<section id="forms" class="stripe">
<div class="container">
<h2 class="mb-5 text-center">Forms</h2>
<div class="row">
<div class="col-lg-8">
<div class="col mb-2">
<div class="card-body">
<h5 class="card-title">Last Name, First Name</h5>
<form>
<div class="form-row">
<div class="form-group col-lg-3 col-md-6">
<label for="fName" class="col-form-label">First Name</label>
<input class="form-control form-control-sm" id= "fName" placeholder="First Name">
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="lName" class="col-form-label">Last Name</label>
<input class="form-control form-control-sm" id= "lName" placeholder="Last Name">
</div>
<div class="form-group col">
<label for="mi" class="col-form-label">MI</label>
<input class="form-control form-control-sm" id= "mi" placeholder="MI">
</div>
<div class="form-group col">
<label for="bday" class="col-form-label">Birthday</label>
<input class="form-control" type="date" value="yyyy-mm-dd" id="bday" placeholder="Birthday">
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-4 col-md-6">
<label for="email" class="col-form-label">Email</label>
<input class="form-control form-control-sm" id= "email" placeholder="Email">
</div>
<div class="form-group col-lg-4 col-md-6">
<label for="cell" class="col-form-label">Cell Phone</label>
<input class="form-control form-control-sm" id= "cell" placeholder="Cell Phone">
</div>
<div class="form-group col-lg-4 col-md-6">
<label for="work" class="col-form-label">Work Phone</label>
<input class="form-control form-control-sm" id= "work" placeholder="Work Phone">
</div>
<div class="form-row">
<div class="form-group col-lg-6 col-md-6">
<label for="city" class="col-form-label">City</label>
<input class="form-control form-control-sm" id= "city" placeholder="City">
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="state" class="col-form-label">State</label>
<input class="form-control form-control-sm" id= "state" placeholder="State">
</div>
<div class="form-group col-lg-3 col-md-6">
<label for="zip" class="col-form-label">Zip</label>
<input class="form-control form-control-sm" id= "zip" placeholder="Zipcode">
</div>
<div class="form-row">
<button type="button" class="btn btn-outline-success">Edit</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="stripe">
<div class="container">
<div class="col text-center py-4">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
Contact Us
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Contact Us</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control"></textarea>
</div>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-button1" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://cdnjs.com/libraries/ekko-lightbox"></script>
<script type="text/javascript" src="plugin/jrate/jquery/jRating.jquery.js"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
</body>
</html>
I removed a lot of the body for space purposes. Any help would be greatly appreciated.

In your HTML code, the navbar element opening tag has an issue:
<nav class="navbar navbar-expand-sm navbar-dark fixed-top id=main-nav">
That tag should be replaced with this:
<nav class="navbar navbar-expand-sm navbar-dark fixed-top" id="main-nav">
I think your code didn't work because you did not separate your class attribute from your id attribute.

Categories

Resources