How to coclocar a "gallery" in a modal?

Question

I’m trying to make a modal that when you click a photo gallery appears, with two columns but that stay centered and spaced, and also that the images get bigger, the way I did it was like this

        <button class="btn btn-info centro" type="submit" data-toggle="modal" data-target="#exampleModalLong3">Saiba mais</button>
		<div class="modal fade" id="exampleModalLong3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle3" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle3">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
	    <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
        <img class="col-lg-4" src="img/foto.ss1.jpg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You can divide the 2-to-2 images in each row with an even spacing by removing the standard padding of the modal body with the class .p-0 and add a bottom padding with .pb-3:

<div class="modal-body p-0 pb-3">

Then put the styles and media into your CSS:

#exampleModalLong3 .modal-body img{
   margin: 15px 0 0 15px;
   width: calc(50% - 23px);
   float: left;
}

@media only screen and (max-width: 991px) {
   #exampleModalLong3 .modal-body img{
      width: calc(100% - 30px);
   }
}

This will scale the images evenly within the body of the modal, with perfect spacing. When the resolution is less than 992px, each image will occupy an entire line within the modal (based on 992px because of class .col-lg-4 which you used, but you can change to the resolution you want). Run the snippet below in full screen for better viewing:

#exampleModalLong3 .modal-body img{
   margin: 15px 0 0 15px;
   width: calc(50% - 23px);
   float: left;
}

@media only screen and (max-width: 991px) {
   #exampleModalLong3 .modal-body img{
      width: calc(100% - 30px);
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button class="btn btn-info centro" type="submit" data-toggle="modal" data-target="#exampleModalLong3">Saiba mais</button>
		<div class="modal fade" id="exampleModalLong3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle3" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle3">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0 pb-3">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
	    <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Don’t forget to remove the classes class="col-lg-4" of the images.