Image gallery thumbnail size with Bootstrap 4
up vote
0
down vote
favorite
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>html5 css3 bootstrap-4 image-gallery
asked Nov 9 at 22:02
Paula
1059
add a comment |
up vote
0
down vote
favorite
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>html5 css3 bootstrap-4 image-gallery
asked Nov 9 at 22:02
Paula
1059
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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>html5 css3 bootstrap-4 image-gallery
asked Nov 9 at 22:02
Paula
1059
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>.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>.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>html5 css3 bootstrap-4 image-gallery
html5 css3 bootstrap-4 image-gallery
asked Nov 9 at 22:02
Paula
1059
asked Nov 9 at 22:02
Paula
1059
asked Nov 9 at 22:02
Paula
1059
asked Nov 9 at 22:02
Paula
1059
asked Nov 9 at 22:02
Paula
1059
1059
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
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>answered Nov 9 at 22:33
D. Smania
2,6541321
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
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>answered Nov 9 at 22:33
D. Smania
2,6541321
add a comment |
up vote
0
down vote
accepted
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>answered Nov 9 at 22:33
D. Smania
2,6541321
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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>answered Nov 9 at 22:33
D. Smania
2,6541321
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>.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>.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>.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>.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>answered Nov 9 at 22:33
D. Smania
2,6541321
edited Nov 9 at 22:50
answered Nov 9 at 22:33
D. Smania
2,6541321
answered Nov 9 at 22:33
D. Smania
2,6541321
answered Nov 9 at 22:33
D. Smania
2,6541321
2,6541321
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233822%2fimage-gallery-thumbnail-size-with-bootstrap-4%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
