We Keep Coding

How to remove gap between column ordering in Bootstrap

I have created 3 cards with 2 widgets in the sidebar. To make it responsive I have used bootstrap 4 column ordering.
Now the issue I'm facing is if I have 2 columns in one row and the right column is larger than the left column it shows space in-between card 1 and card 2 because card 1 is smaller than widget 1 or 2.
Can anyone help me how can I remove this gap?
Codeply link for better responsive viewing:
https://www.codeply.com/go/8cNp9dUyE5
My code preview is below:
.left-panel {
background: gray;
}
.box1,
.box2,
.box3 {
background: white;
height: 50px;
border: 1px solid red;
margin-bottom: 20px;
}
.right-sidebar, .bg-pink {
background: pink;
}
<div class="container">
<div class="row">
<div class="col-12 bg-pink">
<div class="row d-md-block">
<div class="left-panel col-md-8 order-0 float-left">
<div class="box1 mt-2"><p>Box 1</p></div>
</div>
<div class="right-sidebar col-md-4 order-3 float-left">Widget 1</div>
<div class="right-sidebar col-md-4 order-1 float-left">
<p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="left-panel col-md-8 order-3 float-left">
<div class="box2 mt-2 ">Box 2</div>
</div>
<div class="left-panel col-md-8 order-5 float-left">
<div class="box3 mt-2">Box 3</div>
</div>
</div>
</div>
</div>
</div>
Real-life example: https://prnt.sc/ouscan
enter image description here

It's not totally clear to me what you are trying to do here, but simplifying your classes will remove the gap:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>
You can re-introduce the ordering classes if needed, but this will at least remove the gap. Depending on what the contents of the boxes and the widgets are, you may want to include rows within the two columns also.
Edit
If you were to create a re-usable component that represents your right side bar this would be a bit cleaner, but here is an option:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="right-sidebar d-md-none">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar d-sm-none d-md-block col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>

To achieve this you might want to simplify your html and wrap your elements sort of like this:
<div class="container">
<div class="row">
<div class="col-md-8">
BOXES GO HERE
</div>
<div class="col-md-4">
SIDEBAR GOES HERE
</div>
</div>
</div>
The floats are battling what the bootstrap grid does automatically.
NEW This might be more what you are looking for using row-eq-height:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height" style="background-color: blue;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 1</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: red;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 2</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 2</p>
<p>Continue Widget 2</p>
<p>Widget 2 About to End</p>
<p>Widget 2 Ends</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: yellow;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 3</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 3</p>
</div>
</div>
</div>

event to modify sibling element

In a web page, I have a grid of divs. In each div are 3 divs, the 2nd is hidden, I want it so that when the user hovers over the 3rd div, the 1st div becomes hidden and the 2nd is displayed.
I'm using jquery.
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">dolly
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
<div class="container">
<div class="hello">hello</div>
<div class="who">kitty
</div>
<div onmouseover="whoOn();" onmouseout="whoOff();" class="hover">hover me</div>
</div>
Here's a Codepen

Your whoOn and whoOff methods can be combined like this:
<div class="container">
<div class="hello">hello</div>
<div class="who">sailor
</div>
<div onmouseover="whoBoth(this);" onmouseout="whoBoth(this);" class="hover">hover me</div>
</div>
Javascript:
function whoBoth(target) {
$(target).siblings(".hello, .who").toggle();
}

Boostrap can't handle very large screen resolution

Using LG WebOS Emulator, i try to view my webpage. But it seems Bootstrap cannot handle very large screen (as seen in screenshot, there're 2 white screen region in left and right side). The Resolution of Emulator is 1920x907
Screen Shot :
The HTML :
<div style="background-color:green" class="container">
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1">12</div>
</div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row">
<div class="col-lg-12"><div id="dimensions" align="center"></div></div>
</div>
</div>
is this Boostrap's GRID limitation ? if no, how to fix this ?
Thanks before...

Rather than using
<div ... class="container">
try
<div ... class="container-fluid">
I'm not sure which version of Bootstrap you're running with, but in 3.1 (I believe) you have accessibility to this class. As a more custom alternative you can create your own css class, like so,
.container-full {
margin: 0 auto;
width: 100%;
}
which would give you the same result.

Change your .container to .container-fluid
In bootstrap.css, there is a limit set for maximum width
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}

Bootstrap for large display defaults to 1170px:
http://getbootstrap.com/css/#grid-options
However, you can make a customized build here to define your own default behavior:
http://getbootstrap.com/customize/#container-sizes

Bootstrap properties for large screens are limited to 1170 px and therefore you need to either manipulate the code yourself or either download Bootstrap XL grid classes in a CSS file here;
Bootstrap XL

Jquery Hide show toggle on DIVs

Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});

Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.

Bootstrap 3 grid system - "cells" are expandable in height, but it shifts the entire next row down

I have this page where you click on a text block, the box opens comments below it. The row below it shifts down then. Problem is that ALL columns in the row below shift down, which creates a ton of whitespace.Only 1 should shift down (the one below the expanded cell). Is there a way to do this with bootstrap 3?

Yes, you need to change the layout of your grid. you wouldn't lay them out 3 across to a row, you would lay them out going down in columns.
<div class="row">
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
<div class="col-lg-6">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
[here's where to put the picture of
the car spanning 2 columns, so to speak]
</div>
</div>
</div>
<div class="col-sm-3">
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
<div class="idea-block"> ... </div>
<div style="display: none;" class="comment-area"> ... </div>
</div>
</div>
Make sense?