Bootstrap 4 images thumbnail classes
19,243
Solution 1
According to the docs v4, you are looking for img-thumbnail (which should be used in img tag instead of col-*-* as you have)
Notes:
- In v4
col-xswas replaced bycol- - I've added
img-fluidutility class in order to make images responsive
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<h2>Pictures of Coffee</h2>
<div class="row">
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
</div>
</div>Solution 2
In Bootstrap 4 you can do the following.
For columns col-xs- doesn't exist anymore, replace with col-. The default is xs.
For the thumbnail, you can use the img-thumbnail class on the img element instead of on the div element.
Additionally, to achieve 0 padding on each column and row, you can override Bootstrap's padding by adding a custom style rule.
.row > .col-lg-4,
.col-6 {
padding: 0;
}
The resulting Bootstrap 4 file would be the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project</title>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.row>.col-lg-4,
.col-6 {
padding: 0;
}
</style>
</head>
<div class="container">
<h2>Pictures of Coffee</h2>
<div class="row">
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt="">
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt="">
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt="">
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt="">
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt="">
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
Hope this helps.
Author by
csamleong
Updated on June 12, 2022Comments
-
csamleong almost 2 years
I got a HTML code in the following using bootstrap 3.3.7, using thumbnail class the images can be resized and fit into the grid perfectly.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Project</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <div class="container"> <h2>Pictures of Coffee</h2> <div class="row"> <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div> <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div> <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div> <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div> <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div> <div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div> </div> </div> </body> </html>However, the thumbnail class doesn't seem to be exist in bootstrap 4.0 https://getbootstrap.com/docs/4.0/layout/grid/ To simulate the issue you can try to replace the html link rel with the following
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">You can see the images will be out of places and I would like to know what is the similar class to achieve the same result in 4.0. Or i have to resort to bootstrap 3.3.7 ?
-
csamleong about 6 yearsThank you for your speedy reply, i have only used img-thumbnail class previously, and that's why i couldn't get it working. This is the answer that i am looking for.
-
csamleong about 6 yearsThanks for your help! it can work as well, but i will mark dippas's answer as it is much cleaner. No override is needed.
-
devisscher about 6 yearsYou are not achieving the same look with dippa's. The original using bootstrap 3 has no spacing between the images. That is why I added the padding of 0.
