How to overlay border over cover image in Bootstrap? - html

Question

I am having troubles rendering a bordered area on top of the cover image on my web page. The contents of the bordered area display above the image but the border and background does not show up.
The borders are supposed to look like this:
I want the same experience for the cover photo so it covers half of the photo but also has the solid background.
Here is some of the relevant code below. If someone could give me some guidance as to how to properly layer these on top of each other that would be fantastic.
CompanyProfile.js:
class CompanyProfile extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<CoverPhoto/>
<div className="container-fluid page">
<ProfileHeader/>
ProfileHeader.js:
const ProfileHeader = (props) => {
return (
<div className="row border rounded-top p-2 bg-white" style={{marginTop: '5px'}}>
<div className="col-lg-2">
<img className="rounded-circle text-center" id="companyProfile" src={github}/>
<h5 className="mt-2" id="nameLabel">Github</h5>
</div>
<div className="col-lg-2">
<h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Website</strong></h6>
<a className="" href="http://github.com" target="_blank">http://github.com</a>
<h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Company Size</strong></h6>
<span className="">800 employees</span>
<h6 className="mt-2" style={{marginBottom: '0px'}}><strong>Year Founded</strong></h6>
<span className="">2008</span>
</div>
<div className="col-lg-8">
<h6 className="ml-3 mt-2" style={{marginBottom: '0px'}}><strong>About</strong></h6>
<p className="ml-3" style={{wordWrap: 'break-word'}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim dolor, bibendum non eros ut, aliquet tristique eros. Suspendisse potenti. Cras lobortis condimentum magna, ut vehicula turpis dapibus sit amet. Pellentesque hendrerit ultricies massa, a mattis purus rhoncus mollis. Mauris egestas leo id mauris euismod maximus. Proin feugiat tincidunt laoreet.</p>
</div>
</div>
)
}
CoverPhoto.js:
import React from 'react';
import coverPhoto from './images/coverphoto.jpg';
const CoverPhoto = () => {
return <img src={coverPhoto} style={{width: '100%', maxHeight: '400px'}}/>
}
export default CoverPhoto;

Answer 1

It might be an issue with z-index.
Try adding style={{ z-index: 9999 }} to the element that you want on top of the other. And see if that works.

Answer 2

if you add bootstrap cdn to you project just add clearfix class before this div
<div className="clearfix"/>
<div className="container-fluid page">
https://getbootstrap.com/docs/4.3/utilities/clearfix/