Why am I getting random spaces between the image grid? - html

Question

After reading some threads, I managed to use the 'flex' class to remove the random blank spaces. But I've tried everything and now I am tired of this. I cannot get rid of these random spaces. Can anyone please point out what's going wrong in this?
.jumbotron {
margin-top: 80px;
padding-left: 40px;
background: #0d2d60;
color: white;
}
.image {
width: 100%;
height: 250px;
background-size: cover;
background-position: center;
}
.image1 {
background-image: url("https://source.unsplash.com/MYlvxeye9J0");
}
.image2 {
background-image: url("https://source.unsplash.com/KxCq-xveKcU");
}
.image3 {
background-image: url("https://source.unsplash.com/CKQG961UaWo");
}
.image4 {
background-image: url("https://source.unsplash.com/yySQipYW6Y4");
}
.image5 {
background-image: url("https://source.unsplash.com/ZtTkB3LmlNw");
}
.image6 {
background-image: url("https://source.unsplash.com/NdBsn0WQadw");
}
.image7 {
background-image: url("https://source.unsplash.com/lIa03ti94ec");
}
.image8 {
background-image: url("https://source.unsplash.com/k5wF1D_1rjo");
}
.image9 {
background-image: url("https://source.unsplash.com/Jd8hr75moLc");
}
body {
background: #081935;
}
.navbar {
background: #0d2d60;
color: white;
border-bottom: 0;
}
.flex {
display: flex;
flex-wrap: wrap;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><span aria-hidden="true" class="glyphicon glyphicon-camera"></span> IMGS</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Sign Up
</li>
<li>
Login
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container">
<h1><span class="glyphicon glyphicon-camera"></span> The Image Gallery</h1>
<p>A bunch of beautiful images that I didn't take</p>
</div>
<div class="container">
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image1"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image2"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image3"></div>
</div>
</div>
</div>
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image4"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image5"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image6"></div>
</div>
</div>
</div>
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image7"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image8"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image9"></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
Random Space between the Images
On screen size sm and x-sm
Works perfectly If the sceen size is large

Answer 1

I see a couple of problems:
1) Unrelated, loading jquery twice
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
[...]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
2) There is a problem in the code for small size (sm):
There are 3 divs with col-sm-6 and the sum of them should be 12 but 3x6 = 18, that's why third image gets on its own line.
3) For resolutions less than 768px wide or so, the col-md-* gets applied, i think you need xs cols if you need specific for this case.
More info in the docs: Boostrap 3 - Grid

Answer 2

I placed your code in jsfiddle using a bootstrap boiler plate and I'm assuming that you're wanting to remove the padding between the images?
By default Boostrap's .col- classes have padding-left and padding-right styles.
If you add this to your CSS it will remove the padding:
.col-lg-4, .col-md-4, .col-sm-6 {
padding: 0px;
}
However, this will change column padding sitewide. It is not recommended that you set global styles for columns. My recommendation would be to create a CSS class like "img-no-padding" and add that class to those columns.
Here is a jsfiddle demonstrating this.

Answer 3

Ok guys, I found an exact solution for this problem after some more research. #emsimpson It was not about the padding or margin. The problem was with the bootsrap 12 container grid.
As mentioned by #August : There is a problem in the code for small size (sm): There are 3 divs with col-sm-6 and the sum of them should be 12 but 3x6 = 18, that's why third image gets on its own line.
But I found a solution for that too. Flex deals with this problem.
.flex
{
display: flex;
flex-wrap: wrap;
}
As you can see, I have used the flex class but it didn't work. So I nested all of my columns under one single row with class flex and it tackled the problem. Bootstrap will know when to move the columns to the next row based on accumulated size.
<div class="container">
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image1"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image2"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image3"></div>
</div>
</div>
<!-- </div> -->
<!-- <div class="row flex"> -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image4"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image5"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image6"></div>
</div>
</div>
<!-- </div> -->
<!-- <div class="row flex"> -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image7"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image8"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image9"></div>
</div>
</div>
<!-- </div> -->
</div>
</div>