<div class="container py-5">
<div class="row">
<div class="col text-center">
<p classs="mt-4">Please allow a moment for the heroku app resource to load.</p>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-auto iphone-iframe-col px-5">
<iframe src="https://ionicmp3.herokuapp.com/" frameborder="0" class="iphone-iframe"></iframe>
</div>
</div>
</div>
.iphone-iframe-col {
background-image: url(https://mydigitalsauce.com/wp-content/uploads/2018/07/white-iphone-7.png);
background-position: -277px -40px;
background-repeat: no-repeat;
background-size: 205%;
padding-top: 106px !important;
padding-bottom: 199px !important;
}
.iphone-iframe {
height: 746px;
width: 425px;
}
This Pen doesn't use any external JavaScript resources.