Bootstrap Images Examples
< View Code Snippets Library-
Add Featured Tag Above Image
Bootstrap 4This demonstrates how to use CSS positioning and pseudo elements to created a featured tag above an image. This tag text is created with CSS instead of having the text in the HTML markup.
-
Jumbotron background image opacity
Bootstrap 4This code snippet will help you add a background image and change its opacity by adding a color gradient on top of the image. This technique leverages the ability to have multiple background image properties creating a layering effect.
-
Overlapping Images Using CSS Positioning
Bootstrap 4This code demo demonstrates how to use absolute positioning to overlap images. But with responsive design, this becomes a challenge because the container does not wrap around the absolute positioned elements. I use a hidden responsive image to correct this and allow things to adapt.
-
Defer Image Loading Script
Bootstrap 4If you have large images in a carousel, it would be a good idea to defer loading them to speed up your page load time. This scripts adds a base 64 image placheholder in the html and then uses javascript to replace that with the actual image source. So the document loads and then loads in the images.
-
Responsive Image Gallery
Bootstrap 4This demo uses Bootstrap 4 flexbox utility classes and the picture element to built a responsive image gallery. Since it used the responsive image picture tag, it will load quickly on mobile and desktop.
-
Image Gradient Overlay
All Bootstrap VersionsAdds a transparent color overlay to an image using a pseudo element.
Looking for something else?
Suggest or contribute a code snippet to be added to the library.