Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Bootstrap image gallery

Suggested Video Tutorials
Part 4 - Bootstrap 3 grid classes
Part 5 - Bootstrap grid column offset
Part 6 - Bootstrap nested rows and columns



In this video we will discuss
1. Some of the bootstrap classes that we can use with images
2. Along the way, we will also build a simple bootstrap photo gallery



In Part 5 of Bootstrap tutorial for beginners, we have already discussed 4 bootsrap classes that are extremely useful to style images.
bootstrap image classes

working with images in bootstrap

Bootstrap classes to position an image
bootstrap image align center

A simple bootstrap image gallery
bootstrap image gallery example

The image gallery should
1. Display 4 thumbnails on a large screen size
2. Display 3 thumbnails on a medium screen size
3. Display 2 thumbnails on a small screen size
4. Display 1 thumbnail on an extra small screen size
5. When you click on a thumbnail, the original image should be displayed

Here is the complete HTML of the image gallery

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2>Bootstrap Image Gallery</h2>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Chrysanthemum.jpg" class="thumbnail">
                <p>Chrysanthemum</p>
                <img src="Images/Chrysanthemum.jpg" />
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Desert.jpg" class="thumbnail">
                <p>Desert</p>
                <img src="Images/Desert.jpg" />
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Hydrangeas.jpg" class="thumbnail">
                <p>Hydrangeas</p>
                <img src="Images/Hydrangeas.jpg" />
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Jellyfish.jpg" class="thumbnail">
                <p>Jellyfish</p>
                <img src="Images/Jellyfish.jpg" />
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Koala.jpg" class="thumbnail">
                <p>Koala</p>
                <img src="Images/Koala.jpg" />
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Lighthouse.jpg" class="thumbnail">
                <p>Lighthouse</p>
                <img src="Images/Lighthouse.jpg" />
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Penguins.jpg" class="thumbnail">
                <p>Penguins</p>
                <img src="Images/Penguins.jpg" />
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="Images/Tulips.jpg" class="thumbnail">
                <p>Tulips</p>
                <img src="Images/Tulips.jpg" />
            </a>
        </div>
    </div>
</div>

bootstrap tutorial for beginners

6 comments:

  1. Have one question about "A simple bootstrap image gallery", i change other img( they all are in different sizes) and gallery look not symmetrical how to fix it?

    ReplyDelete
    Replies
    1. will resizing the image fix your issue?

      Delete
    2. Make a CustomStyle.css and put this code in there:

      .thumbnail img {
      height:250px;
      width:100%;
      }

      it works....

      Delete
  2. Make a CustomStyle.css and put this code in there:

    .col-lg-3{
    overflow: hidden;
    }

    .col-md-4{
    overflow: hidden;
    }

    .col-sm-6{
    overflow: hidden;
    }

    I hope this will help you!

    ReplyDelete
  3. There should be two rows-one for heading and other for images.
    Why you haven't created that?

    ReplyDelete
  4. How can one bootstrap row contain more than 12 logical units??

    ReplyDelete

It would be great if you can help share these free resources