Image gallery thumbnail size with Bootstrap 4 - html

Question

I have a very simple responsive image gallery with 6 thumbnails only. In large and medium devices it shows perfectly. However, in mobile view, the thumbnails become way too small. If I add padding, the side margins "break" and they are no longer aligned. Is there a way to make them a bit bigger without "breaking" the side margins? I've posted images so it's easier to understand.
In the image below you can see that the side margins are aligned, but the thumbnails are too small.
And below you can see what happens when I add padding. The thumbnails are bigger, but the side margins are no longer aligned.
.container {
max-width: 98%;
margin: 0 auto;
}
.image-container {
background-color: #ffffff;
padding: 10px;
}
.main-image-container img {
max-width: 100%;
height: auto;
}
.thumbnail-image-container img {
max-width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container mt-4">
<div class="row">
<div class="col-lg-7 image-container">
<div class="row">
<div class="col-12 main-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
</div>
<div class="row pt-2">
<div class="col-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
</div>
</div>

Answer 1

One solution would be adding the same padding to all col-* classes. Bootstrap have padding classes named p-*. Next example added the p-1 classes to main-image-container and thumbnail-image-container elements.
.container {
max-width: 98%;
margin: 0 auto;
}
.image-container {
background-color: #ffffff;
padding: 10px;
}
.main-image-container img {
max-width: 100%;
height: auto;
}
.thumbnail-image-container img {
max-width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container mt-4">
<div class="row">
<div class="col-lg-7 image-container">
<div class="row">
<div class="col-12 p-1 main-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
</div>
<div class="row pt-2">
<div class="col-2 p-1 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 p-1 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 p-1 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 p-1 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 p-1 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-2 p-1 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
</div>
</div>
</div>
</div>
A second solution will be splitting the thumbnails into two rows using the right col-* classes. Like on next example:
.container {
max-width: 98%;
margin: 0 auto;
}
.image-container {
background-color: #ffffff;
padding: 10px;
}
.main-image-container img {
max-width: 100%;
height: auto;
}
.thumbnail-image-container img {
max-width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container mt-4">
<div class="row">
<div class="col-lg-7 image-container">
<div class="row">
<div class="col-12 main-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
</div>
<div class="row pt-1">
<div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
<div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
<img src="https://placeholdit.co//i/1280x720?&text=Test">
</div>
</div>
</div>
</div>
</div>