Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.