locked
how to show image thumbnail by bootstrap RRS feed

  • 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

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