O'Reilly logo

Mastering Bootstrap 4 by Jason Marah, Benjamin Jakobus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required