Tag: heading

UPDATE – since this post got so much heat, I made a simple CSS & HTML only panel with responsive image and card-header, see here.

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.

 .heading-footer 
{ 
background-image: url(bg.jpg); 
background-size: cover; 
height: 175px; 
-webkit-box-shadow: none; 
box-shadow: none; 
border: 0px; 
border-radius: 0px; 
}   

.panel-profile-img 
{ 
max-width: 250px; 
margin-top: -160px; 
margin-bottom: 5px; 
border: 3px solid #fff; 
border-radius: 0%; 
}

 <div class="card">
    <div class="card-header heading-footer"></div>
      <div class="card-block text-center">
         <img class="panel-profile-img rounded-circle" src="portrait.jpg">
         <p class="author-title"><strong>Lorem Ipsum</strong></p>
         <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
         <p>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p>
    </div>
</div>

Here is the live demo.