ScrollSpy not working Bootstrap 4 and photo gallery not working

ScrollSpy not working Bootstrap 4 and photo gallery not working - javascript

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.

Related

Bootstrap 5 carousel with collapse on slide event

I am trying to get a bootstrap 5 carousel with collapse outside the carousel going but I'm stuck on the java script part. I am a absolute beginner and not sure how to solve this problem.
I made a console log to see if I have the carousel slides and yes this is working. I can get the collapse working. because of "SyntaxError: Document.querySelector: '[object HTMLDivElement]' is not a valid selector".
Any help would be appreciated.
document.getElementById("carouselExampleControls");
document.addEventListener("slide.bs.carousel", function (e) {
console.log(e.relatedTarget);
});
document.getElementById("carouselExampleControls");
document.addEventListener("slide.bs.carousel", function (e) {
var forSlide = document.querySelector(
".for-slide-" + document.querySelector(e.relatedTarget).index()
);
if (!forSlide.classList.contains("in")) {
document.querySelector("#collapseGroup>.collapse.in").collapse("hide");
forSlide.collapse("show");
}
});
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css);
.img0 {
height: 300px;
width: 400px;
background-color: blue;
position: relative;
}
.img1 {
height: 300px;
width: 400px;
background-color: green;
position: relative;
}
.img2 {
height: 300px;
width: 400px;
background-color: red;
position: relative;
}
.img3 {
height: 300px;
width: 400px;
background-color: purple;
position: relative;
}
.description-group {
border: 1px solid red;
}
.textarea {
margin: 20px 50px;
color: black;
}
<div class="container mt-4">
<div class="row row-flex">
<div class="col-md-4">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100 img0" alt="Slide 0">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 0</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img1" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img2" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 2</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img3" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 3</h5>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-md-8 description-group">
<div id="collapseGroup">
<div class="collapse for-slide-0 in">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 0</h3>
</div>
</div>
</div>
<div class="collapse for-slide-1">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slides 1</h3>
</div>
</div>
</div>
<div class="collapse for-slide-2">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 2</h3>
</div>
</div>
</div>
<div class="collapse for-slide-3">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<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>

You probably want to refer to the correct slide from carousel item. You can get index of current targetElement node using indexOf. However the collapse part still doesn't work need to fix the markup.
document.addEventListener("slide.bs.carousel", function(e) {
var child = e.relatedTarget
var index = [].indexOf.call(child.parentNode.children, child);
var forSlide = document.querySelector(".for-slide-" + index);
console.log("should show collapse " + forSlide.innerText.trim())
return;
// check your collapse code currently doesn't work
if (!forSlide.classList.contains("in")) {
document.querySelector("#collapseGroup>.collapse.show").collapse("hide");
forSlide.collapse("show");
}
});
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css);
.img0 {
height: 300px;
width: 400px;
background-color: blue;
position: relative;
}
.img1 {
height: 300px;
width: 400px;
background-color: green;
position: relative;
}
.img2 {
height: 300px;
width: 400px;
background-color: red;
position: relative;
}
.img3 {
height: 300px;
width: 400px;
background-color: purple;
position: relative;
}
.description-group {
border: 1px solid red;
}
.textarea {
margin: 20px 50px;
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container mt-4">
<div class="row row-flex">
<div class="col-md-4">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100 img0" alt="Slide 0">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 0</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img1" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img2" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 2</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img3" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 3</h5>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-md-8 description-group">
<div id="collapseGroup">
<div class="collapse for-slide-0 show in">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 0</h3>
</div>
</div>
</div>
<div class="collapse for-slide-1">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slides 1</h3>
</div>
</div>
</div>
<div class="collapse for-slide-2">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 2</h3>
</div>
</div>
</div>
<div class="collapse for-slide-3">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<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>

Content is not sized correctly for the viewport

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

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

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>

How to set the overall Grid thumbnail height to be equal?

I have a grid of thumbnails. It's coded in <ul> as a wrapper and <li> for displaying each thumbnails. I have set the following CSS to the <li> tag:
float: none;
display: inline-block !important;
The thumbnails are displaying in a Grid. I have also used Bootstrap classes in <li class="col-xs-12 col-sm-6 col-md-3 col-lg-3">. As per assigned classes it should display 4 thumbnails per row. But currently it's displaying only 3 thumbnails per row. I searched and found that it's because <li>s are given display: inline-block and there are line break in HTML after each <li> in the HTML file. Please let me know how to display 4 thumbnails per row using display: inline-block.
Also if I set the float: left for <li> then I should give height for each <li>. But the images within those <li>s are of different size.
The problems are:
I want to display 4 columns per row (now only 3 are displaying)
I want to set the border-right to cover whole height of the grid row. (Now since height of the <li> is according to the height of the thumbnail, the border-right is spanning till half the row for smaller thumbnails.)
Please help me with this.
body {
background-color: #ddd;
}
.list-unstyled {
background-color: #eee;
width: 100%;
}
.list-unstyled li{
background-color: #eee;
float: none;
display: inline-block !important;
/*display: -moz-grid !important;*/
padding: 10px;
margin: 0;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
box-sizing: border-box;
}
.list-unstyled li img{
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<ul class="list-unstyled">
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/A-HAPPY-SUNDAY.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/12/cover17.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/09/cover1.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
<a href="#" title="" class="btn btn-primary" >Button</a>
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Bolne-Wali-Ghadi.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover14.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
<a href="#" title="" class="btn btn-primary" >Button</a>
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2016/01/cover.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Chhoti-Chinti-ki-Badi-Dawat.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover7.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover13.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Fu-ku.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover8.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
<li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
<div class="item">
<div style="" class="book_image">
<img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/cover7.jpg" alt="">
</div>
<div class="book_title">
<h3>Sample Title</h3>
</div>
<div class="book_price">
Button
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

Just remove display: inline-block !important; from .list-unstyled li and give display: flex; flex-wrap: wrap; to .list-unstyled will make it as your expected result.
.list-unstyled {
background-color: #eee;
width: 100%;
display: flex;
flex-wrap: wrap;
}
Working Fiddle
Edit:
Give display: flex; align-items: flex-end; to .list-unstyled li
Updated Fiddle

Try getting rid of float: none; in .list-unstyled li

stop scrolling once last li is visible on screen

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>

Develop Reference

JavaScript is the programming language of the Web.

ScrollSpy not working Bootstrap 4 and photo gallery not working - javascript

Related

Bootstrap 5 carousel with collapse on slide event

Content is not sized correctly for the viewport

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

How to set the overall Grid thumbnail height to be equal?

stop scrolling once last li is visible on screen

Categories

Resources