Bootstrap 4 – Responsive Web Design

Displaying images using Bootstrap Lightbox

One important feature missing from our Events section is the ability to include images that illustrate an event (or provide additional information). Sure, you can add images using the img tag, but that may not be very practical, as the image size will be limited by the container's dimensions.

In this section, we will demonstrate how we can overcome this limitation by allowing users to enlarge images as they click on them, without redirecting them away from our page. To this end, go ahead and embed one image with each event (see Figure 5.8). Each image should be aligned to the left of the event description, have a width of 80, and a height of 45:

 <div id="page-1"> <h3>My Sample Event #1</h3> <p> <img src="images/event1.jpg" ...