<div class="container">
  
  <div class="col-md-8 offset-md-2 col-12">
  
    <div class="marvel-device iphone-x">
      <div class="notch">
          <div class="camera"></div>
          <div class="speaker"></div>
      </div>
      <div class="top-bar"></div>
      <div class="sleep"></div>
      <div class="bottom-bar"></div>
      <div class="volume"></div>
      <div class="overflow">
          <div class="shadow shadow--tr"></div>
          <div class="shadow shadow--tl"></div>
          <div class="shadow shadow--br"></div>
          <div class="shadow shadow--bl"></div>
      </div>
      <div class="inner-shadow"></div>
      <div class="screen text-center">
          <h3>&nbsp;</h3>
          <h3>Content</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    
  </div>
  
</div>

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
  2. https://raw.githubusercontent.com/philipkiely/devices.css/master/devices_new.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.