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.

This is what I want to achieve

And below you can see what happens when I add padding. The thumbnails are bigger, but the side margins are no longer aligned.

enter image description here

.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>

asked Nov 9 at 22:02

Paula

1059

add a comment |

up vote
0
down vote

favorite

In the image below you can see that the side margins are aligned, but the thumbnails are too small.

This is what I want to achieve

And below you can see what happens when I add padding. The thumbnails are bigger, but the side margins are no longer aligned.

enter image description here

.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>

asked Nov 9 at 22:02

Paula

1059

add a comment |

up vote
0
down vote

favorite

In the image below you can see that the side margins are aligned, but the thumbnails are too small.

This is what I want to achieve

And below you can see what happens when I add padding. The thumbnails are bigger, but the side margins are no longer aligned.

enter image description here

.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>

asked Nov 9 at 22:02

Paula

1059

In the image below you can see that the side margins are aligned, but the thumbnails are too small.

This is what I want to achieve

And below you can see what happens when I add padding. The thumbnails are bigger, but the side margins are no longer aligned.

enter image description here

.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

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

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>

edited Nov 9 at 22:50

answered Nov 9 at 22:33

D. Smania

2,6501321

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',
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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

.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>

edited Nov 9 at 22:50

answered Nov 9 at 22:33

D. Smania

2,6501321

add a comment |

up vote
0
down vote

accepted

.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>

edited Nov 9 at 22:50

answered Nov 9 at 22:33

D. Smania

2,6501321

add a comment |

up vote
0
down vote

accepted

.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>

edited Nov 9 at 22:50

answered Nov 9 at 22:33

D. Smania

2,6501321

.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>

edited Nov 9 at 22:50

answered Nov 9 at 22:33

D. Smania

2,6501321

edited Nov 9 at 22:50

answered Nov 9 at 22:33

D. Smania

2,6501321

answered Nov 9 at 22:33

D. Smania

2,6501321

answered Nov 9 at 22:33

D. Smania

2,6501321

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl