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>
Related
I am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>
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>
I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>
When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.
I'm trying to make a website, which is using just screen space.
Logo is in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch.
My problem is that images, which are set as a background of the col-sm-4 div are not showing and their height is set to 0px (I tried !important). The code is not reacting on height in % or background-size - cover. How can I make these images precisely on page with same height on every resolution?
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body {
height: 100% !important;
width: 100% !important;
}
body {
background: grey !important;
}
header {
height: 15% !important;
}
.Menu {
height: 5% !important;
}
.Images {
height: 80% !important;
}
/*Header*/
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
.col-sm-4 {
border: solid 1px #9f0000;
}
.Images {
}
.image {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<main class="container-fluid p-0">
<header class="row Logo no-gutters">
<div class="col-sm-3">
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
</div>
</header>
<div class="row Menu no-gutters">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row Images no-gutters">
<div class="col-sm-4 image" id="image00"></div>
<div class="col-sm-4 image" id="image01"></div>
<div class="col-sm-4 image" id="image02"></div>
<div class="col-sm-4 image" id="image10"></div>
<div class="col-sm-4 image" id="image11"></div>
<div class="col-sm-4 image" id="image12"></div>
<!-- <div class="col-sm-4">
<img class="image" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-sm-4">
<img class="image" src="./images/park.jpg" alt="Park">
</div>
<div class="col-sm-4">
<img class="image" src="./images/tunnel.jpg" alt="Tunnel">
</div>
<div class="col-sm-4">
<img class="image" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-sm-4">a
<img class="image" src="./images/park.jpg" alt="Park">
</div>
<div class="col-sm-4">
<img class="image" src="./images/tunnel.jpg" alt="Tunnel">
</div> -->
</div>
</main>
</body>
</html>
The easiest way is to set a min-height using vh units (% of viewport height) on the .image DIV...
https://www.codeply.com/go/iFDwwGDmKi
.image {
background-image: url("..");
min-height: 45vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Edit:
To have the images fill the remaining page height, w/o scrolling, set flex-grow and overflow hidden on the .Images container.
.Images {
flex-grow: 1;
overflow-y:hidden;
}
https://www.codeply.com/go/iFDwwGDmKi (updated)
You just need to add the native Bootstrap 4 class img-fluid to your images like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<main class="container-fluid p-0">
<header class="row Logo no-gutters">
<div class="col-sm-3 mx-auto">
<header>
<img class="logo d-block img-fluid mx-auto" src="https://placehold.it/120x60" alt="Logo" />
</header>
</div>
</header>
<div class="row Menu no-gutters">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row Images no-gutters">
<div class="col-sm-4 image" id="image00">
<img class="img-fluid" src="https://placeimg.com/640/480/arch">
</div>
<div class="col-sm-4 image" id="image01">
<img class="img-fluid" src="https://placeimg.com/640/480/animals">
</div>
<div class="col-sm-4 image" id="image02">
<img class="img-fluid" src="https://placeimg.com/640/480/nature">
</div>
<div class="col-sm-4 image" id="image10">
<img class="img-fluid" src="https://placeimg.com/640/480/people">
</div>
<div class="col-sm-4 image" id="image11">
<img class="img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-sm-4 image" id="image12">
<img class="img-fluid" src="https://placeimg.com/640/480/any">
</div>
</div>
</main>
As pointed out by Temani Afif, you didn't specify any parent with a specific height. Specify the height in your .image class instead of 100%, i.e. height: 200px;
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>