We Keep Coding

How to add dropdown menu to another dropdown?

I want to create a class for adding dropdown to menu even in the other dropdowns. I almost did it, but there is a problem and when I try to close the inner drop-down, the outer drop-down also closes.
When you click on secondary dropdown the first one will also close. What should I do to fix this?
$(".dropdown").each(function() {
$(this).on("click", function() {
if ($(this).attr("data-dropdown") == "closed") {
$(this).attr("data-dropdown", "opened");
$(this).css({
"height": "auto"
});
} else {
$(this).attr("data-dropdown", "closed");
$(this).css({
"height": "35px"
});
}
})
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
height: 35px;
overflow: hidden;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>

The main issue is because the event is propagating up the DOM, so although you click to toggle the child dropdown, the event is caught by the parent which then toggles and hides. To fix this problem, amend your click handler function to receive the event as an argument, then call stopPropagation() on it.
Also, note that you don't need to use each() here as jQuery will loop over all elements in the collection and assign the event to them. In addition you can simplify the code massively, just by using toggleClass().
Finally, it would be much better practice to hide/show the child div of the toggled dropdown instead of changing its height. This method allows you to perform more varied animations to transition the content from hidden to visible, and also prevents issues with text being clipped due to changes in font sizes or zoom levels.
Here's a working version:
$(".dropdown").on("click", e => {
e.stopPropagation();
$(e.currentTarget).toggleClass('open');
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
overflow: hidden;
}
.dropdown>div {
display: none;
}
.dropdown.open>div {
display: block;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>

Overlapping images before refresh / on some browsers [duplicate]

I'm sorry for dropping so much code here, but I've been playing with this for over a week and I just can't figure it out.
So I am working on my personal website, and the problem is that the images in the the body's grid system overlap sometimes on the first load of the site. If you refresh it, it seems to work ok (most of the time). You can try yourself: tylerteacher.com . The strange thing is that the site works in the compatibility viewers in chrome and firefox.
I have tried adding margins and using the 'space-between' function in the css. I have double checked the html to make sure everything is properly linked to the css page, and I have also played with Javascript page and the slides per view functions.
I really appreciate the help!
let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");
toggle.addEventListener('click' , function(){
collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})
// with masonry
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// swiper libray initialization
new Swiper('.swiper-container', {
direction : 'horizontal',
loop : true,
slidesPerView : 6,
autoplay : {
delay : 0
},
// responsive breakpoints
breakpoints : {
'#0' : {
slidesPerView : 2
},
// 888px
'#1.00' : {
slidesPerView : 3
},
// 1110px
'#1.25' : {
slidesPerView : 4
},
// 1330px
'#1.50' : {
slidesPerView: 5
}
}
})
// Sticky Navigation
window.onscroll = function(){ myFunction()};
// get the current value
let navbar = document.getElementById("header");
// get the navbar position
let sticky = navbar.offsetTop;
// sticky function
function myFunction(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');
/* root styling */
:root{
--light : #f8f9fa;
--secondary: #adb5bd;
--dark: #343a40;
--primary-color: #f15bb5;
--secondary-color: #2ec4b6;
--border : #e9ecef;
}
body{
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
* > *{
box-sizing: border-box;
}
/* global styling */
.text-light{
color: var(--light);
}
.text-secondary{
color: var(--secondary);
}
.text-dark{
color: var(--dark);
}
.text-primary{
color: var(--primary-color);
}
.bg-light{
background-color: var(--light);
}
.container{
max-width: 1200px;
padding: 0 15px;
margin: auto;
}
.img-fluid{
width: 100%;
}
.text-title{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
}
.secondary-title{
font-family: 'Poppins' , sans-serif;
}
.display-1{
font-size: 22px;
}
.display-2{
font-size: 16px;
}
.display-3{
font-size: 14px;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.btn{
padding: 15px 20px;
border: none;
}
.btn-primary{
border-radius: 4px;
background-color: var(--secondary-color);
}
.object-fit{
max-height: 120px;
height: 80px;
width: 80px;
object-fit: fill;
justify-content: space-between;
}
.d-flex{
display: flex;
}
.flex-wrap{
flex-wrap: wrap;
}
.justify-content-center{
justify-content: center;
}
.justify-content-between{
justify-content: space-between;
}
.mt-2{
margin-top: 10px;
}
.mt-3{
margin-top: 50px;
}
.mb-3{
margin-bottom: 30px;
}
.m-0{
margin: 0;
}
.px-1{
padding-left: 5px;
padding-right: 5px;
}
.px-2{
padding-left: 20px;
padding-right: 20px;
}
.py-1{
padding-top: 10px;
padding-bottom: 10px;
}
.py-2{
padding-top: 20px;
padding-bottom: 20px;
}
.py-3{
padding-top: 30px;
padding-bottom: 30px;
}
.thumbnail{
width: 100%;
height: 500px;
object-fit: cover;
}
.rounded{
height: 120px;
width: 120px;
object-fit: fill;
border-radius: 99px;
}
.shadow{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
/* section styling */
/* ------- Navigation Menu ---------- */
.navbar{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.nav-brand{
font-family: 'DM Sans', sans-serif;
font-weight: bold;
align-self: center;
font-size: 32px;
}
.collapse{
align-self: center;
}
.nav-link{
font-size: 18px;
margin: 12px;
color: var(--dark);
font-family: 'Poppins', sans-serif;
}
.nav-link:hover{
color: var(--primary-color);
}
.search-box{
display: inline;
border-right: 1px solid var(--secondary);
padding-right: 12px;
margin-right: 10px;
}
.toggle-button{
font-size: 21px;
background-color: transparent;
border: none;
position: absolute;
right: 0;
margin: 8px 10px;
display: none;
}
.toggle-button:focus{
outline: none;
}
/* ------- .Navigation Menu ---------- */
/* ----------- Main Section ---------- */
#site-main{
margin-top: 4em;
}
#posts{
margin-bottom: 5em;
}
.grid{
margin: 1 auto;
row-gap: 20px;
}
.grid .grid-item{
width: calc(33.3333% - 20px);
margin-bottom: 3em;
}
/* ----------- .Main Section ---------- */
/* ----------- sticky ------- */
.sticky{
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
.sticky + .content{
padding-top: 60px;
}
/* ----------- .sticky ------- */
/* Media Query */
.row{
display: flex;
}
.col-3{
flex: 0 0 33.3333%;
max-width: 33.3333%;
padding-right: 35px;
}
.col-8{
flex: 0 0 70%;
max-width: 70%;
}
.col-4{
flex: 0 0 30%;
max-width: 30%;
}
#media (max-width : 1024px){
.row{
flex-wrap: wrap;
}
.col-3{
flex: 0 0 50%;
max-width: 50%;
}
.col-8{
flex: 0 0 100%;
max-width: 100%;
}
.col-4{
flex: 0 0 100%;
max-width: 100%;
}
}
#media (max-width : 992px){
.navbar{
flex-direction: column;
}
#site-main{
margin-top: 14em;
}
}
#media (max-width : 768px){
.grid .grid-item{
width: calc(50% - 20px);
border-top: 1px solid #dfdfdf;
}
.col-3{
flex: 0 0 100%;
max-width: calc(100% - 50px);
padding-top: 40px;
}
}
#media (max-width : 574px){
.toggle-button{
display: initial;
}
.collapse{
max-height: 0;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
}
.collapse .nav-link{
display: block;
text-align: center;
}
.search-box{
border-right: none;
}
.collapse-toggle{
max-height: 500px;
}
.grid .grid-item{
width: calc(100% - 20px);
border-top: 1px solid #dfdfdf;
}
#site-main{
margin-top: 6em;
justify-content: space-around;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TylerTeacher</title>
<!-- font awesome icons cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous" />
<!-- swiper slider css file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA=="
crossorigin="anonymous" />
<!-- custom style.css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header" class="shadow bg-light">
<nav class="container navbar">
<a href="/index.html" class="nav-brand text-dark">
TylerTeacher
</a>
<!-- toggle button -->
<button class="toggle-button">
<span><i class="fas fa-bars"></i></span>
</button>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
Home
Resources
Classes
Testimonials
Contact
</ul>
</div>
<!-- collapse on toggle button click -->
<div class="collapse">
<ul class="navbar-nav">
<div class="search-box">
<i class="fas fa-search"></i>
</div>
<i class="fab fa-facebook-f"></i>
<a href="#" class="https://www.youtube.com/channel/UCDN9p8e-UAaPxtzfoVJnLMw"><i
class="fab fa-youtube"></i></a>
<a href="https://www.instagram.com/tyler.s.teacher/" class="nav-link"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-tiktok"></i>
</ul>
</div>
</nav>
</header>
<!-- .Header -->
<!--main site-->
<main id="site-main">
<!-- Blog Post Section -->
<section id="posts">
<div class="container">
<div class="grid">
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Welcome to TylerTeacher.com
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around; ">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/grandmother-1822560_960_720.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Why online education is the future
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to overcome language anxiety
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/laptop-red-cup-coffee-notebook-pen-satchel-freephotoscc-thumb-2.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Podcasts are a great tool for language learners
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto" >
<div class="overflow-img">
<a href="#">
<img src="./Assets/man_studying_online.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
What makes some people better at learning languages?
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/negative-space-picnic-city-river-sunset-ben-duchac-thumb-1.jpg"
class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Tips for becoming a more confident communicator in English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/listen-1702648_960_720.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How listening can make you better at speaking English
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin: auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/Man_studying.jpg" class="img-fluid" alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
How to use online classes effectively
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
<!-- article -->
<div class="grid-item">
<article class="article" style="justify-content: space-around">
<div class="card" style="margin:auto">
<div class="overflow-img">
<a href="#">
<img src="./Assets/education_tiles.jpg" class="img-fluid"
alt="Responsive image">
</a>
</div>
<div class="card-body text-center px-1">
<a href="#" class="text-title display-1 text-dark">
Coming soon
</a>
<p class="secondary-title text-secondary display-3">
<span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
<span><i class="far fa-comments text-primary"></i> 12</span>
</p>
</div>
</div>
</article>
</div>
<!-- .article -->
</div>
<div class="text-center">
<button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
</div>
</div>
</section>
<!-- .Blog Post Section -->
<!-- masonry libray for horizontal grid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
crossorigin="anonymous"></script>
<!-- swiper slider cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"
integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA=="
crossorigin="anonymous"></script>
<!-- custom javascript main.js file -->
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>

It is caused by the Masonry. You have to let the page finish loading before you initialize it. This worked for me
window.addEventListener('load', function(){
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
// remove preload if added
});
Optional: Whiles the page loads, you can add a preloader to hide the page's disorganised stucture.

What you're experiencing is due to the Masonry script calculating the dimensions of the grid based on its content. While loading the page your images don't have a width and height because the browser doesn't know what they look like. Masonry doesn't wait and will render your grid anyway.
A fix for this is to let the browser know in advance what the dimensions of the image will be. You can do this by adding a width and height attribute to your img tag containing the width and height in pixels.
<img src="your-image.jpg" class="img-fluid" width="480" height="720" alt="" />
Alternatively you could wait for all images in your grid to load before initializing the Masonry script.
// Loads a single image.
const loadImage = src => new Promise(resolve => {
const image = new Image();
image.onload = () => resolve();
image.src = src;
});
// Get the container with all images.
// Loop over each image and wait for all of them to load.
async function allImagesLoaded(selector) {
const container = document.querySelector(selector);
if (container === null) {
return;
}
const images = container.querySelectorAll('img');
return Promise.all([...images].map(
src => loadImage(src)
));
}
// Load all images inside #posts .grid.
allImagesLoaded('#posts .grid').then(() => {
new Masonry("#posts .grid", {
itemSelector : '.grid-item',
gutter : 20
});
});

How do I toggle the same fa fa icons on multiple buttons?

I want to make 4 buttons that do the same thing. When you click on the button the heart is filled and when you click again the heart is empty. But only the first button works. When I click on the other three button the first button goes off. I don't really understand what I need to do. How can I make all 4 buttons to work?
var btn = document.getElementById('btn');
function Toggle() {
if (btn.classList.contains("far")) {
btn.classList.remove("far");
btn.classList.add("fas");
}else{
btn.classList.remove("fas");
btn.classList.add("far");
}
}
document.querySelectorAll('button').forEach((btn) => btn.addEventListener('click', Toggle, (e) => { console.log('hello'); }))
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght#300;400;600;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title {
text-align: center;
padding: 1.8rem;
font-size: 2rem;
color: black;
font-family: 'Lexend Mega', sans-serif;
}
.populair-movies {
justify-content: center;
display: flex;
}
.populair-movies h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
padding-top: 0.2rem;
padding-bottom: 0.7rem;
}
.populair-movies p {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
.stars {
padding-bottom: 0.3rem;
}
.populair-movies .card-container .card {
height: 300px;
width: 200px;
margin: 0.5rem;
}
.populair-movies .card-container .card img {
height: 100%;
width: 100%;
}
.styling-btn {
margin-top: 1rem;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
background: blue;
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
border: none;
color: #e8efff;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.styling-btn i {
margin-right: 0.7rem;
margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populair Movies</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- css file -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h2 class="title">POPULAIR MOVIES</h2>
<section class="populair-movies">
<div class="card-container">
<div class="card">
<img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
<div class="info">
<h3>The Midnight Sky</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,6
</p>
</div>
<p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk#._V1_.jpg" alt="Escape from Pretoria">
<div class="info">
<h3>Escape from Pretoria</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
6,8
</p>
</div>
<p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc#._V1_.jpg" alt="Kadaver">
<div class="info">
<h3>Kadaver</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,1
</p>
</div>
<p>2020 ‧ Drama/Horror ‧ 1 u 26 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
<div class="info">
<h3>The Dig</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
7,2
</p>
</div>
<p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
</p>
<button class="styling-btn"><i id="btn" class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body></html>

You're using the same id in all the icons. JavaScript is only getting the element with the first id.
function toggle(index) {
const icon = document.querySelectorAll("button i")[index];
icon.classList.toggle("far");
icon.classList.toggle("fas");
}
document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function() {
toggle(index);
}));
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght#300;400;600;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title {
text-align: center;
padding: 1.8rem;
font-size: 2rem;
color: black;
font-family: 'Lexend Mega', sans-serif;
}
.populair-movies {
justify-content: center;
display: flex;
}
.populair-movies h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 1.2rem;
padding-top: 0.2rem;
padding-bottom: 0.7rem;
}
.populair-movies p {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
.stars {
padding-bottom: 0.3rem;
}
.populair-movies .card-container .card {
height: 300px;
width: 200px;
margin: 0.5rem;
}
.populair-movies .card-container .card img {
height: 100%;
width: 100%;
}
.styling-btn {
margin-top: 1rem;
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
background: blue;
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
border: none;
color: #e8efff;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.styling-btn i {
margin-right: 0.7rem;
margin-left: 0.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populair Movies</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- css file -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h2 class="title">POPULAIR MOVIES</h2>
<section class="populair-movies">
<div class="card-container">
<div class="card">
<img src="https://www.moviemeter.nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky">
<div class="info">
<h3>The Midnight Sky</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,6
</p>
</div>
<p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk#._V1_.jpg" alt="Escape from Pretoria">
<div class="info">
<h3>Escape from Pretoria</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
6,8
</p>
</div>
<p>2020 ‧ Drama/Thriller ‧ 1 u 46 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc#._V1_.jpg" alt="Kadaver">
<div class="info">
<h3>Kadaver</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
5,1
</p>
</div>
<p>2020 ‧ Drama/Horror ‧ 1 u 26 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://m.media-amazon.com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig">
<div class="info">
<h3>The Dig</h3>
<div class="stars">
<p>
<i class="fas fa-star"></i>
7,2
</p>
</div>
<p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m
</p>
<button class="styling-btn"><i class="far fa-heart"></i>Add to list</button>
</div>
</div>
</div>
</section>
<script src="js/script.js"></script>
</body></html>

Unable to obtain the id of the element using v-if

I am new to VueJS. I am developing an application using VueJS and Bootstrap. There is a div which I wish to render based on a condition.
I have been trying to use v-if on the div so that once the condition is true, the data property is set to true and the div gets displayed.
My code looks like this:
export default {
data(){
return {
detailsSectionOpen: false
}
},
methods:{
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
},
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="content" style="padding-top: 3px;">
<div class="row">
<div class="col-xl-12 col-md-6" id="show" style="padding-left: 0px;padding-right: 0px;">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">Files</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px; margin-left: 15px; ">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Recent</p>
</div>
<!-- Recently used files section begins here -->
<div class="row" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6" v-for="(file,index) in recentFiles">
<stats-card>
<div slot="header" class="header-rectangle" #contextmenu.prevent="$refs.menu.open">
<img :src="file.source" style=" height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" #contextmenu.prevent="$refs.menu.open" style="display: flex; flex-direction: column; justify-content: center;">
<div class="row" >
<div class="col-xl-9" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>{{file.name}}</span>
</div>
<div class="file-size-style" >
<span>{{file.size}} MB</span>
</div>
</div>
<div class="col-xl-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
<div v-show="!file.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
<i class='fas fa-users' id="image"></i>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<vue-context ref="menu">
<ul style="font-family: 'Source Sans Pro'; font-size: 15px; font-weight: normal; font-style: normal; text-decoration: none; text-align: left; ">
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fa fa-file' id="context-menu-icon"></i><span class="context-menu-span">Preview</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-share-alt" id="context-menu-icon"></i><span class="context-menu-span">Share</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="fa fa-copy" id="context-menu-icon"></i><span class="context-menu-span">Copy/Move</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='far fa-star' id="context-menu-icon"></i><span class="context-menu-span">Add to Starred</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-cloud-download-alt' id="context-menu-icon"></i><span class="context-menu-span">Download</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-pencil-alt' id="context-menu-icon"></i><span class="context-menu-span">Rename</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class='fas fa-tag' id="context-menu-icon"></i><span class="context-menu-span">Tags</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-trash-alt" id="context-menu-icon"></i><span class="context-menu-span">Delete</span></li>
<li class="context-menu-item" #click="onClick($event.target.innerText)"><i class="far fa-chart-bar" id="context-menu-icon"></i><span class="context-menu-span">Access Stats</span></li>
</ul>
</vue-context>
</div>
<!-- Folder section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Folders</p>
</div>
<div v-if="gridView === true" class="row seven-cols" style="padding-right: 15px; padding-left: 15px;">
<div class="col-md-1" id="no-padding" v-for="(folder,index) in folders">
<stats-card>
<div slot="header" :data-key="index" class="folder-rectangle" #click="folderSelected=index" :class="{'folder-selected':folderSelected==index}">
<div class="row">
<div class="col-xl-3" style="padding-right: 15px;padding-left: 15px;">
<div class="clearfix" v-if="folder.shared" style="margin-top: 8px; margin-left: 10px;">
<i class="material-icons" id="folder-image"></i>
</div>
<div class="clearfix" style="margin-top: 8px; margin-left: 10px;" v-else>
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-xl-9" style="padding-left: 7px;padding-right: 7px;padding-top: 7px;padding-bottom: 7px;">
<div class="file-name-style" style="padding-right: 5px; padding-left: 5px;">
<span>{{folder.name}}</span>
</div>
<div class="file-size-style" style="padding-bottom: 5px;padding-top: 10px;padding-left: 5px;">
<span>{{folder.numFiles}} files</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- Files section begins here -->
<div v-if="gridView === true" style="width: 280px; height: 30px; margin-left: 15px;">
<p style="color: #424242; font-family: 'Source Sans Pro'; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; text-align: left;">Files</p>
</div>
<div v-if="gridView === true" class="row" style="padding-bottom: 15px; margin-bottom: 20px; padding-right: 15px; padding-left: 15px;">
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://image.flaticon.com/icons/png/512/136/136526.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<i class="far fa-file-image" style=" height: 50px; margin-top: 50px; color:#4CAF50; font-size: 40px;"></i>
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="http://www.dap.asn.au/wp-content/uploads/2017/01/pdfLogo.png" style=" height: 50px; margin-top: 50px;">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
<div class="col-md-5ths col-xs-6">
<stats-card>
<div slot="header" class="header-rectangle">
<img src="https://www.cleverducks.com/wp-content/uploads/2018/01/Excel-Icon.png" style="height: 50px; margin-top: 50px">
</div>
<div slot="footer" class="footer-rectangle" style="display: flex;
flex-direction: column;
justify-content: center;">
<div class="row" >
<div class="col-xl-12" style="display: flex;flex-direction: column;justify-content: center;">
<div class="file-name-style">
<span>File Name</span>
</div>
<div class="file-size-style" >
<span>1 MB</span>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>
<!-- List View section begins here -->
<list-view :gridView="gridView" :folders="folders">
</list-view>
</div>
</div>
<!-- File Details section begins here -->
<div v-if="detailsSectionOpen" id="details" ref="detailsSection">
<div class="content">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="pull-right">
<button class="btn" #click="closeDetailsSection">
<i class="fa fa-close">
</i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr-details">
</div>
<div class="container-fluid">
<div style="width: 280px; height: 30px;">
<p style="color: #424242;width: 239px;height: 30px;font-family: 'Source Sans Pro'; font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-align: left;">Details</p>
</div>
<div class="row">
<div class="col">
<div style="height: 100px; width: 100px; margin: 0 auto" >
<i class="fas fa-folder" style="font-size: 100px; color: #878D99"></i>
</div>
<div style="max-width: 100%;">
<ul style="list-style: none;padding-left: 20px;padding-right: 20px; padding-top: 60px;padding-bottom: 60px;" class="details-ul">
<li>Shared with: ~ 15 people</li>
<li>Name: Folder Name</li>
<li>Type: Folder</li>
<li>Files: 20</li>
<li>Location: Home</li>
<li>Owner: John</li>
<li>Created: March 10, 2018</li>
<li>Opened: March 10, 2018, 7 PM by Jenny</li>
<li>Modified: March 10, 2018, by me</li>
<li>Downloaded: March 10, 2018, by John </li>
<li>Retention Policy: None</li>
<li>Tags: Add</li>
<li>Description: Add</li>
</ul>
</div>
<div style="height: 100px; width: 100px; margin: 0 auto" >
<button class="plus-circle-btn"><i class="fa fa-plus-circle"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am able to see the div being rendered on the DOM when the method showDetails() is called.
But, when I try getting the element by its ID, the result is null. So, document.getElementById('details') returns null.
I think it has something to do with the reactivity in Vue and how v-if works. Can someone please help me resolve this issue?
Thank you!

v-if adds/removes an element from the DOM. You can't show or hide something that doesn't exist in the DOM.
Trying to hide or show another DOM element based on a different element's v-if doesn't make any sense as you could simply add another v-if="condition" and it would work the same way.
If you really can't add another check to the DOM then you should Watch the same data element in VUE that the if is watching...
Do this by adding a class as that's better for toggles since ID's are only supposed to be used once per page. You can add this class anywhere in the DOM based on the Vue state.
<div v-if="visibleCheck">
This element will be visible if visibleCheck = true
</div>
<div id="anotherElement" v-bind:class="visibleCheck ? 'isVisble' : 'notVisible'">
If visibleCheck = true this div will have a class .isVisible
If visibleCheck = false/null this div will have a class .notVisible
</div>
Then do something with those classes:
.isVisible {
display:block;
}
.notVisible {
display:none;
}
The whole point of Vue is NOT to watch the DOM for changes but to base the DOM changes on the data
Using your example:
<div id="whatever" v-bind:class="detailsSectionOpen ? 'col-xl-9' : 'col-xl-12'">
stuff
</div>

You can try using $nextTick, it will be called after the component re-render:
showDetails() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.add("col-xl-3");
showSection.classList.add("col-xl-9", "col-md-6");
showSection.classList.remove("col-xl-12", "col-md-6");
})
}
}

Display bootstrap wells on left and right side of the page

I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?

You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen

I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>