How to align three images on a row - html

Question

There will be a certain amount of images in database which is unknown when this page is being redirected, which means I can't set the amount of div accordingly. What I am after is no matter how many images are there, I would like to display it in a manner of three images in a row, the fourth one will start from the left side of a new row. I try to use col-md-4 try to align three images on a row, but the fourth image is either on the center or right side of the next row ?
This is what I am after. Let's say there are 5 images in database, I would like it to be displayed like this
<div class="row col-md-12">
#foreach($images as $image)
<div class="col-md-4">
<img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
<div class="btn btn-primary edit-image-btn">Edit</div>
<div class="btn btn-danger delete-image-btn">Delete</div>
</div>
#endforeach
</div>

Answer 1

Problem
The height of your first image is greater than the height of images two and three, this means that when the fourth image is added it is added on a new line, but where there is first available vertical space.
You can actually incorporate both of the solutions below simultaneously, clearfix is the most appropriate and versatile, but there are some design benefits from the alternative solution.
clearfix Solution
Adding a div with .clearfix will force the grid system to create what visually appears to be a new row. This is the best solution, you can compare the index of the image and add a clearfix div every third image.
Alternative Solution
You could place your images as backgrounds to a div (rather than using img tags) and force these divs to be a set height using CSS. this isn't solving your problem, it is just avoiding it.
If you set the background-size: cover; background-position: center center; then all images would cover the available space, although you would lose some of the image this is the best solution design wise (my preference).
If having all of the image displayed is important then use background-size: contain;.
.col-xs-4 {
padding:4px;
}
.image-div {
height: 100px;
background-size:cover;
background-position: center center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Ej0hUpn6wbrOTJtRExp8jvboBagaz+Or6E9zzWT+gHCQuuZQQVZUcbmhXQzSG17s" crossorigin="anonymous">
<h4>Current Problem</h4>
<div class="container">
<div class="col-md-12 row">
<div class="col-xs-4">
<img src="https://dummyimage.com/600x600/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" alt="alternative" width="100%" height="auto" >
</div>
</div>
</div>
<h4>`clearfix` Solution</h4>
<div class="container">
<div class="col-md-12 row">
<div class="col-xs-4">
<img src="https://dummyimage.com/600x600/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" width="100%" height="auto">
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<img src="https://dummyimage.com/600x400/000/fff" alt="alternative" width="100%" height="auto" >
</div>
</div>
</div>
<h4>Alternative Solution</h4>
<div class="container">
<div class="col-md-12 row">
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x600/000/fff'); " >
</div>
</div>
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
</div>
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
</div>
<div class="col-xs-4">
<div class="image-div" style="background-image:url('https://dummyimage.com/600x400/000/fff'); " >
</div>
</div>
</div>
</div>

Answer 2

You should not use row and col class names in the same div:
<div class='row'>
<div class="col-md-12">
#foreach($images as $image)
<div class="col-md-4">
<img src="{{ $image->image }}" alt="{!! $image->title !!}" width="50%" height="auto" >
<div class="btn btn-primary edit-image-btn">Edit</div>
<div class="btn btn-danger delete-image-btn">Delete</div>
</div>
#endforeach
</div>
</div>

Answer 3

Check below code and updated fiddle https://jsfiddle.net/dgmrsnb6/
<div class="container">
<div class="row images-wrapper">
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-md-4 col-sm-4">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
</div>
</div>

Answer 4

<div class="row col-md-12">
#foreach($images as $image)
<div class="col-md-3">
<img src="{{ $image->image }}" alt="{!! $image->title !!}" width="100" height="auto" >
<div class="btn btn-primary edit-image-btn">Edit</div>
<div class="btn btn-danger delete-image-btn">Delete</div>
</div>
#endforeach
</div>