Using multiple (owl) carousel on a single page - javascript

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>

Related

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

Bootstrap 4 - I can't stretch background image in div

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;

Move to a Div/ID from Navbar Link

Ok, So I have a navbar that, when a link is clicked, I want it to move to a specific div (i.e. when clicking the "About" link, the page moves to the About section of the page).
A JSFiddle of the Code in question:
HTML in question:
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
The plan is to add classes that would match the id names of the parts of the page I want to go to.
Here is the JS I have so far:
function main() {
$
$('.nav-item').on('click', function() {
$(this).toggleClass('active');
});
}
$(document).ready(main);
Note, I am using Bootstrap 4.0. Any help is much appreciated.Thanks in advance!

Here is a solution with smooth scrolling (the jquery slim libs does not support the animate property)
Snippet below
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
body {
background: #f5f5dc;
}
.jumbotron {
text-align: center;
background: url(imgs/los-angeles-skyline.jpg);
background-size: cover;
background-repeat: no-repeat;
color: white;
border-radius: 0;
}
#bootstrap-link {
text-decoration: none;
color: white;
}
#bootstrap-link:hover {
text-decoration: underline;
color: #014c8c;
}
#info-cards {
margin-bottom: 20px;
padding-bottom: 5px;
}
#card-blocks {
padding-bottom: 20px;
margin-bottom: 20px;
}
.card-button {
margin-left: 5px;
margin-right: 5px;
}
#form-container {
border: 5px solid rgba(220, 220, 220, 0.4);
margin-top: 10px;
padding: 30px;
padding-bottom: 25px;
background: #ffffff;
}
.form-button {
margin-top: 20px;
}
.footer {
text-align: center;
background-color: #292b2c !important;
padding-bottom: 5px;
padding-top: 20px;
margin-top: 5px;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-lg sticky-top navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">David Madrigal's Portfolio</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Welcome!</h1>
<p class="lead">This is a site to which I will be adding all of my website works.</p>
<hr class="my-4">
<p>This site uses Bootstrap 4 to make the site visually pleasing.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="container-fluid" id="About">
<div class="row">
<div class="col-sm-12 div.md-12" id="info-cards About">
<div class="card">
<h3 class="card-header">About the <strong>Developer</strong></h3>
<div class="card-block">
<div class="media">
<img class="d-flex mr-3" src="https://avatars1.githubusercontent.com/u/17634751?v=3&u=764e15995bb82b2f37a3bdb15ba59e11f038a2f1&s=400" alt="githubProfilePic">
<div class="media-body">
<h5 class="mt-0">Welcome to My Portfolio!</h5>
Hello there! This is a personal portfolio of all of my works will be open source and can be changed however you please. Just make sure to provide links to the frameworks used so others can create projects with them!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="card-blocks projects projects">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #1
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Featured: "Just Random Musing..."
</div>
<div class="card-block">
<h4 class="card-title">My First Site W/ Bootstrap!</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
View the Site!
View Source!
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="card">
<div class="card-header">
Block #2
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="skillbars">
<div class="card">
<h3 class="card-header">Featured Skills</h3>
<div class="card-block">
<p class="card-text">HTML</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>
<br>
<p class="card-text">CSS</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
<br>
<p class="card-text">JavaScript</p>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
</div>
</div>
</div>
</div>
<form class="container-fluid" id="contact">
<div id="form-container">
<div class="form-group row">
<label for="InputName" class="col-4 col-form-label">Full Name</label>
<div class="col-8">
<input type="name" class="form-control" id="InputName" aria-described-by="nameHelp" placeholder="Enter Name" />
<small id="nameHelp" class="form-text text-muted">Please enter your Full Name (First and Last)</small>
</div>
</div>
<div class="form-group row">
<label for="InputEmail" class="col-4 col-form-label">Email Address</label>
<div class="col-8">
<input type="email" class="form-control" id="InputEmail" aria-described-by="emailHelp" placeholder="Enter Email" />
<small id="emailHelp" class="form-text text-muted">We will never share your email with anyone else.</small>
</div>
</div>
<div class="form-group row">
<label for="exampleInputPassword1" class="col-4 col-form-label">Password</label>
<div class="col-8">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-primary form-button">Submit</button>
</div>
</form>
<footer class="footer text-muted">
<p>&copy 2017. David Madrigal-Hernandez.</p>
</footer>

You missed the Id, just add an Id in the section container, for your case:
<div class="container-fluid" id="About">
since in your anchor you are jumping to #About
<a class="nav-link" href="#About">About</a>

Bootstrap caption outside carousel

Iam adding bootstrap carousel to my site. I need bootstrap caption to be placed outside of the image in the right section. I did it but the caption is not adjusting with the container? if anyone knows how to fix this it will be greatful.....
<style>
.img-swap {
cursor: pointer;
}
.content-container:after {
clear: both;
content: "";
display: block;
}
.fullview {
height: 16px;
padding: 0px;
width: 18px;
}
.clean {
background-position: -253px 0;
}
.hide-sidebar { margin-left: -253px; }
.clean { background-position: -253px 0; }
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.slider-container {
margin-top:35px;
height:100%;
}
.carousel-caption {
position: absolute;
top: 0;
text-align: left;
left: inherit;
right: inherit;
width: 200px;
color:#000;
}
.carousel-caption:not(#caption-0) {
display: none;
}
#media (max-width: 1024px) {
.right-side-content .wrapper { margin-right: 20px; }
.right-side-content.full-content .wrapper { margin-right: -253px; }
body { background-position: -253px 0; }
body.clean { background-position: 0 0; }
.left-side-content { margin-left: -253px; z-index: 99; }
.left-side-content.hide-sidebar { margin-left: 0; }
}
</style>
</head>
<body class="">
<header class="title hidden-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<header class="title visible-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<div class="clearfix">
</div>
<div class="content-container bg-light-gray">
<div class="container">
<div class="row">
<div class="container slider-container">
<div class="row">
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/landing/carousel_bg_4.jpg">
</div>
<div class="item">
<img alt="Second slide" src="images/landing/carousel_bg_2.jpg">
</div>
<div class="item">
<img alt="Third slide" src="images/landing/carousel_bg_3.jpg">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, im. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
</div>
</div>
<a data-slide="prev" role="button" href="#slider" class="left carousel-control"><span class="glyphicon glyphicon-chevron-down"></span></a>
<a data-slide="next" role="button" href="#slider" class="right carousel-control"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
<!-- /.container -->
</div>
<div class="footer">
<div class="footer-menu">
<ul>
<li class="padd-lt0">Mobile App</li>
<li> About </li>
<li>Terms & Privacy Policy</li>
<li>Help</li>
<li>Videos</li>
<li>Disclaimer</li>
<li class="border-rt-none">Blog</li>
</ul>
</div>
<div class="copyright-sec">
2014, Copyright ©<img src="images/hudooku-footer-logo.png">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- ============= SCRIPTS ============= -->
<!--<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
<script type="text/javascript">
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
</script>
</body>
</html>

You have to give position from bottom to your carousel-caption class.
like following:
.carousel-caption { bottom:-95px; }
For showing the caption outside the carousel-inner class, you have to set padding bottom into that class otherwise the caption will not appear. It will hide due to overflow
.carousel-inner { padding-bottom:95px; }

Categories