We Keep Coding

Remove list-group-item-action click

I want to keep the list-group-item-action hover effect where it changes the background but I want to remove the click effect that makes it active. How would I do this?
I removed the href="#" from the
If I remove list-group-item-action, the hover effect is removed
I don't really want to specify a hover color in css because the bootstrap list groups automatically change the hover colors in light/dark mode. Also idk what the exact light/dark mode hover colors are lol
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});
.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}
<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">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<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>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>

I want to keep the list-group-item-action hover effect where it
changes the background but I want to remove the click effect that
makes it active.
If you want :
keep the hover effect
make the click effect same as hover effect
Just add following CSS :
.list-group-item:active {
color: var(--bs-list-group-action-hover-color) !important;
background-color: var(--bs-list-group-action-hover-bg) !important;
}
I don't really want to specify a hover color in css because the
bootstrap list groups automatically change the hover colors in
light/dark mode.
If you want :
remove hover and click effect completely
Just add following CSS :
.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
color: unset !important;
background-color: unset !important;
}
For how to find out the CSS specified in those :active, :focus, :hover selectors, by taking Chrome as example, open the browser debugger, select the element that you would like to dig out the CSS, from screenshot below, you can see I highlighted two red boxes.
Click on the :hov option and the available selectors will listed out, just tick/untick them to see the effect.
Hope it helps !
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});
.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}
.list-group-item-action:active {
color: var(--bs-list-group-action-hover-color) !important;
background-color: var(--bs-list-group-action-hover-bg) !important;
}
/* remove hover & click effect completely */
/*
.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
color: unset !important;
background-color: unset !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">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<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>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>

Simple override the :focus and :active css--
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.log(selected_item);
console.log(`previous image: ${previous_image.id}`);
console.log(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});
.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
}
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !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">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<section class="p-5">
<div class="container">
<h2 class="text-center display-5 fw-bold">test</h2>
<p class="lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class="row g-4 justify-content-between">
<div class="col-md">
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id="test_list_item_1">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_2">
<span class="badge">
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" style="height: 50px; width: 50px;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id="test_list_item_3">
<span class="badge">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="rounded-0" style="height: 75px; width: 75px; background-color: yellow;">
</span>
<div class="ms-2 me-auto">
<div class="d-flex w-100">
<h5 class="mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class="mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class="col-md">
<div class="image_container">
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class="test_image d-none d-md-block active" id="test_image_1" style="height: 500px; width: 700px;" />
<img src="https://www.jbcandcompany.com/images/S%20Orange.png" class="test_image d-none" id="test_image_2" style="height: 500px; width: 700px;" />
<img src="https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class="test_image d-none" id="test_image_3" style="height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<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>
<script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>

Bootstrap modals won't launch

The modal doesn't display any of my images. I tried changing the pictures and code. However I'm new to this, and I have no clue. Could it be the javascript or the code itself? I've tried atom and Dreamweaver and I get the same problem.
$(function() {
$('#site-modal').on('show.bs.modal',function() {
$(this)
.find('.modal content img')
.attr('src',$(event.relatedTarget).data('highres') )
});
});
There is a broken image link of dome sort.
$(function() {
$('#site-modal').on('show.bs.modal', function() {
$(this)
.find('.modal content img')
.attr('src', $(event.relatedTarget).data('highres'))
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- css style sheet-->
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="larry 2.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello, world!</title>
</head>
<body>
<header id="page-hero" class="site-header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#page-hero">
<i class="fas fa-ankh"></i> LarryJ Designs</a>
</div>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="#myTogglerNav" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="collapse navbar-collapse align" id="myTogglerNav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="about3.html">About </a>
<a class="nav-item nav-link" href="portfolio2.html">Portfolio</a>
<a class="nav-item nav-link" href="">Contact</a>
</div>
</section>
</nav>
<section class="layout-hero d-flex align-items-center text-light text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-sm-10 col-md-8">
<h3 class="page-section-title">Larry J designs</h3>
<p>Conformity is the jailer of freedom and the enemy of growth.” ― John F. Kennedy</p>
</div>
</div>
</div>
</section>
</header>
<section class="layout-card container-fluid">
<div class="row justify-content-center">
<div class="col-8 col-sm-12 col-lg-10">
<div class="card-deck">
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="business_card.png"> <img class="layout-image img-fluid" src="business_card.png" alt="photo sample"></a>
<div class="card-body">
<h4 class=" layout-title card-title">Business Cards</h4>
<p class="card-text layout-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>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="stocklayouts-graphic-design-templates-2.jpg"><img src="stocklayouts-graphic-design-templates-2.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-text">Flyers</h4>
<p class="card-text layout-text"></p>
</div>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="website stock.jpg"> <img src="website stock.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-title">Webpages</h4>
<p class="card-text layout-text"> As of this moment we build small webpages, such as porfolios, small business, blogs etc. </p>
</div>
</section>
</div>
</div>
</div>
</section>
<footer class="site-footer text-light d-flex justify-content-center">
<section class="layout-social py-5">
<a class="text-light px-2" href="https://twitter.com/planetoftheweb">
<i class=" layout-icon fab fa-twitter"></i>
</a>
<a class="text-light px-2" href="https://facebook.com/viewsource">
<i class=" layout-icon fab fa-facebook"></i>
</a>
<a class="text-light px-2" href="https://linkedin.com/in/planetoftheweb">
<i class=" layout-icon fab fa-linkedin"></i>
</a>
<a class="text-light px-2" href="https://github.com/planetoftheweb">
<i class=" layout-icon fab fa-github"></i>
</a>
<a class="text-light px-2" href="https://plus.google.com/+RayVillalobos0">
<i class=" layout-icon fab fa-google-plus"></i>
</a>
<a class="text-light px-2" href="https://dribbble.com/planetoftheweb">
<i class=" layout-icon fab fa-dribbble"></i>
</a>
<a class="text-light px-2" href="https://www.flickr.com/photos/planetoftheweb/sets/72157602932636630/">
<i class=" layout-icon fab fa-flickr"></i>
</a>
<a class="text-light px-2" href="https://www.youtube.com/user/planetoftheweb">
<i class=" layout-icon fab fa-youtube"></i>
</a>
<div class="copyright py-4 text-center text-white">
<div class="container">
<small>Copyright © Larry J designs 2019</small>
</div>
</div>
</section>
</footer>
<article id="site-modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img data-dismiss="modal" class="img-fluid" src="#" alt="Modal Photo">
</div>
</div>
</article>
<!-- Optional JavaScript -->
<!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> -->
<script src="js/bootstrap-4.2.1.js"></script>
<script src="larryj.js"></script>
</body>
</html>

this element does not exsist find('.modal content img')
You have ".modal-content img" this one

Can you try something similar to the code showed below:
$(function(){
$('#site-modal').on('show.bs.modal',function(event) {
var url = $(event.relatedTarget).children().attr('src')
$('#site-modal')
.find('img')
.attr('src',url )
});
});
Image display in a modal

I've replicated the example and it works: https://jsfiddle.net/ayj0obwh/
I think your problem is that you are loading a CSS library outside of <head> and even outside of <html> tags. Try removing it, because you are already loading Bootstrap CSS on <head> tag.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

This my code again . Id it the CSS or is that okay . it's been weeks working with this problem .
$(function() {
$('#site-modal').on('show.bs.modal', function() {
$(this)
.find('.modal content img')
.attr('src', $(event.relatedTarget).data('highres'))
});
});
#import url('https://fonts.googleapis.com/css?family=Merriweather:300|Source+Sans+Pro:200,400,600');
:root {
/*
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
/* Override Variables */
--font-family-sans-serif: 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
--gray-dark: #404040;}
/* Page Variables */
--font-family-serif: Merriweather, serif;
--color-text: var(--gray-dark);
--font-family-text: var(--font-family-serif);
--secondary: #6c757d;
}
family-sans {
font-family: var(--font-family-sans-serif);
}
body {
font-family: var(--font-family-text);
color: var(--color-text);
font-weight: 200;
background-image:url(jonathan-bowers-531776-unsplash.jpg);
background-repeat: no-repeat;
background-size: auto;
background-position:top;
}
.site-header {
background: url("");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
;
}
.site-header .layout-hero {
min-height: 20vh;
}
.site-header .page-section-title .header-title {
font-size: 3em;
font-family: var(--font-family-sans-serif);
font-weight: 200;
}
.site-header .page-section-text.page {
font-size: 1.2em;
}
.layout-social .layout-icon {
font-size: 2em;
}
img {
max-width: 75%;
height: auto;
display:block;
margin-left:auto;
margin-right:auto;
}
h2,h5{text-align:center;
text-transform:uppercase;
}
h1{font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";text-transform: capitalize;}
h3{color:red;}
#media screen and (max-width: 768px) {
.site-header .navbar-collapse {
background-color: rgba(0, 0, 0, 0.9);
padding: 10px;
}
}
.site-header .nav-link {
position: relative;
padding-bottom: 0;
margin-bottom: 2px;
}
.site-header .nav-link:before {
content: '';
position: absolute;
width: 100%;
max-width: 100px;
height: 2px;
left: 0;
bottom: 0;
background-color: var(--red);
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-out;
}
.site-header .nav-link:hover:before {
visibility: visible;
left: 0;
transform: scaleX(1);}
.animated {
visibility: visible !important;
}
h1{text-transform:uppercase;}
<!doctype html>
<html lang="en"><head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- css style sheet-->
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="larry 2.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello, world!</title>
</head>
<body>
<header id="page-hero" class="site-header">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#page-hero">
<i class="fas fa-ankh"></i> LarryJ Designs</a>
</div>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="#myTogglerNav" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section class="collapse navbar-collapse align" id="myTogglerNav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="about3.html">About </a>
<a class="nav-item nav-link" href="portfolio2.html">Portfolio</a>
<a class="nav-item nav-link" href="">Contact</a>
</div>
</section>
</nav>
<section class="layout-hero d-flex align-items-center text-light text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-sm-10 col-md-8">
<h3 class="page-section-title">Larry J designs</h3>
<p>Conformity is the jailer of freedom and the enemy of growth.” ― John F. Kennedy</p>
</div>
</div>
</div>
</section>
</header>
<section class="layout-card container-fluid">
<div class="row justify-content-center">
<div class="col-8 col-sm-12 col-lg-10">
<div class="card-deck">
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="business_card.png"> <img class="layout-image img-fluid" src="business_card.png" alt="photo sample"></a>
<div class="card-body">
<h4 class=" layout-title card-title">Business Cards</h4>
<p class="card-text layout-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>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="stocklayouts-graphic-design-templates-2.jpg"><img src="stocklayouts-graphic-design-templates-2.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-text">Flyers</h4>
<p class="card-text layout-text"></p>
</div>
</section>
<section class="card my-3">
<a data-toggle="modal" data-target="#site-modal" data-highres="#" href="website stock.jpg"> <img src="website stock.jpg" class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<h4 class="card-title layout-title">Webpages</h4>
<p class="card-text layout-text"> As of this moment we build small webpages , such as portfolios , small business , blogs etc. </p>
</div>
</section>
</div>
</div>
</div>
</section>
<footer class="site-footer text-light d-flex justify-content-center">
<section class="layout-social py-5">
<a class="text-light px-2" href="https://twitter.com/planetoftheweb">
<i class=" layout-icon fab fa-twitter"></i>
</a>
<a class="text-light px-2" href="https://facebook.com/viewsource">
<i class=" layout-icon fab fa-facebook"></i>
</a>
<a class="text-light px-2" href="https://linkedin.com/in/planetoftheweb">
<i class=" layout-icon fab fa-linkedin"></i>
</a>
<a class="text-light px-2" href="https://github.com/planetoftheweb">
<i class=" layout-icon fab fa-github"></i>
</a>
<a class="text-light px-2" href="https://plus.google.com/+RayVillalobos0">
<i class=" layout-icon fab fa-google-plus"></i>
</a>
<a class="text-light px-2" href="https://dribbble.com/planetoftheweb">
<i class=" layout-icon fab fa-dribbble"></i>
</a>
<a class="text-light px-2" href="https://www.flickr.com/photos/planetoftheweb/sets/72157602932636630/">
<i class=" layout-icon fab fa-flickr"></i>
</a>
<a class="text-light px-2" href="https://www.youtube.com/user/planetoftheweb">
<i class=" layout-icon fab fa-youtube"></i>
</a>
<div class="copyright py-4 text-center text-white">
<div class="container">
<small>Copyright © Larry J designs 2019</small>
</div>
</div>
</section>
</footer>
<article id="site-modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img data-dismiss="modal" class="img-fluid" src="#" alt="Modal Photo">
</div>
</div>
</article>
<!-- Optional JavaScript -->
<!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> -->
<script src="js/bootstrap-4.2.1.js"></script>
<script src="larryj.js"></script>
</body>
</html>

Make bootstrap mega menu open on hover instead of on click

I am using a bootstrap mega menu and I have it styled and working as I need, however I need it to open for desktop devices on hover (instead of on click). I thought I would be able to easily do this with just css, but I cannot get it to work.
Any suggestions? I am open to using jQuery or jscript, but I am not very fluid with these just yet.
Working jsfiddle: https://jsfiddle.net/L2o657p6/4/
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Mega Menuu</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-megamenu">
Today <span class="sr-only">(current)</span>
<div class="dropdown-container">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Featured Collections</h5>
<ul class="list-links">
<li>Press Every Button</li>
<li>Travel with Technology</li>
<li>Smart Choice</li>
<li>Fall in Love with Tech</li>
<li>Smartphones at a Snip</li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Trending Collections</h5>
<ul class="list-links">
<li>Harley-Davidson</li>
<li>Will you be my Valentine?</li>
<li>Summer Wedding Bridesmaid Dresses</li>
<li>Pink Wedding Centerpiece Ideas</li>
<li>Wedding Party Table Runners</li>
<li>Backyard Wedding Reception</li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<h5>My Collections</h5>
<span class="text-muted">You currently have no collections. Learn how to create one.</span>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Fashion
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li>Men's</li>
<li>Women's</li>
<li>Kids</li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Shop for</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li>Jewelry & Watches</li>
<li>Handbags & Accessories</li>
<li>Health & Beauty</li>
<li>Shoes</li>
<li>Sales & Events</li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Electronics
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li>Cell Phones & Accessories</li>
<li>Cameras & Photo</li>
<li>Computers & Tablets</li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Other categories</h5>
<ul class="list-links">
<li>Car Audio, Video & GPS</li>
<li>iPhone</li>
<li>iPad</li>
<li>TV, Audio</li>
<li>Video Games & Consoles</li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Deals
<div class="dropdown-container">
<div class="row">
<div class="col-sm-3">
<h5>Best deals of the day</h5>
<ul class="list-links">
<li>Car Audio, Video & GPS</li>
<li>iPhone</li>
<li>iPad</li>
<li>TV, Audio</li>
<li>Video Games & Consoles</li>
</ul>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Waterproof cellphone cover</h5>
<p>$5.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Large 20 slot leather watch box organizer</h5>
<p>$25.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Samsung Galaxy Tab A SM-P550NZAAXAR 9.7-Inch W-Fi Tablet (Titanium with S-Pen)</h5>
<p>$319</p>
</div>
</a>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
Contact Us
<div class="dropdown-container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h5>Contact us</h5>
<p>Feel free to drop us a line, we will respond as sson as possible.</p>
<form>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputText1">Text</label>
<textarea type="password" class="form-control" id="exampleInputText1" placeholder="Your Message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /col -->
<div class="col-sm-6 col-md-8">
<img src="holder.js/100px260?text=Map">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
CSS:
.nav > .dropdown-megamenu {
position: static;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-container {
position: static;
float: none;
width: auto;
margin-top: 0;
border: 0;
box-shadow: none;
border-radius: 0;
}
}
.dropdown-megamenu > .dropdown-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
padding: 15px;
}
.dropdown-megamenu .dropdown-menu {
display: block;
}
.link-image .media-object {
float: left;
margin-bottom: 7.5px;
}
.link-image-sm + .link-image-sm .media-object {
margin-left: 7.5px;
}
.thumbnail .caption {
min-height: 120px;
}
.thumbnail:hover {
text-decoration: none;
}
/* Link list */
.list-links {
list-style: none;
padding: 0;
}
.list-links li {
line-height: 1.71428571;
}
.list-links a {
color: #555;
}
.list-links a:hover,
.list-links a:focus,
.list-links a:active {
color: #22527b;
}
html,
body {
height: 100%;
min-height: 500px;
}
body {
background: -webkit-linear-gradient(top, #59a874 0, #449a63 100%);
background: linear-gradient(to bottom, #59a874 0, #449a63 100%);
}
h3 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
line-height: 1.3;
margin-bottom: 2rem;
color: #fff;
}

You can just add a desktop only media query:
#media (min-width: 768px){
.navbar-nav .dropdown-megamenu:hover .dropdown-container {
display: block;
}
}
Here's a fiddle: https://jsfiddle.net/vqubh18j/
You could trim the selector down to dropdown:hover .dropdown-container if you wish.
Also note there is a 2px top margin on the dropdown that makes a tiny gap between the navbar and the dropdown, allowing slower mouse movers to have the menu disappear unintentionally:
.dropdown-container {
...
/* Should probably be removed or replaced with
margin: 0; border-top: 2px solid transparent; */
margin: 2px 0 0;
...
}

When one clicks on dropdown-toggle, class open is added to dropdown-megamenu.
.nav > .dropdown-megamenu.open .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu.open > .dropdown-container {
display: block;
}
Adapting the above CSS selector to the hover pseudo-class will give the following:
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
As hovering is not available on touch devices, the above selector is better wrapped in a media query.
#media (min-width: 768px) {
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
}
Updated JSFiddle

Using multiple (owl) carousel on a single page

I have been looking at ways on google to use multiple carousel on a single page and yet did not find any of the solutions working for me. Can anyone of you please help.
Here is the code:
HTML
<!-- Carousel 1 -->
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
<!-- Carousel 2 -->
<div id="demo1">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo-1" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
I have named the carousel as as owl-demo and owl-demo-1
Javascript
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){owl.trigger('owl.next');})
$(".prev").click(function(){owl.trigger('owl.prev');})
});
On JsFiddle

Updated code should look like this: https://jsfiddle.net/wtg76spd/1/
JavaScript:
$(document).ready(function() {
$("#owl-demo, #owl-demo-1").each(function() {
$(this).owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
// Custom Navigation Events
$(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
$(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});
CSS (just first line changed):
//before
#owl-demo .item{
//after
#owl-demo .item, #owl-demo-1 .item{
//class "owl-demo" would do better in this case
1) Use .each() instead of copying code.
2) It'd be better to use class instead of #owl-demo and #owl-demo-1 - let's say you had not 2 but 100 sliders. Would you still give them IDs? However I didn't change it in example.
3) I used closest() and find() methods for next/prev buttons. This way I have 2 callback functions instead of 4.

$(document).ready(function(){
$('.course-carousel').owlCarousel({
items:3,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
$('.video-carousel').owlCarousel({
items:1,
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
// responsive:{
// 0:{
// items:1
// },
// 600:{
// items:3
// },
// 1000:{
// items:5
// }
// }
})
});
body {
color: #828bb2;
font-family: "Roboto",sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.625em;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family: "Playfair Display",serif;
color: #222;
line-height: 1.2em;
margin-bottom: 0;
margin-top: 0;
font-weight: 900;
}
.home-banner-area {
background: url('../images/home-banner.png') no-repeat;
background-size: cover;
background-position: center center;
max-height: 1200px;
}
.container{
max-width:1140px;
}
.default-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9;
}
.col-link{
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
color: #fff;
padding: 20px;
}
.banner-lt-content {
font-family: 'Playfair Display', serif;
font-size: 48px;
line-height: 1em;
font-weight: 900;
}
.feature-area .container-fluid {
padding-left: 50px;
}
.feature-area{
margin-top:-110px;
}
.mt-20{
margin-top:20px;
}
.mb-40{
margin-bottom:40px;
}
.mb-20{
margin-bottom:20px;
}
.mt-30{
margin-top:30px;
}
.ml-20{
margin-left:20px;
}
.feature-item {
margin: 30px 0;
border-right: 1px solid rgba(130,139,178,.2);
padding-right: 20px;
}
.fa-book,.fa-trophy,.fa-desktop{
font-size:30px;
}
.feature-item h4 {
font-size: 18px;
margin-bottom: 20px;
}
.section-gap {
padding: 120px 0;
}
.section-title p {
margin-bottom: 0;
max-width: 620px;
}
.section-title h2 {
font-size: 42px;
color: #222;
margin-bottom: 20px;
}
.popular-course-area .container-fluid {
max-width: 1140px;
padding-left: 15px;
}
.owl-carousel .owl-item{
padding:10px !important;
}
.course-heading{
font-family: 'Playfair Display', serif;
width:100%;
color:#000;
text-align:justify;
margin:15px 0px;
font-size:21px;
}
.owl-carousel .owl-item:hover .course-heading{
color:#7c32ff;
}
.video-area{
background: url('../images/video-area-bg.webp') no-repeat;
background-position-x: center;
}
.section-gap-bottom{
padding-bottom:120px;
}
.section-title p{
margin-bottom:0;
max-width:620px;
}
.video-area .video-left {
padding-bottom: 151px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>College theme</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Eclipse</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 justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link col-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">FACULTY</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link col-link" href="#">CONTACT US</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li> -->
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section class="home-banner-area">
<div class="container">
<div class="row justify-content-center fullscreen align-items-center" style="height:820px;">
<div class="col-lg-5 col-md-8 home-banner-left">
<h1 class="text-white banner-lt-content">Take the first step to learn with us</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one
greater leap forward than the building and launch of the space
telescope known as the Hubble.</p>
</div>
<div class="offset-lg-2 col-lg-5 col-md-12 home-banner-right">
<img src="images/banner-image.webp" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<section class="feature-area">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-book"></i>
<div class="ml-20">
<h4>New Classes</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-trophy"></i>
<div class="ml-20">
<h4>Top Courses</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<i class="fa-solid fa-desktop"></i>
<div class="ml-20">
<h4>Full E-Books</h4>
<p>
In the history of modern astronomy, there is probably no one greater leap forward.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="popular-course-area section-gap">
<div class="container-fluid">
<div class="row justify-content-center section-title">
<div class="col-lg-12">
<h2>Popular Courses<br/> Available Right Now</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="owl-carousel course-carousel owl-theme">
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
<div class="item"><img src="https://preview.colorlib.com/theme/eclipse/img/popular-course/xp4.jpg.pagespeed.ic.mfBvHveSmO.webp">
<div class="details">
<div class="d-flex justify-content-between mb-20 text-center">
<h4 class="course-heading">B.Tech in Computer Science</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="video-area section-gap-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="section-title text-white">
<h2 class="text-white">
Watch Our Teacher<br/>in Live Action
</h2>
<p>
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
<div class="offset-lg-1 col-md-6 video-left">
<div class="owl-carousel video-carousel owl-theme">
<div class="single-video">
<div class="video-part">
<img src="images/video-overlay-image.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
<div class="single-video">
<div class="video-part">
<img src="https://preview.colorlib.com/theme/eclipse/img/xvideo-img.jpg.pagespeed.ic.WgYvcPV4nx.webp">
</div>
<h4 class="text-white mb-20 mt-30">Learn Angular js Course for Legendary Persons</h4>
<p class="text-white mb-20">
In the history of modern astronomy, there is probably no one greater leap forward than the building and
launch of the space telescope known as the Hubble.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script> -->
<script src="js/all.min.js"></script>
<script src="js/fontawesome.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/main.js"></script>
</body>
</html>

Bootstrap gallery thumbnail with carousel bo

I want add following effect - got 4 thumbnails, single thumbnail = different album:
After click on single should be indicated carousel:
I don't have idea how can I put together thumbnail and carousel.
What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
Carousel

In this, carousel thumbnails, appear twice, on top and at the bottom of the carousel slides. I can't figure out why!! :)
<html>
<head>
<title>Stackoverflow Trials</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<style>
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-example-generic .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-example-generic .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-example-generic .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-example-generic .carousel-indicators li.active img {
opacity: 1;
}
#carousel-example-generic .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-example-generic .carousel-outer {
position: relative;
}
</style>
</head>
<body>
<section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
...
</li>
<li>
»
</li>
</ul>
</div>
</div>
</div>
</section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<ol class='carousel-indicators'>
</ol>
</div>
<script>
$(document).ready(function() {
// create arrays of images to be displayed in each carousel for each thumbnails.
// the array name is exactly the same as thumbnail id
var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");
var $carousel = $('#carousel-example-generic .carousel-inner');
var $carouselInd = $('#carousel-example-generic .carousel-indicators');
$( ".thumbnail" ).click(function() {
var numberOfSlides = $('.item').length;
if(numberOfSlides >0) {
// remove all items from the carousel before adding the new ones to it.
$carousel.empty();
//$carouselInd.empty();
}
var m = this.id;
m = eval(m);
//alert(m.length);
for(var i=0 ; i< m.length ; i++) {
var j= i+1;
$('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});
});
</script>
</body>