Why are the rows in my Bootstrap grid overlapping? - html

Hoping someone can help me figure out what I am missing. Right now, the rows are overlapping. I want the two rows to be spaced out appropriately, based off of the size of the images (they are all same size). I have no idea what I am missing to make this respond the way I want it to.
Code
img {
max-width: 100%;
-webkit-backface-visibility: hidden;
}
.gallery-project-thumb {
position: relative;
}
.vert-pad {
padding-top: 30px;
padding-bottom: 30px;
}
.gallery-project-thumb img:first-child {
border: 8px solid #fff;
-webkit-box-shadow: 0 0 6px 0.5px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 6px .5px rgba(0,0,0,.5);
box-shadow: 0 0 6px 0.5px rgba(0,0,0,.5);
position: absolute;
z-index: 3;
-webkit-backface-visibility: hidden;
display: block;
}
.gallery-project-thumb img:nth-child(2) {
z-index: 2;
margin-bottom: 15px;
border: 8px solid #fff;
-webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
position: absolute;
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-backface-visibility: hidden;
}
.gallery-project-thumb img:nth-child(3) {
z-index: 1;
margin-bottom: 15px;
border: 8px solid #fff;
-webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
position: absolute;
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility: hidden;
}
<div class="row vert-pad gallery-project-container" style="margin-left: 75px; margin-right: 20px;">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
</div>
<div class="row vert-pad gallery-project-container" style="margin-left: 75px; margin-right: 20px;">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
</div>
</div>


Because the images are being absolutely positioned, the browser doesn't know how tall to make those element. If you set a height to the .gallery-project-thumb class as the height of the image you should be set
.gallery-project-thumb{
height: 300px;
}

Related

Text coming out of the card and overlay the image

I developed a bootstrap card, inside that bootstrap card I am putting another one.
My problem is that when I reduce the screen size the text comes out of the card and also overlays the image, how can I solve this?
Demo
code
<div class="card-deck cardsZone">
<div class="card myCards">
<div class="card-body">
<div *ngFor="let pr of ProgressDashTasks">
<div class="card mysmallCcards">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
</div>
<div class="col-sm-8">
<span class="brandName">MY PERCENTAGE</span>
<p class="subtitledash">New percentage</p>
</div>
</div>
<hr class="solid">
<div class="row">
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
</div>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>
Image Problem

On .cardsZone you have to use a relative width and not an absolute one. Use width: fit-content:
.cardsZone{
margin-top: 5%;
width: fit-content;
height: 70%;
margin-right: auto;
margin-left: auto;
}
.myCards{
background: #E7EAF180 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
}
.card-deck .card {
margin-left: 0px;
}
.mysmallCcards{
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
margin-top: 20px;
}
.card-header:first-child {
border-radius: calc(9px - 1px) calc(9px - 1px) 0 0;
}
.mycardHeader{
background-color: white;
}
.imgDash{
width: 40px;
height: 40px;
border-radius: 8px;
}
.brandName{
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 22px;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 0px;
font-weight: re;
}
.subtitledash{
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 13px;
font-weight: bold;;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.imgusersDash{
width: 24px;
height: 24px;
transform: matrix(1, 0, 0, 1, 0, 0);
border-radius: 8px;
margin-left: 15px;
}
hr.solid {
border-top: 1px solid #999;
width:100%
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-deck cardsZone">
<div class="card myCards">
<div class="card-body">
<div *ngFor="let pr of ProgressDashTasks">
<div class="card mysmallCcards">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
</div>
<div class="col-sm-8">
<span class="brandName">MY PERCENTAGE</span>
<p class="subtitledash">New percentage</p>
</div>
</div>
<hr class="solid">
<div class="row">
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
</div>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>

columns are not taking correct width on small screens

I am making a grid system with Bootstrap 3.3.7. The width of the container is 1200px.
When I resize the browser window to < 768 px the columns on "Grid 1 + 2 + 3" are not reacting to the col-xs-xx i set. See the demo here.
When I set the columns to have a width on800 px instead of 600 px the width is correct on smaller screens, but the columns do not fit on bigger screens, unless I set a very big height on the columns.
How can I set the columns to get the correct width when the screen is below 768 px?
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
/*margin-bottom: 20px;*/
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
.margin_bottom{
margin-bottom:10px;
}
.row [class*="col-"]{
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
<div class="container">
<h3>Grid 1</h3>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 margin_bottom">
<img src="http://placehold.it/600x300" alt="5" class="img-responsive"></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 margin_bottom">
<img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-6 col-sm-6 margin_bottom">
<img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Grid 2</h3>
<div class="row">
<div class="col-xs-12 col-sm-4 margin_bottom">
<img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/400x245" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 margin_bottom">
<img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
</div>
</div>
<h3>Grid 3</h3>
<div class="row">
<div class="col-xs-3 col-sm-3 margin_bottom">
<!-- I can change the width to 800px to fit the xs viewport. But then the height on the column om sm viewport have to be 1020 px, which is way to high after my opnion -->
<img src="http://placehold.it/300x610" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-9 col-sm-6 margin_bottom">
<img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-12 col-sm-3 margin_bottom">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x300" alt="5" class="img-responsive"></img>
</div>
<div class=" col-xs-6 col-sm-12">
<img src="http://placehold.it/300x300" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
</div>

Grids are reacting as they should be. When col-xx-xx are nested, they assume their parent containers width to be 100%. You'll find more info on bootstrap doc page See Two columns with two nested columns.
Your html code has lot of redundant html divs. For ex. your grid 1 can be like this
<h3>Grid 1</h3>
<div class="row">
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 margin_bottom">
<img src="http://placehold.it/600x300" alt="5" class="img-responsive"></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 margin_bottom">
<img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-6 col-sm-6 margin_bottom">
<img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
Your dont need both col-xs-6 col-sm-6, just col-xs-6 will get job done.

Columns are not holding margin

I am working with Bootstrap 3.3.7. I cannot understand why my smaller columns are not holdning margin with the bigger columns. See the demo here.
I have a 10px margin between the columns.
Fx. there first row have the following columns: 600x410px - 600x200px 300x200px.
So 200px + 200px + 10px margin = 410 height. Therefore I gave the big column a height of 410px.
Why are they not aligning then?
/* Card and Button */
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
/*margin-bottom: 20px;*/
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
.margin_bottom{
margin-bottom:10px;
}
.row [class*="col-"]{
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {width:100%;}
<div class="container">
<!--<h3>Grid 1</h3>-->
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 margin_bottom">
<img src="http://placehold.it/600x200" alt="5" class="img-responsive"></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-6 col-sm-6">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<h3>Grid 2</h3>-->
<div class="row">
<div class="col-sm-4 margin_bottom">
<img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
</div>
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
<div class="col-sm-4 margin_bottom">
<img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
</div>
</div>
<!--<h3>Grid 3</h3>-->
<div class="row">
<div class="col-sm-3 margin_bottom">
<img src="http://placehold.it/300x410" alt="5" class="img-responsive"></img>
</div>
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
</div>
<div class="col-sm-3 margin_bottom">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
<div class=" col-xs-6 col-sm-12">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
<!--<h3>Grid 4</h3>-->
<div class="row">
<div class="col-sm-3 margin_bottom">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
<div class=" col-xs-6 col-sm-12">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive"></img>
</div>
<div class="col-sm-3 margin_bottom">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
<div class=" col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
</div>

Set .img-responsive { height: 100%; } instead of .img-responsive {width:100%; }. please check the below working example. hope it helps :)
and as per suggestion setting width in smaller screens: #media (max-width: 768px) { .img-responsive { width: 100%; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Card and Button */
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
}
</style>
<div class="container">
<!--<h3>Grid 1</h3>-->
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 margin_bottom">
<img src="http://placehold.it/600x200" alt="5" class="img-responsive" />
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
<div class="col-xs-6 col-sm-6">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--<h3>Grid 2</h3>-->
<div class="row">
<div class="col-sm-4 margin_bottom">
<img src="http://placehold.it/400x510" alt="5" class="img-responsive" />
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/400x250" alt="5" class="img-responsive" />
</div>
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/400x250" alt="5" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4 margin_bottom">
<img src="http://placehold.it/400x510" alt="5" class="img-responsive" />
</div>
</div>
<!--<h3>Grid 3</h3>-->
<div class="row">
<div class="col-sm-3 margin_bottom">
<img src="http://placehold.it/300x410" alt="5" class="img-responsive" />
</div>
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
</div>
<div class="col-sm-3 margin_bottom">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
<div class=" col-xs-6 col-sm-12">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
</div>
</div>
</div>
<!--<h3>Grid 4</h3>-->
<div class="row">
<div class="col-sm-3 margin_bottom">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
<div class=" col-xs-6 col-sm-12">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
</div>
<div class="col-sm-3 margin_bottom">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
<div class=" col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>

4 column does not align correct with bootstrap 3.3.7

I am trying to make a grid containing a banner and 4 columns. The example can be seen here.
The space between the lines are 10px, but I cannot make the boxes fit so they are following the line in the grid. When I look at the code it is looking correct to me. So I was thinking it could be the size of the pictures the was to small. But changing the size does not solve my problem.
Does anybody knows how I can make my grid elements fit the below lines on the picture?
My code:
(I have cut away some HTML code there is not relevant for the question)
/* Card and Button */
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
/*margin-bottom: 20px;*/
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
/* GRID ELEMENTS MEDIA QUERIES */
#media only screen and (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
.small-padding.bottom {
padding-bottom:10px;
}
div {
background-color: #fff;
padding-left: 2px;
padding-right: 2px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
}
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
#media (min-width: 991px) {
.medium-padding.top {
padding-top:10px;
}
.medium-padding.bottom {
padding-bottom:10px;
}
.medium-padding.left {
padding-left:5px;
}
.medium-padding.right {
padding-right:5px;
}
}
<div class="container">
<!-- Col md 3 - 3 - 3 - 3 + Col sm 6 -6 -->
<div class="row">
<div class="col-sm-6 col-md-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding bottom left medium-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding left bottom medium-padding right bottom left">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding left bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg" class="img-responsive"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 small-padding right bottom ">
<img src="http://placehold.it/600x400" alt="1" class="img-responsive center-block"></img>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6 small-padding right bottom">
<img src="http://placehold.it/300x205" alt="2" class="img-responsive"></img>
</div>
<div class="col-xs-6 small-padding right left bottom">
<img src="http://placehold.it/300x205" alt="3" class="img-responsive"></img>
</div>
<div class="col-xs-6 small-padding right bottom">
<img src="http://placehold.it/300x205" alt="4" class="img-responsive"></img>
</div>
<div class="col-xs-6 small-padding right left bottom">
<img src="http://placehold.it/300x205" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>

Please don't use the class "col-" with the class "row" for same element.
Like this.
<div class="row col-sm-6">
Because class name "row" had margin-right:-15px; and margin-left:-15px; If you use class name "col-" it will affect the row style with padding-right:15px; and padding-left:15px;
This is the main reason for this issue, Please add one more div structure like following method
<div class="col-sm-6">
<div class="row">
</div>
</div>
Output:

Please remove all style you write for col-- and row. Use this style for that
.margin_bottom{margin-bottom:10px;}
.row [class*="col-"]{ padding-left: 5px; padding-right: 5px; }
.row { margin-left: -5px; margin-right: -5px; }
And use this html code
<div class="row">
<div class="col-sm-6 col-md-3 margin_bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 margin_bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 margin_bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 margin_bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg" class="img-responsive"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x400" alt="1" class="img-responsive center-block"></img>
</div>
<div class=" col-sm-6">
<div class="row">
<div class="col-xs-6 margin_bottom">
<img src="http://placehold.it/300x205" alt="2" class="img-responsive"></img>
</div>
<div class="col-xs-6 margin_bottom">
<img src="http://placehold.it/300x205" alt="3" class="img-responsive"></img>
</div>
<div class="col-xs-6 margin_bottom">
<img src="http://placehold.it/300x205" alt="4" class="img-responsive"></img>
</div>
<div class="col-xs-6 margin_bottom">
<img src="http://placehold.it/300x205" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
Output:

There are a bunch of problems with your code.
One of them is that you use BS3 and not 4. BS3 is using float which is a bad practice. Please use BS4 with flex. Everything is much easier.
Another one is that you use 2 completely different classes on the same element. row and col- should never be used on the same element. In your case you need row inside the column.
I changed that in your html and added some css at the top of the file. This should help you achieve what you want.
Again i stress out that you should use BS4.
/* Card and Button */
.row.mx-0 {
margin-left:0;
margin-right:0;
}
.row .col-sm-6.no-padding {
padding-right:0;
padding-left:0;
}
.row .col-sm-6.no-bottom {
padding-bottom:0;
}
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
/*margin-bottom: 20px;*/
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
/* GRID ELEMENTS MEDIA QUERIES */
#media only screen and (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
.small-padding.bottom {
padding-bottom:10px;
}
div {
background-color: #fff;
padding-left: 2px;
padding-right: 2px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
}
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
#media (min-width: 991px) {
.medium-padding.top {
padding-top:10px;
}
.medium-padding.bottom {
padding-bottom:10px;
}
.medium-padding.left {
padding-left:5px;
}
.medium-padding.right {
padding-right:5px;
}
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- Col md 3 - 3 - 3 - 3 + Col sm 6 -6 -->
<div class="row">
<div class="col-sm-6 col-md-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding bottom left medium-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding left bottom medium-padding right bottom left">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding left bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg" class="img-responsive"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 small-padding right bottom no-bottom">
<img src="http://placehold.it/600x400" alt="1" class="img-responsive center-block"></img>
</div>
<div class="col-sm-6 no-padding">
<div class="row mx-0">
<div class="col-xs-6 small-padding right bottom">
<img src="http://placehold.it/300x205" alt="2" class="img-responsive"></img>
</div>
<div class="col-xs-6 small-padding right left bottom">
<img src="http://placehold.it/300x205" alt="3" class="img-responsive"></img>
</div>
<div class="col-xs-6 small-padding right bottom">
<img src="http://placehold.it/300x205" alt="4" class="img-responsive"></img>
</div>
<div class="col-xs-6 small-padding right left bottom">
<img src="http://placehold.it/300x205" alt="5" class="img-responsive"></img>
</div>
</div>
</div>
</div>
</div>

#MK-DK please never use row and col to-gether in a div. please check the below example for a working fix with minor changes to you html and css.
/* Card and Button */
.row.mx-0 {
margin-left: 0;
margin-right: 0;
}
.row .col-sm-6.no-padding {
padding-right: 0;
padding-left: 0;
}
.row .col-sm-6.no-bottom {
padding-bottom: 0;
}
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top: 10px;
}
.small-padding.bottom {
padding-bottom: 10px;
}
.small-padding.left {
padding-left: 5px;
}
.small-padding.right {
padding-right: 5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
/* GRID ELEMENTS MEDIA QUERIES */
#media only screen and (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
.small-padding.bottom {
padding-bottom: 10px;
}
div {
background-color: #fff;
padding-left: 2px;
padding-right: 2px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
}
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
#media (min-width: 991px) {
.medium-padding.top {
padding-top: 10px;
}
.medium-padding.bottom {
padding-bottom: 10px;
}
.medium-padding.left {
padding-left: 5px;
}
.medium-padding.right {
padding-right: 5px;
}
}
/* Custom css added to fix the margin */
#media (min-width: 768px) {
.row-small-gutters {
margin: 0 -5px !important
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- Col md 3 - 3 - 3 - 3 + Col sm 6 -6 -->
<div class="row">
<div class="col-sm-6 col-md-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding bottom left medium-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding left bottom medium-padding right bottom left">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 small-padding left bottom">
<div class="index-content">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg" class="img-responsive">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 small-padding right bottom ">
<img src="http://placehold.it/600x400" alt="1" class="img-responsive center-block">
</div>
<div class="col-sm-6">
<div class="row row-small-gutters">
<div class="col-xs-6 small-padding right bottom">
<img src="http://placehold.it/300x205" alt="2" class="img-responsive">
</div>
<div class="col-xs-6 small-padding right left bottom">
<img src="http://placehold.it/300x205" alt="3" class="img-responsive">
</div>
<div class="col-xs-6 small-padding right bottom">
<img src="http://placehold.it/300x205" alt="4" class="img-responsive">
</div>
<div class="col-xs-6 small-padding right left bottom">
<img src="http://placehold.it/300x205" alt="5" class="img-responsive">
</div>
</div>
</div>
</div>
</div>

Your HTML structure should be like
<div class="container">
<div class="row">
<div class="col-sm-6"><img/></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"><img/></div>
<div class="col-sm-6"><img/></div>
<div class="col-sm-6"><img/></div>
<div class="col-sm-6"><img/></div>
</div>
</div>
</div>
</div>
Here is plunker code
https://plnkr.co/edit/KbUTxzDRvnQjNYsH4wpm?p=preview

Portfolio hover overlay not staying in image size

For my portfolio site I am making I have it so when you hover over the portfolio image it overlays the title and category. My problem is the overlay section is picking up the margin and padding for the spacing of the images in the grid. I cant get it to be whatever the portfolio image size is without removing the gutter between the images.
Example below:
Not sure how to fix this and any help would be appreciated.
.thumbnail {
padding: 0px !important;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 0px;
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
padding: 0px 0px 0px 0px;
transition: .5s ease;
background-color: rgba(136, 24, 38, 0.6);
}
.thumbnail:hover .overlay {
opacity: 1;
height: 100%;
width: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<section id="work" class="bg-grey">
<div class="container-fluid text-center">
<h2>MY WORK</h2>
<!--<h4>What we have created</h4>-->
<div class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>

When you use a absolute positioned element, always set the respective relative, position element. Let me know if you have any issues with the output.
The only CSS change is to the below class. Where I have added the property position: relative.
.thumbnail {
padding: 0px !important;
position: relative;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
So your absolute positioned div with class overlay will be positioned with respect to the div with class thumbnail
.thumbnail {
padding: 0px !important;
position: relative;
margin-bottom: 25px;
border: none;
border-radius: 0;
display: block;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 0px;
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
padding: 0px 0px 0px 0px;
transition: .5s ease;
background-color: rgba(136, 24, 38, 0.6);
}
.thumbnail:hover .overlay {
opacity: 1;
height: 100%;
width: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="work" class="bg-grey">
<div class="container-fluid text-center">
<h2>MY WORK</h2>
<!--<h4>What we have created</h4>-->
<div class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="http://www.google.com/">
<div class="thumbnail">
<img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
<div class="overlay">
<div class="text">
<h4>PORTFOLIO NAME</h4>
<p>category</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>