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
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our KZitem channel. Hope you can help.
/ @aarvikitchen5572
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
kzitem.info...
Link for slides, code samples and text version of the video
csharp-video-tutorials.blogspo...
Негізгі бет Bootstrap image gallery
Пікірлер: 71