<div class="container my-5">
  <div class="row justify-content-center">
    <div class="col-8">
      <h2 class="font-weight-bold display-4 mb-5 textGradient">Gradient Color in Text</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci lorem, ullamcorper in suscipit vel, rhoncus at erat. Nam ultrices mollis orci, et pretium arcu consectetur eget. Integer elementum nibh justo. <a class="textGradient" href="#">Nullam ullamcorper semper ornare</a>. Nulla sed lectus est, vel iaculis dui. Duis consequat placerat tortor, eget iaculis est iaculis eget. In eu justo nisi. Cras cursus ligula eu erat tincidunt accumsan.</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci lorem, <a class="textGradient" href="#">ullamcorper</a> in suscipit vel, rhoncus at erat. Nam ultrices mollis orci, et pretium arcu consectetur eget. Integer elementum nibh justo. Nullam ullamcorper semper ornare. Nulla sed lectus est, vel iaculis dui. Duis consequat placerat tortor, eget iaculis est iaculis eget. In eu justo nisi. Cras cursus ligula eu erat tincidunt accumsan.
      </p>
    </div>
  </div>
</div>
body {
  font-size: 22px; /* just for this demo */
}
.textGradient {
  color: #ff8c00; /* fix for not webkit browsers */
  background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

External CSS

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

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js