Bootstrap 4 Tutorial in Hindi Part 7 : Responsive Image Gallery in Bootstrap in Hindi

30
47



Welcome Developers, we will see Bootstrap 4 image gallery in Hindi. We have classes in Bootstrap 4 images
Rounded Corners
The .rounded class adds rounded corners to an image:

Circle
The .rounded-circle class shapes the image to a circle:

Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):

Responsive Images
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.

Create responsive images by adding a .img-fluid class to the img tag. The image will then scale nicely to the parent element.

The .img-fluid class applies max-width: 100%; and height: auto; to the image:

bootstrap 4 image gallery example
bootstrap 4 photo gallery
bootstrap 4 3 image gallery example
simple bootstrap 4 image gallery
simple bootstrap 4 photo gallery
bootstrap 4 thumbnail image gallery
bootstrap 4 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

we will also look into
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

if you like this video plz LIKE SHARE and SUBSCRIBE my thapatechnical channel 🙂

Nguồn:https://quydinh.com/

30 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here