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>