Responsive background image in card-header (Bootstrap 4)

This is a Bootstrap 4 version of the Responsive Background Image in Panel Heading (Bootstrap). Since they changed the panel class with the card class in Bootstrap 4, you just need to change the old Bootstrap 3 class names… here is my code and demo.

Here is the live demo.

Responsive background image in panel heading (Bootstrap)

Usually, on my freelance projects I use a beautiful responsive Bootstrap panel to display certain information like photos, offers, contact info, profile info and so on. I find very useful to play with the variables and see particular results depending on your cover image size and text that you need to display in the panel.

The structure is pretty simple, we have a simple Bootstrap style class logic that displays our panel and some custom css that we need to add to modify some settings like removing the standard Bootstrap border and rounded corners.

Here is the CSS:

HTML code:

I limited the width of the panel to see how it looks, usually, I use 2-3 panels in a row to display certain informations but, in my opinion, this type of panel looks better when is not displayed on a full width style.

Take a look at the results here.