locked
how to show image thumbnail by bootstrap RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    User264732274 posted
    Bootstrap 4 released officially?
    Monday, October 3, 2016 7:58 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    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