Answered by:
how to show image thumbnail by bootstrap

Question
-
User264732274 posted
I need to show multiple images thumbnail in page. In each row i need to show 4 or 5 images thumbnail. There will be many rows in page. So guide me with code how to design this with bootstrap css. Plzz provide a example of css and html.Friday, September 30, 2016 4:42 PM
Answers
-
User-707554951 posted
Hi sudip_inn,
http://www.bootply.com/tagged/thumbnails
http://www.bootply.com/d08bOti6Zs
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_thumbnail2&stacked=h
http://www.bootply.com/PEZWo8TS0d
http://www.bootply.com/FQyw4P68Uk
Hope this can help you
Best regards
Cathy- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 3, 2016 9:32 AM -
User-835544317 posted
Here is what you can do. I have tried and tested in my local project and it works. ( note: I have taken some random images.. you need to map your images.)
For image use this classes class="img-fluid img-thumbnail "
"img-fluid" - will make the images big or small based on which device you are viwing the page.
"img-thumbnail " - display the image in thumbnail..
<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Learning Bootstrap 3.0</title> <link href="../css/bootstrap.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> </div> </div> </body> </html>
Also see this link for more classes for images in bootstrap http://v4-alpha.getbootstrap.com/content/images/
Hope this helps..
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 3, 2016 3:29 PM -
User-835544317 posted
I suppose not yet.. there is Bootstrap 4 Alpha 4 release see below the link..
http://blog.getbootstrap.com/2016/09/05/bootstrap-4-alpha-4/
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 3, 2016 11:39 PM
All replies
-
User264732274 posted
i got some nice link
https://startbootstrap.com/template-overviews/thumbnail-gallery/
https://blackrockdigital.github.io/startbootstrap-thumbnail-gallery/
http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/
https://github.com/blueimp/Bootstrap-Image-Gallery
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://www.jqueryscript.net/gallery/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3.html
http://untame.net/2013/02/twitter-bootstrap-build-a-responsive-lightbox-gallery/
http://visuallightbox.com/builder/Saturday, October 1, 2016 9:10 AM -
User-707554951 posted
Hi sudip_inn,
http://www.bootply.com/tagged/thumbnails
http://www.bootply.com/d08bOti6Zs
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_thumbnail2&stacked=h
http://www.bootply.com/PEZWo8TS0d
http://www.bootply.com/FQyw4P68Uk
Hope this can help you
Best regards
Cathy- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 3, 2016 9:32 AM -
User-835544317 posted
Here is what you can do. I have tried and tested in my local project and it works. ( note: I have taken some random images.. you need to map your images.)
For image use this classes class="img-fluid img-thumbnail "
"img-fluid" - will make the images big or small based on which device you are viwing the page.
"img-thumbnail " - display the image in thumbnail..
<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Learning Bootstrap 3.0</title> <link href="../css/bootstrap.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <img src="../Images/167264_1870428399790_1808337_n.jpg" class="img-fluid img-thumbnail " alt="Responsive image" /> </div> </div> </div> </body> </html>
Also see this link for more classes for images in bootstrap http://v4-alpha.getbootstrap.com/content/images/
Hope this helps..
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 3, 2016 3:29 PM -
User264732274 posted
Bootstrap 4 released officially?Monday, October 3, 2016 7:58 PM -
User-835544317 posted
I suppose not yet.. there is Bootstrap 4 Alpha 4 release see below the link..
http://blog.getbootstrap.com/2016/09/05/bootstrap-4-alpha-4/
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, October 3, 2016 11:39 PM