stop scrolling once last li is visible on screen - javascript

I have a set of images that is aligned in a single row and overflow:hidden. I have 2 buttons, Left and Right, which when clicked scrolls the div to their opposite sides. The problem I am facing here is even after the last element is visible on the screen the scroll goes on to some extent and then stops, creating aspect for blank space in the screen. How can I prevent this? Here is the Fullscreen result and Fiddle and code below:
$(document).ready(function() {
//Video Slider begins
var totalWidth = 0;
$(".gallery__item").each(function() {
totalWidth = totalWidth + $(this).outerWidth(true) + 100;
});
var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem) {
if ($targetItem.length) {
var newPosition = $targetItem.position().left;
if (newPosition <= maxScrollPosition - 100) {
$targetItem.addClass("vid-item-active");
$targetItem.siblings().removeClass("vid-item-active");
$(".gallery").animate({
left: -(newPosition)
});
} else {
$(".gallery").animate({
left: -(maxScrollPosition)
});
};
};
};
$(".des-style").width("100%");
$(".gallery").width(totalWidth);
$(".vid-item:first").addClass("vid-item-active");
// When the prev button is clicked
// ====================================================================
$(".gallery__controls-prev").on("click", function() {
var $targetItem = $(".vid-item-active").prev();
toGalleryItem($targetItem);
});
// When the next button is clicked
// ====================================================================
$(".gallery__controls-next").on("click", function() {
var $targetItem = $(".vid-item-active").next();
toGalleryItem($targetItem);
});
});
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
}
.services-wrap {
padding: 20px;
background: #fff;
border-radius: 4px;
margin: 0 0 40px;
margin-top: 15px !important;
box-shadow: 5px 5px 5px gray;
max-height: 220px !important;
min-height: 220px !important;
}
.gallery {
position: relative;
left: 0px;
top: 0px;
}
.gallery__item {
float: left;
list-style: outside none none;
margin-right: 20px;
width: 200px;
}
.stay-fixed {
position: absolute;
z-index: 20;
}
.gallery__controls-prev {
cursor: pointer;
float: left;
}
.gallery__controls-next {
cursor: pointer;
float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
width: 28px;
height: 28px;
}
.left {
transform: rotate(-180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="gallery-wrap">
<div class="gallery clearfix">
<ul>
<li class="gallery__item vid-item vid-item-active">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
<div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
<div class="gallery__controls-prev">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
</div>
<div class="gallery__controls-next">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
</div>
</div>
</div>


Please check i have added snippet.
Demo Link
$(document).ready(function() {
//Video Slider begins
var totalWidth = 0;
var mainDivWidth = $(".gallery").outerWidth();
$(".gallery__item").each(function() {
debugger;
totalWidth = totalWidth + $(this).outerWidth(true) + 12;
});
var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem) {
if ($targetItem.length) {
var newPosition = $targetItem.position().left;
debugger;
if (totalWidth < newPosition + mainDivWidth) {
return false;
}
if (newPosition <= maxScrollPosition - 100) {
$targetItem.addClass("vid-item-active");
$targetItem.siblings().removeClass("vid-item-active");
$(".gallery").animate({
left: -(newPosition)
});
} else {
$(".gallery").animate({
left: -(maxScrollPosition)
});
};
};
};
$(".des-style").width("100%");
$(".gallery").width(totalWidth);
//$(".gallery").css("left", "-40px");
// Basic HTML manipulation
// ====================================================================
// Set the gallery width to the totalWidth. This allows all items to
// be on one line.
$(".vid-item:first").addClass("vid-item-active");
// When the prev button is clicked
// ====================================================================
$(".gallery__controls-prev").on("click", function() {
var $targetItem = $(".vid-item-active").prev();
toGalleryItem($targetItem);
});
// When the next button is clicked
// ====================================================================
$(".gallery__controls-next").on("click", function() {
var $targetItem = $(".vid-item-active").next();
toGalleryItem($targetItem);
});
});
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
}
.services-wrap {
padding: 20px;
background: #fff;
border-radius: 4px;
margin: 0 0 40px;
margin-top: 15px !important;
box-shadow: 5px 5px 5px gray;
max-height: 220px !important;
min-height: 220px !important;
}
.gallery {
position: relative;
left: 0px;
top: 0px;
}
.gallery__item {
float: left;
list-style: outside none none;
margin-right: 20px;
width: 200px;
}
.stay-fixed {
position: absolute;
z-index: 20;
}
.gallery__controls-prev {
cursor: pointer;
float: left;
}
.gallery__controls-next {
cursor: pointer;
float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
width: 28px;
height: 28px;
}
.left {
transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-wrap">
<div class="gallery clearfix">
<ul>
<li class="gallery__item vid-item vid-item-active">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
<li class="gallery__item vid-item">
<div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
<div class="pull-left">
<img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
</div>
<div class="clearfix"></div>
<div class="des-style" style="width: 100%;">
<div class="body-content">
Description
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
<div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
<div class="gallery__controls-prev">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
</div>
<div class="gallery__controls-next">
<img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
</div>
</div>
</div>

Related

Class is not added by jQuery

I need to add dark overlay to images by adding class imgoverlay using jQuery.
$("#featured .row .col-sm img").hover(
function() {
$(this).addClass('imgoverlay');
},
function() {
$(this).removeClass('imgoverlay');
}
);
.imgoverlay {
height: 100%;
background-color: rgba(18, 15, 65, 0.7);
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="Auoya" src="assets/images/thumb1resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="capitalHeights" src="assets/images/thumb2resize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2"><img name="hai-sakani" src="assets/images/thumbMiddleresize.jpg" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1"><img name="bosco" src="assets/images/thumb3resize.jpg" alt=""></div>
</a>
<a href="">
<div class="thumb1"><img name="armonia" src="assets/images/thumb4resize.jpg" alt=""></div>
</a>
</div>
</div>
</div>
</section>

Pure CSS
You can use pseudo element ::after or ::before, no need to use JS or jQ just add a global class and set hover effect on ::after and active it on :hover
.thumbs:hover::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(18, 15, 65, 0.7);
}
.thumbs {
width: 150px;
height: 150px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
<section class="main" id="featured" data-aos="fade-up">
<div class="container">
<div class="d-flex justify-content-between justify-content-end" data-aos="fade-up">
<div>
<span class="sub-title"><p align="right" data-aos="fade-left" data-aos-duration="3000"> مشاريع مميزة </p></span>
</div>
<div>
<a href="#">
<p align="right"><strong> مشاريعنا الأخرى<i class="fas fa-arrow-left"></i></strong></p>
</a>
</a>
</div>
</div>
<!-- Gallery start -->
<div class="row ">
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="Auoya" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="capitalHeights" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb2 thumbs"><img name="hai-sakani" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
<div class="col-sm">
<a href="">
<div class="thumb1 thumbs"><img name="bosco" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
<a href="">
<div class="thumb1 thumbs"><img name="armonia" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoQEfG25HrwwvXqpLkQfVMQk3PxQ7Q8CEH8oZx9MGfG04JlnLd" alt=""></div>
</a>
</div>
</div>
</div>

ScrollSpy not working Bootstrap 4 and photo gallery not working

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

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

Trying to style with columns and 4 divs per column but not styling properly

Im trying to get these articles to be displayed vertically (one on top of the other) and then 4 divs per column of the main section. I can't them to eb the same size or for all of them to display the articles stacked on top of each other. Some keep going side by side. I can't figure out what to do.
<div class="indexNPrt2Mid" >
<div class ="row flex-wrap">
<div class = "col-lg-6 flex-first">
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(19)">Daily Fantasy Basketball<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/basketball.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider1">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of basketballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(17)">Daily Fantasy Baseball<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/baseball.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider2">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of baseballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/base-ball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(16)">Daily Fantasy Football<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt="" class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider3">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of footballArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/football.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Hockey<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of hockeyArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
</div>
<div class = "col-lg-6 flex-last">
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Soccer<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of soccerArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Golf<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of golfArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy MMA<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of mmaArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
<div class="indexNPrt2MidSlider">
<div class="ylwTpBx wlwTpBx clearfix pointer">
<h3 (click)="navigateToArticles(18)">Daily Fantasy Racing<span><img
src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/football.png" alt='' class="img-responsive"></p>
</div>
<div class="owl-carousel owl-theme midSlider midSlider4">
<div data-toggle="modal" data-target="#myModal2" (click)="switchToSingle(article)" class="item pointer"
*ngFor="let article of nascarArticles">
<img style="width: 100%;height:auto;"
[attr.src]="findMedia(article.featured_media) ? findMedia(article.featured_media) : '../../../../assets/images/Basketball.jpg'"
alt="" class="img-responsive">
<div class="nltstNwsInfoTpWrp">
<h4><a>{{article.title.rendered}}</a></h4>
<!-- <p>{{article.extract?.slice(0,15)}}...</p>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="indexNPrt2Rght">
<div class="ylwTpBx clearfix">
<h3 routerLink="/news">Social Feeds <span><img src="../../../../assets/images/blkArow.png"></span></h3>
<p><img src="../../../../assets/images/rght_icn3.png" alt="" class="img-responsive"></p>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#nTwtr" aria-controls="nTwtr" role="tab"
data-toggle="tab"><img
src="../../../../assets/images/twitter_icn.png" alt=""></a></li>
<li role="presentation"><a href="#nFb" aria-controls="nFb" role="tab" data-toggle="tab"><img
src="../../../../assets/images/facebook_icn.png" alt=""></a></li>
<li role="presentation"><a href="#nInsta" aria-controls="nInsta" role="tab" data-toggle="tab"><img
src="../../../../assets/images/insta_icn.png" alt=""></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="height:1700px;overlflow:scroll;">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of twitterFeeds">
<img
[attr.src]="tweet?.user?.profile_banner_url ? tweet?.user?.profile_banner_url : '../../../../assets/images/twitter-befault.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.user.name}}</span><i><img
src="../../../../assets/images/twitter_icn.png"></i></a>
<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_at |date:'dd MMM, yyyy h:m a'}}</i>
</div>
</div>
<p>{{tweet?.text?.slice(0,150)}}...</p>
<a href="javascript:void(0)" class="nRdMor">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nFb">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of facebookFeeds">
<img
[attr.src]="tweet?.attachments?.data[0]?.media?.image?.src ? tweet?.attachments?.data[0]?.media?.image?.src :'../../../../assets/images/f-default.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.message}}</span><i><img
src="../../../../assets/images/facebook_icn.png"></i></a>
<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_at |date:'dd MMM, yyyy h:m a'}}</i>
</div>
</div>
<p>{{tweet?.text?.slice(0,150)}}...</p>
<a href="{{tweet?.attachments?.data[0]?.url}}" target="_blank" class="nRdMor">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nInsta">
<div class="nSocialTbWrap">
<div class="nSocialTbBx" *ngFor="let tweet of instagramFeeds">
<img
[attr.src]="tweet?.images?.thumbnail?.url ? tweet?.images?.thumbnail?.url :'../../../../assets/images/f-default.jpg'"
alt="" class="img-responsive social-feed-img"/>
<div class="nSocialTbBxInfo">
<div class="nSocialTbBxInfoTp clearfix">
<a href="javascript:void(0)"><span class="icnWrapperS">{{tweet?.user.full_name}}</span><i><img
src="../../../../assets/images/insta_icn.png"></i></a>
<!--<div class="nltstNwsInfoTme">
<span class="icnWrapperS"><img src="../../../../assets/images/nclck_icn.png" alt=""
class="img-responsive"></span>
<i>{{tweet.created_time |date:'dd MMM, yyyy h:m a'}}</i>
</div>-->
</div>
<p>{{tweet?.caption?.slice(0,150)}}...</p>
<a href="{{tweet?.link}}" class="nRdMor" target="_blank">Read More <span><img
src="../../../../assets/images/blkArow.png"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my code. The exterior div (indexNPrt2Mid) is meant to be displayed in the center of the page with two columns that have the other 8 divs included in them, with even heights, widths and three articles displayed in a stacked configuration. I dont know where my issue is coming from .
here is the CSS:
.news-notes {
/* text-align: justify; */
}
.body {
width: 100%;
}
.indexNPrt2MidSlider{
height: 25%;
}
.indexNPrt2Mid {
columns: 2;
}
.social-feed-img {
height: auto;
width: 100%;
}
.news-item {
border-top: 1px solid #eee;
}
.news-item:first-child {
border-top: none;
}
.pointer {
cursor: pointer;
}
.TopText {
margin-top: -5em;
font-size: 2em;
color: white;
}
.TopText div {
font-size: 3em;
}
.TopText h1 {
font-size: 2em;
color: white;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
.backToTopButton.visible {
opacity: 1;
visibility: visible;
}
.backToTopButton .backToTopArrow {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
display: block;
}
.backToTopButton i {
position: absolute;
top: 1.25rem;
right: 1.0625rem;
padding: .5rem;
border: solid #fff;
border-width: 0 .15rem .15rem 0;
}
i {
display: inline-block;
width: auto;
height: auto;
margin: 0;
padding: 0;
float: inherit;
text-align: inherit;
}
*, :after, :before {
box-sizing: content-box;
}
.tab-content::-webkit-scrollbar{
overflow-scrolling: auto;
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}

So here is how I could do the layout. if you resize you see it will stack on top of eachother
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid red; width:100%; height: 50vh;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid green; width:100%; height: 50vh;">
</div>
<div class="col-sm-12 col-md-12 col-lg-12 " style="border: 1px solid blue; width:100%; height: 50vh;">
</div>
<div class="col-sm-12 col-md-12 col-lg-12" style="border: 1px solid orange; width:100%; height: 50vh;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid black;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid green;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid blue;height:50vh;">
</div>
<div class="col-sm-3 col-md-3 col-lg-3" style="border:2px solid yellow;height:50vh">
</div>
</div>
</div>
</body>
</html>

Slick carousel individual overlay

Explanation
I'm trying to set a overlay on each image of the slider (slick.js) when hovering them, but for some reason, when I hover it, the overlay appears on top of the slider (all 12 images), not the image hovered.
Code
You can also see it in JSFiddle and in "fullscreen mode".
ps: it's be better to see the overlay content in fullscreen.
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>
Thanks in advance,
Luiz.

Why is it not working?
Your code doesn't work as expected because your overlay is being positioned relatively to .carousel-wrapper not the a element (.carousel-wrapper is the first parent of .overlay that has position other than static - if you don't set your position explicitly it defaults to static).
How to avoid this mistake in the future?
If you want any element on your website to have an overlay (or in general you want to use position: absolute somewhere) you need to remember that this element is going to be positioned relatively to it's parent that has positon: relative or position: absolute. If there's no such element it's going to position itself to <html>.
It's very well explained here:
Remember that these values will be relative to the next parent element
with relative (or absolute) positioning. If there is no such parent,
it will default all the way back up to the element itself
meaning it will be placed relatively to the page itself.
(on absolute positioning)
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Check the working demo:
https://jsfiddle.net/thffcgqc/2/

Wrap your anchor tags and overlay content in a separate div and style as follows. The reason is due to the fact that you are not using a margin-right for whitespace between boxes. You are simply using a fixed with li tags and the images leaves a gap in the parent container . If an overlay is placed, you will see the overlay over the white gap and the image (which is somewhat not what you want - I believe)
See snippet below
$('.carousel').slick({
arrows: false,
dots: true,
slidesPerRow: 3,
rows: 3
});
.carousel-wrapper {
background-color: rgb(235, 235, 235);
position: relative;
}
img {
background-color: black;
}
.slick-slide {
text-align: center !important;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(1, 1, 1, .35);
transition: 0.2s;
opacity: 0;
background: red;
z-index: 1;
}
.overlay:hover {
opacity: 1;
}
.overlay-content {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
position: relative;
display: inline-block;
}
a:hover .overlay {
opacity: 1
}
.img_cont {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>
<body>
<section class="carousel-wrapper">
<div class="container">
<div class="row">
<ul class="col-md-12 carousel text-center">
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img_cont">
<img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
<div class="overlay">
<div class="overlay-content">
<h4>content</h4>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>

Collapsing a div and opening another one bootstrap

I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #film.
/* Latest compiled and minified JavaScript included as External Resource */
/* DOES NOTHING */
$(document).ready(function() {
$(".rekruttering").click(function() {
$("#film").collapse('hide');
});
})
/* VIMEO */
img {
max-width: 100%;
height: auto;
}
.video {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
width: 100%;
/* Thumbnails 5 across */
margin: 1%;
}
.video img {
width: 100%;
opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
opacity: 0.75;
}
.categories li {
list-style-type: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galleri</h2>
<hr class="bg-primary">
</div>
<div class="col-lg-12 categories text-center">
<ul>
<a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
<a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
<li>TV -/Biografspots & Imagefilm</li>|
<li>Salgs- & Produktfilm</li>
</ul>
</div>
</div>
<div id="film" class="row text-centered collapse in">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">FILM</h2>
</article>
</div>
</div>
<!-- FILM -->
<div id="rekruterring" class="row text-centered collapse">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
</article>
</div>
</div>
<!-- REKRUTERRING -->
</div>

This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
https://github.com/twbs/bootstrap/issues/10966
Updated JSFiddle
<div class="panel">
<div id="film" class="row text-centered collapse in">
<div class="panel">
<div id="rekruterring" class="row text-centered collapse">

Categories

Resources