How to align three images on a row

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>

What is your expected result? Where do you want to place the forth image? — Itay Gal, Dec 05 '18 at 07:02
@ItayGal in the database there will be unknown amount of images, might be 5 or even 10. What i'm after is retrieving all these images then display them in 3 in a row — unknown, Dec 05 '18 at 07:04
OK, but that's what you got now. What about the second row? Do you want to place the forth image on the left? — Itay Gal, Dec 05 '18 at 07:05
@ItayGal what i got now is shown in the image above. Yes i wan the fourth one to start on next row on left side then the fifth one will be on right side of the fourth one and so on.... — unknown, Dec 05 '18 at 07:07
Please share your full generated code with css. The default behavior of bootstrap is to place the next item on the left. You probably have some css that changes that — Itay Gal, Dec 05 '18 at 07:11
Check this out https://jsfiddle.net/jnd54teb/ it's your code and it works — Itay Gal, Dec 05 '18 at 07:13
@ItayGal but wat u are doing, is that u set the number of div ahead. What im trying to do now is when this page is being redirected, i wont be knowing how many images are there in database — unknown, Dec 05 '18 at 07:17
The HTML and CSS doesn't take into account the number of images. Yes my example is static, but you can statically add images in the fiddle to check the behavior. — Itay Gal, Dec 05 '18 at 07:24
You have + sign in the picture please share the code with it. — Rarblack, Dec 05 '18 at 07:29

Oliver Trampleasure · Answer 1 · 2018-12-05T08:51:18.993

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>

i'm using @foreach to display all the images in my database, clearfix would not work — unknown, Dec 05 '18 at 07:12
You can count images inside your loop and add clearfix after 3 items each time — Itay Gal, Dec 05 '18 at 07:15
I've updated my answer to demonstrate the `clearfix` solution, and an alternative using divs with the image set as the background. — Oliver Trampleasure, Dec 05 '18 at 08:46

Rahul · Answer 2 · 2018-12-05T07:29:42.260

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>

score 0 · Answer 3 · answered Dec 05 '18 at 07:02

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>

Praveen Kumar Tripathi · Answer 4 · 2018-12-05T07:10:40.410

-1

<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>

edited Dec 05 '18 at 07:10

answered Dec 05 '18 at 07:00

Praveen Kumar Tripathi

282
3
21

How to align three images on a row

4 Answers4

Problem

clearfix Solution

Alternative Solution

`clearfix` Solution