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>
Related
I have a lot of images and I want to compare them with an image comparison slider but I can't see the entire image only a part of it. And I want to scroll into it to be able to see the entire image.
My HTML code looks like this :
<div class="overflow-scroll" id="image-comparison-slider">
<img class="overflow-scroll" width="100%" id="image1" src="../../static/img/screenshot.png" alt="before">
<div class="img-wrapper">
<img width="100%" id="image2" alt="after" src="../../static/img/screenshot1.png"/>
</div>
<span class="label label-before">Before</span>
<span class="label label-after">After</span>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
<i class="fa fa-arrow-left"></i>
<i class="fa fa-arrow-right"></i>
</div>
<div class="handle-line"></div>
</div>
</div>
I tried to use overflow-scroll from bootstrap 5 but it didn't work.
Now it look like this:
And I want to scroll down into the both images in the same time.
Set the parent div overflow-y: scroll so that, you can scroll to see the whole image. and here I am using bootstrap carousel to see all the images.
.carousel {
height: 600px;
width: 100%;
}
.carousel-inner {
height: 100%;
width: 100%;
overflow-y: scroll;
}
img {
height: auto
width: 100%;
object-fit: cover;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/red-flowers-1659044733.jpeg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://cf.ltkcdn.net/small-pets/images/orig/304120-1600x1066-lovebirds-as-pets.jpg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://www.evolo.us/wp-content/uploads/2019/04/0516-0.jpg"
class="d-block w-100" alt="...">
</div>
</div>
<button 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>
</button>
<button 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>
</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
In bootstrap I am trying to make an image gallery for our webpage. We are using the latest version of bootstrap and we have our images, but there is just one thing. Our images are different sizes and every time it switches to the next image it changes the whole size of the gallery. I was wondering if there was a way to have just whitespace or blackspace fill the area that it doesn't change the size of the gallery.
<h2>Galleries</h2>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/Gallery_1.jpeg" class="d-block w-100" alt="Thompson Machinery">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Thompson Machinery</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/Gallery_2.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Second slide label</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/Gallery_3.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Third slide label</h5>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
This will help you i guess
Wraping images inside a container
<div class="image-container">
<img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="...">
</div>
and give a height and width properties to that container
.image-container{
width: 500px;
height: 500px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
position: relative;
display: grid;
place-content: center;
}
.image-container{
width: 500px;
height: 500px;
border: 1px solid blue;
display: grid;
place-content: center;
}
img{
max-width:100%;
display: block;
}
<h2>Galleries</h2>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="image-container">
<img src="https://source.unsplash.com/random/300x150" alt="Thompson Machinery">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Thompson Machinery</h5>
</div>
</div>
<div class="carousel-item">
<div class="image-container">
<img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="...">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Second slide label</h5>
</div>
</div>
<div class="carousel-item">
<div class="image-container">
<img src="https://source.unsplash.com/random/200x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-caption d-none d-md-block">
<h5 class="galleryCaptions">Third slide label</h5>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
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>
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.
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>