<!-- Design inspired from https://www.hotjar.com/ -->
<div class="jumbotron">
  <div class="container text-center text-lg-left">
    
    <div class="row">
      <div class="col-lg-8">
          <h1 class="display-4">The fast & visual way
to <span class="highlight-word">understand your users</span></h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <span class="text-center d-inline-block">
          <a class="btn btn-primary btn-lg w-100" href="#" role="button">Try it free</a>
        <p class="text-muted">No credit card required</p>
        </span>
        
      </div>
      <div class="col-lg-4 align-items-center d-flex">
        <img src="https://dummyimage.com/1200x800/949494/fff.png" alt="" class="img-fluid">
      </div>
    </div>

 
    </div>
</div>
.highlight-word {
  position: relative;
  z-index: 0;
/* prevent the highlight from breaking since it is horizontal   */
  white-space: nowrap;
}
.highlight-word:before {
    content: '';
    background: url(https://cdn2.hubspot.net/hubfs/1951809/text-highlight.png?t=1542708765973) no-repeat center center;
    background-size: 100% auto;
    width: 108%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    transform: translate(-3%,0);
}

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js