• Wednesday , 13 December 2017

Bootstrap image gallery

Code Canyon
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

3d Ocean

Related Posts

24 Comments

  1. Matt Wong
    September 27, 2017 at 10:57

    I am confused why col-lg-12 works for all sizes. Doesn't that take effect only on screens over 1200 pixels wide?

  2. Rajesh Naik
    September 27, 2017 at 10:57

    Nicely explained, very good..

  3. rishabh goel
    September 27, 2017 at 10:57

    i am getting different different sizes of grid when i put images in it.why?

  4. ballon ura
    September 27, 2017 at 10:57

    Is "Center-Block" Class equals to:
    col-md-offset-5 col-md-2
    for example?

  5. suresh ghale
    September 27, 2017 at 10:57

    can u please upload the videos of JAVA????

  6. Gor Bra
    September 27, 2017 at 10:57

    It's easy, because there is no tutorial when the size of the images are different…..

  7. Basma Mahmoud
    September 27, 2017 at 10:57

    thank you so much 👍

  8. Anoop Negi
    September 27, 2017 at 10:57

    my images are overflowing div element and scrollable?

  9. Mohammad Jaker Khan
    September 27, 2017 at 10:57

    Excellent explanation.Thank you sir.

  10. porush yadav
    September 27, 2017 at 10:57

    sir how to make our text responsive

  11. hafiz zaroon Rashid
    September 27, 2017 at 10:57

    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. Vishal Goel
    September 27, 2017 at 10:57

    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. Alvin Miles
    September 27, 2017 at 10:57

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

  14. Matias Valo
    September 27, 2017 at 10:57

    Thank you. This was a great tutorial! I always like it when someone explains things in simple way.

  15. Ajdin Sheki
    September 27, 2017 at 10:57

    I like your videos , u are very good lecturer

  16. krishna varma
    September 27, 2017 at 10:57

    hi
    thank you for videos.i need notepad files it will help.
    krishnavarma20@gmail.com

  17. Abdul Wahab
    September 27, 2017 at 10:57

    Thanks Sir! Your videos are really awesome, they help us a lot. Jazak Alllah! 🙂 🙂

  18. pushpanjali kumari
    September 27, 2017 at 10:57

    thank you sir …………….

  19. Moustafa Khalil
    September 27, 2017 at 10:57

    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.

  20. Harsha Maharshi
    September 27, 2017 at 10:57

    Thanks Venkat for all the vedios

  21. raqibul1000000 Alam
    September 27, 2017 at 10:57

    great explanation, thank you

  22. Mussab Trabolsi
    September 27, 2017 at 10:57

    great explanation, thank you

  23. Ahmed Mohammed
    September 27, 2017 at 10:57

    Thank you so much.

  24. Muhammad Rehbar Sheikh
    September 27, 2017 at 10:57

    Thank you very much venkat sir! as usual best explanation. waiting for next.. & next +……

Leave A Comment

You must be logged in to post a comment.