How to put images next to eachother

Question

.boxGallery {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.gallery {
  min-width: 320px;
  width: 50%;
  margin: 12px;
  float: left;
}

.gallery img {
  width: 100%;
  height: auto;
  padding: 5px;
  border-radius: 12px;
}

.desc {
  padding: 15px;
  text-align: center;
}

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

I am trying to make a photo gallery. The thing is that I can't get the images to be next to eachother. So what I want is: I want a title above each section of photos, that section has to be centered and multiple images should be able to shit next to eachother accordingly to the size of the page. That last thing is what I can't get to work (screenshot). I don't really know how I can fix this. Anyone any ideas?

SCREENSHOT

score 0 · Answer 1 · answered Oct 23 '18 at 20:40

If you have basic knowledge of Bootstrap. You can use the following example to make Photo Gallery. https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_thumbnail2&stacked=h

Another Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="row">
    <div class="col-md-4">
  <h2>Rounded Corners</h2>
  <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>            
  <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
  </div>
  <div class="col-md-4">
  <h2>Rounded Corners</h2>
  <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>            
  <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
  </div>
  <div class="col-md-4">
  <h2>Rounded Corners</h2>
  <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>            
  <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
  </div>
  <div class="col-md-4">
  <h2>Rounded Corners</h2>
  <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>            
  <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
  </div>
  <div class="col-md-4">
  <h2>Rounded Corners</h2>
  <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>            
  <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
  </div>
</div>
</div>

</body>
</html>

score 0 · Answer 2 · answered Oct 23 '18 at 22:22

I think that you need to use max-width for your flex item widths, instead on min-width. I've included extra images in the snippet below to demonstrate the example a bit better. If you run it and expand to full page on a wide enough screen, all the images appear on the same row, but they will collapse underneath each other when you reduce the screen size.

.boxGallery {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.gallery {
  max-width: 320px;
  width: 50%;
  margin: 12px;
  float: left;
}

.gallery img {
  width: 100%;
  height: auto;
  padding: 5px;
  border-radius: 12px;
}

.desc {
  padding: 15px;
  text-align: center;
}

<div class="desc">
  <p>First Title and Gallery</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

</div>

How to put images next to eachother

2 Answers2