Learn How to Create Images and carousels in Bootstrap 4

0
3601

In this chapter, we are going to discuss the various styling options which are present in Bootstrap 4.0.0 for images and carousels.
Bootstrap 4.0.0 Images
All the styling classes for images which exist before Bootstrap 4.0.0 are working in the current bootstrap package except for .img-responsive class which has been renamed to .img-fluid.

Bootstrap 4.0.0 Image Shapes
The following are image shapes which are supported in Bootstrap 4.0.0.

  • Rounded Corners Image: We use the .img-rounded class to make the corner of the image rounded on the webpage. It should be noted that the Microsoft IE 8 browser does not support the rounded corners of an image. The following is an example of the rounded corner image using Bootstrap 4.0.0.

Output:
When we run the above program on a compatible browser, we can see the rounded corners of an image on the webpage as shown below.
Rounded Corners

  • Circular Image: We use the .img-circle class to make the circular image on the webpage. It should be noted that Microsoft IE 8 browser does not support the circular image. The following is an example of the circular image using Bootstrap 4.0.0.

Output:
When we run the above program on a compatible browser, we can see the circular image on the webpage as shown below.
Circular Image

  • Thumbnail Image: We use the .img-thumbnail class to make an image thumbnail on the webpage. The following is an example of the image thumbnail using Bootstrap 4.0.0.

Output
When we run the above program on a compatible browser, we can see the image thumbnail on the webpage as shown below.
Image Thumbnail

  • Responsive Images: In Bootstrap 4.0.0, the .img-responsive class has been renamed to .img-fluid class. As we know, the images are of variable sizes and the size of the viewport may also vary from device to device. Therefore, with the use of .img-fluid class, a responsive image can automatically adjust to the size of the view port or screen. The .img-fluid class applies display: block; and max-width: 100%; and height: auto; to the image when called in an img tag.

Output
When we run the above program on a compatible browser, we can see the responsive image on the webpage as shown below.
Responsive Image

  • Image Gallery: We can use Bootstrap’s grid system along with .thumbnail class to create a beautiful image gallery. The following is an example of the image gallery using Bootstrap 4.0.0.

Output
When we run the above program on a compatible browser, we can see an image gallery on the webpage as shown below.
Image Gallery

  • Responsive Embeds Images/Videos: The class .embed-responsive-item can be applied to various elements such as <iframe>, <embed>, <video>, and <object>.  This class creates a responsive video, image, etc. that adjusts automatically to the size of the viewport or screen. The aspect ratio of such a video or image is defined by the <div> element under which it is defined.

OutputWhen we run the above program on a compatible browser, we can see a responsive YouTube video on the webpage as shown below.
Responsive YouTube Video

Bootstrap 4.0.0 Carousal
All the styling classes for carousels that existed before Bootstrap 4.0.0 are working in the current bootstrap package except for .item class, which has been renamed to .carousel-item.

The Carousel Plugin
In Bootstrap 4.0.0, we use the Carousel plugin. It is a component which is used for cycling through elements, such a carousel or slideshow of images. This Plugin can be either included individually i.e. by using the individual approach “carousel.js” file, or all inclusion approach by using “bootstrap.js” or “bootstrap.min.js” file. In the below example we will be using “bootstrap.min.js” file.

Things to remember:

  • Browsers which support the Page Visibility API will avoid the sliding carousal when the webpage is not visible to the user i.e. the browser tab is inactive or the browser window is minimized, etc.
  • Also, Nested carousels are not supported in Bootstrap 4.0.0.

We will walk through all the available carousal classes which are present in Bootstrap 4.0.0 with the help of the following two examples.

  • Basic Carousel Example: The following is an example of the basic carousal.

Here, we are using the following classes.

S. No.

Class

Description

1.

.carousel

This class is used to create a carousel.

2.

.slide

This class is used to add a CSS transition and animation effect while it slide over from one item to the next item.

3.

.carousel-indicators

This class is used to add the indicators for the carousel. These are the little circular dots which are present at the bottom of each slide. The number of dots indicate the number of slides present in the carousal.

4.

.carousel-inner

This class is used to add the actual slides to the carousel

5.

.carousel-item

This class specifies the content of each slide.

6.

.left carousel-control

This class is used to add a left button to the carousel. This button allows the user to go back between the successive slides.

7.

.right carousel-control

This class is used to add a right button to the carousel. This button allows the user to go forward between the successive slides.

8.

.carousel-caption

This class specifies a caption for the carousel.

OutputWhen we run the above program on a compatible browser, we can see the basic carousel on the webpage as shown below.
Basic Carousel

  • Adding caption to sliding images in Carousel: In the following example, we will add a caption to the sliding images by using the class .carousel-caption.

OutputWhen we run the above program on a compatible browser, we can see the carousel with caption on the sliding images on the webpage as shown below.
Caption Carousel

Source Code for Images and Carousel

Conclusion: In this chapter, we discussed about the various classes which are present in Bootstrap 4.0.0 for images as well as carousel elements to glorify our website development using Bootstrap 4.0.0.

LEAVE A REPLY

Please enter your comment!
Please enter your name here