Image gallery thumbnail size with Bootstrap 4
0
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 |
0
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 |
0
0
0
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
0
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
Shidersz
3,3361425
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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
Shidersz
3,3361425
add a comment |
0
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
Shidersz
3,3361425
add a comment |
0
0
0
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
Shidersz
3,3361425
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
Shidersz
3,3361425
edited Nov 9 at 22:50
answered Nov 9 at 22:33
Shidersz
3,3361425
answered Nov 9 at 22:33
Shidersz
3,3361425
answered Nov 9 at 22:33
Shidersz
3,3361425
3,3361425
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
