<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;
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.