<div class="container">
  <div class="mainimgcontainer">
    <picture>
      <!--
      <source media="(max-width: 576px)" srcset="img/fitted-bedroom-furniture-576.jpg">
      <source media="(max-width: 800px)" srcset="img/fitted-bedroom-furniture-820.jpg">
      <source media="(max-width: 1200px)" srcset="img/fitted-bedroom-furniture-1200.jpg">
-->
      <img src="https://picsum.photos/id/1016/2000/1000" alt="Photo of fitted bedroom furniture">
    </picture>
    <div class="mainimgtxt d-flex h-100">
      <div class="text-center-left justify-content-center align-self-center">
        <h1>FITTED BEDROOM FURNITURE</h1>
        <p class="lead white">Some more text will go here.</p>
      </div>
    </div>
  </div>
</div>
.mainimgcontainer {
  position: relative;
  color: white;
  height: 100vh;
}

.mainimgtxt {
  width: 40%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  padding:1rem
}
.mainimgcontainer img{
  width:100%;
  height:100%;
  object-fit:cover;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js