Text Highlight
Gradient highlight/underline
Basic example
The size of the gradient highlighter scales more naturally with the size of the text.
Turn your ideas into a startup
Turn your ideas into a startup
Turn your ideas into a future
Turn your ideas into a future
<h2 class="display-4">Turn your ideas into a <span class="text-primary text-highlight-warning">startup</span></h2>
<h2>Turn your ideas into a <span class="text-primary text-highlight-warning">startup</span></h2>
<p>Turn your ideas into a <span class="text-primary text-highlight-warning">future</span></p>
<p><small>Turn your ideas into a <span class="text-primary text-highlight-warning">future</span></small></p>
Color variation
Turn your text into a primary
Turn your text into a secondary
Turn your text into a success
Turn your text into a danger
Turn your text into a warning
Turn your text into a info
Turn your text into a indigo
Turn your text into a navy
Turn your text into a dark
Turn your text into a light
<p>Turn your text into a <span class="text-primary text-highlight-primary">primary</span></p>
<p>Turn your text into a <span class="text-secondary text-highlight-secondary">secondary</span></p>
<p>Turn your text into a <span class="text-success text-highlight-success">success</span></p>
<p>Turn your text into a <span class="text-danger text-highlight-danger">danger</span></p>
<p>Turn your text into a <span class="text-warning text-highlight-warning">warning</span></p>
<p>Turn your text into a <span class="text-info text-highlight-info">info</span></p>
<p>Turn your text into a <span class="text-info text-highlight-indigo">indigo</span></p>
<p>Turn your text into a <span class="text-navy text-highlight-navy">navy</span></p>
<p>Turn your text into a <span class="text-dark text-highlight-dark">dark</span></p>
<p>Turn your text into a <span class="text-light text-highlight-light">light</span></p>