D4mations.com

Bootstrap image gallery

[ad_1]
https://i.ytimg.com/vi/2-tHexxFixA/hqdefault.jpg



bootstrap image gallery example
bootstrap photo gallery
bootstrap 3 image gallery example
simple bootstrap image gallery
simple bootstrap photo gallery
bootstrap 3 thumbnail image gallery
bootstrap thumbnail photo gallery
bootstrap thumbnail gallery example
bootstrap image grid different sizes
bootstrap photo grid
bootstrap image grid example
bootstrap gallery grid
bootstrap picture gallery
bootstrap image classes
bootstrap image class thumbnail
bootstrap class image center
working with images in bootstrap

Bootstrap image gallery

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

The image gallery
1. Displays 4 thumbnails on a large screen size
2. Displays 3 thumbnails on a medium screen size
3. Displays 2 thumbnails on a small screen size
4. Displays 1 thumbnail on an extra small screen size
5. When you click on a thumbnail, the original image will 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]

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2016/05/bootstrap-image-gallery.html

Original source

d4mer

,
, , , , , , , ,

24 responses to “Bootstrap image gallery”

  11. Assalam o Alaikum … i want some help …. classes within anchor tag are not applied and the scope of paragraph within anchor tag is applied all the columns because of it every image is showing on next line …
    I copied your code but the problem is same …
    I am using Visual studio 2013 ….
    Email : hzr2786@gmail.com

  12. Thanks Venkat Sir for explaining this. i have one doubt, if the image sizes are different then the columns alignment is not proper and not coming as per the code design. Is there any way to solve this problem ?

  13. <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>

  19. Thanks Venkat. it worth mentioning that pull image left or right is also subjected to image size. if image size is larger than column width then text will not be aligned to the image side, but it will below. Please correct me if i am wrong.

Leave a Reply