Bootstrap aligment issue - html

Question

I am trying to align some elements with bootstrap but I have strange gap between them. May I ask you for some advice ?
here is the final picture of the layout structure.
Here is my code until this moment
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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" />
<section class="product-list">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="catalog">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
<!-- catalog -->
</div>
<div class="col-md-3">
<div class="catalog">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
<!-- catalog -->
</div>
<div class="col-md-6">
<div class="laptops">
<img src="https://s27.postimg.org/ottosbaw3/example2.jpg" width="548" height="545" title="someText" alt="someText">
</div>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-3">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- product-list -->

Answer 1

Assuming I understood you correctly, you had too much going on with your html. There is absolutely no need to wrap individual images into lists.
View in full-screen, I did not add small display classes.
.margin{margin-bottom: 25px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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" />
<section class="product-list">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row margin">
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="laptops">
<img src="https://s27.postimg.org/ottosbaw3/example2.jpg" width="548" height="545" title="someText" alt="someText">
</div>
</div>
</div>
</div>
<!-- container -->
</section>
<!-- product-list -->

Answer 2

If I understood your question correct you are wondering about the gap between the elements. Bootstrap applies padding between columns called gutter. You might have to adjust your gutter padding and margins if you do not want a gap between your columns.
http://getbootstrap.com/css/#grid-options

Answer 3

Use two col-md-6 and inside the first col-md-6 use 4 col-md-6 with specific height and your problem is solved.