Align images like Bootstrap - html

Question

I want to align my images like bootstrap, I can't do it with bootstrap because user have the option to resize the images and using Bootstrap class "col-md, col-xs, etc." user can't resize the image width, I tried creating a div with width:100% and then I add width:25% to each image (I want 4 images per row), and the image is in the correct size but not in the correct position.
This is what I have at the moment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<h2>Without Bootstrap</h2>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
</div>
Here is an example of what I want vs what I have
Code
Thanks in advance.

Answer 1

If you add a class to your divs that contain the images, you can use:
display: inline-block;
I added CSS to your file:
.blockRow {
display: inline-block;
padding-right: 2.2em;
}
and HTML:
<div class="container">
<h2>With Bootstrap</h2>
<div class="row">
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
<hr />
<h2>Without Bootstrap</h2>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
You'll have to play around with the padding to get it how you want it to look: http://codepen.io/anon/pen/pEobEg