Complicated layout in bootstrap - html

Question

I made this complicated layout in bootstrap but, the point is when I remove to image below on the right side, all other images changing smaller.
How can I have this always same size?
I tried to work with numbers for width and height but the result was bad!
The number of images will change based on the titles so I might have 3 images or 2 or 5.
Please help me!
Before removing
After removing
.container-fluid .expo {
margin-left: 20px;
margin-right: 20px;
text-align: center;
float: none;
margin-bottom: 20px;
}
.expoinfo {
display: inline-block;
padding: 0;
}
.expoinfo h3 {
font-size: 22px;
margin-top: 0px;
padding-right: 20px;
text-align: left;
}
.bigimg {
padding: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
text-align: center;
}
.bigimg img {
border-radius: 0;
width: 100%;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
height: 100%;
}
.colthumb {
overflow: hidden;
margin: 0;
padding: 0;
float: left;
}
.thumbnail {
padding: 0;
margin: 0;
border-style: none;
}
.thumbnail img {
width: 100%;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
border-radius: 0;
border-style: none;
height: 100%;
}
<div class="container-fluid expo">
<div class="row expoinfo">
<section class="col-lg-10 col-lg-offset-1">
<h3>title</h3>
<div class="bigimg col-sm-6 col-md-6 col-lg-6">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/600x600/" alt="">
</a>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
</section>
</div>
</div>

Answer 1

The example you made didn't include bootstrap.css even though it was using bootstrap's classes.
See updated demo: https://jsfiddle.net/2aLdmvw4/

Answer 2

I just found my answer!
<div class="row">
<section class="col-lg-offset-2 col-lg-8">
<h3>title</h3>
<div class=" thumbcol col-md-4 col-lg-6">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image">
</div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"> </div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
</section>
</div>