Enhanced Bootstrap Text color

Built in Text color PRO

Change the element’s border color on various triggers

Overview

Change the background color of element when these triggers has been performed: User performs hover over element, element gets .active or .show class, or element appears in the viewport and gets .inview` class. You can also easily change the text color opacity by changing
its alpha channel

Triggers

To animate the text color when {trigger} is performed on a single element, use data-fx="{trigger}:text-color--{color} where {trigger} is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets hover state

And {color} is one of the theme colors.

Hover over the elements:

Text color primary
Text color secondary
Text color success
Text color danger
Text color warning
Text color info
Text color light
Text color dark
Text color white
Text color transparent
      













<div data-fx="hover:text-color--primary">Text color primary</div>
<div data-fx="hover:text-color--secondary">Text color secondary</div>
<div data-fx="hover:text-color--success">Text color success</div>
<div data-fx="hover:text-color--danger">Text color danger</div>
<div data-fx="hover:text-color--warning">Text color warning</div>
<div data-fx="hover:text-color--info">Text color info</div>
<div data-fx="hover:text-color--light">Text color light</div>
<div data-fx="hover:text-color--dark">Text color dark</div>
<div data-fx="hover:text-color--white">Text color white</div>
<div data-fx="hover:text-color--transparent">Text color transparent</div>

Click the elements to toggle .active class

Text color primary
Text color secondary
Text color success
Text color danger
Text color warning
Text color info
Text color light
Text color dark
Text color white
Text color transparent
      













<div data-fx="active:text-color--primary">Text color primary</div>
<div data-fx="active:text-color--secondary">Text color secondary</div>
<div data-fx="active:text-color--success">Text color success</div>
<div data-fx="active:text-color--danger">Text color danger</div>
<div data-fx="active:text-color--warning">Text color warning</div>
<div data-fx="active:text-color--info">Text color info</div>
<div data-fx="active:text-color--light">Text color light</div>
<div data-fx="active:text-color--dark">Text color dark</div>
<div data-fx="active:text-color--white">Text color white</div>
<div data-fx="active:text-color--transparent">Text color transparent</div>

Scroll into view to toggle .inview class

Text color primary
Text color secondary
Text color success
Text color danger
Text color warning
Text color info
Text color light
Text color dark
Text color white
Text color transparent
      













<div data-fx="inview:text-color--primary">Text color primary</div>
<div data-fx="inview:text-color--secondary">Text color secondary</div>
<div data-fx="inview:text-color--success">Text color success</div>
<div data-fx="inview:text-color--danger">Text color danger</div>
<div data-fx="inview:text-color--warning">Text color warning</div>
<div data-fx="inview:text-color--info">Text color info</div>
<div data-fx="inview:text-color--light">Text color light</div>
<div data-fx="inview:text-color--dark">Text color dark</div>
<div data-fx="inview:text-color--white">Text color white</div>
<div data-fx="inview:text-color--transparent">Text color transparent</div>

Parent triggers

To animate the background color of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:border-color--{color} attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

And {color} is one of the theme colors.

Hover over the wrapper:

Text color primary
Text color secondary
Text color success
Text color danger
Text color warning
Text color info
Text color light
Text color dark
Text color white
Text color transparent
      













<div data-fx-trigger="hover">
  <div data-fx="hover/T:text-color--primary">Text color primary</div>
  <div data-fx="hover/T:text-color--secondary">Text color secondary</div>
  <div data-fx="hover/T:text-color--success">Text color success</div>
  <div data-fx="hover/T:text-color--danger">Text color danger</div>
  <div data-fx="hover/T:text-color--warning">Text color warning</div>
  <div data-fx="hover/T:text-color--info">Text color info</div>
  <div data-fx="hover/T:text-color--light">Text color light</div>
  <div data-fx="hover/T:text-color--dark">Text color dark</div>
  <div data-fx="hover/T:text-color--white">Text color white</div>
  <div data-fx="hover/T:text-color--transparent">Text color transparent</div>
</div>

Click the wrapper to toggle .active class:

Text color primary
Text color secondary
Text color success
Text color danger
Text color warning
Text color info
Text color light
Text color dark
Text color white
Text color transparent
      













<div data-fx-trigger="active">
  <div data-fx="active/T:text-color--primary">Text color primary</div>
  <div data-fx="active/T:text-color--secondary">Text color secondary</div>
  <div data-fx="active/T:text-color--success">Text color success</div>
  <div data-fx="active/T:text-color--danger">Text color danger</div>
  <div data-fx="active/T:text-color--warning">Text color warning</div>
  <div data-fx="active/T:text-color--info">Text color info</div>
  <div data-fx="active/T:text-color--light">Text color light</div>
  <div data-fx="active/T:text-color--dark">Text color dark</div>
  <div data-fx="active/T:text-color--white">Text color white</div>
  <div data-fx="active/T:text-color--transparent">Text color transparent</div>
</div>

Scroll into view to toggle .inview class on parent

Text color primary
Text color secondary
Text color success
Text color danger
Text color warning
Text color info
Text color light
Text color dark
Text color white
Text color transparent
      













<div data-fx-trigger="inview">
  <div data-fx="inview/T:text-color--primary">Text color primary</div>
  <div data-fx="inview/T:text-color--secondary">Text color secondary</div>
  <div data-fx="inview/T:text-color--success">Text color success</div>
  <div data-fx="inview/T:text-color--danger">Text color danger</div>
  <div data-fx="inview/T:text-color--warning">Text color warning</div>
  <div data-fx="inview/T:text-color--info">Text color info</div>
  <div data-fx="inview/T:text-color--light">Text color light</div>
  <div data-fx="inview/T:text-color--dark">Text color dark</div>
  <div data-fx="inview/T:text-color--white">Text color white</div>
  <div data-fx="inview/T:text-color--transparent">Text color transparent</div>
</div>

Customizations

Text opacity

Change the text color opacity, using data-fx="{trigger}:text-alpha--{amount}". This will change the alpha channel of the
text color using CSS hsla() function.

Triggers

Use data-fx="{inview:|active:|show:|hover:}text-alpha--{amount}" to change the text opacity of a single element.

Hover over the elements:

Text alpha 0
Text alpha 5
Text alpha 10
Text alpha 20
Text alpha 30
Text alpha 40
Text alpha 50
Text alpha 60
Text alpha 70
Text alpha 80
Text alpha 90
Text alpha 100
          













<div class="text-dark" data-fx="hover:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="hover:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="hover:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="hover:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="hover:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="hover:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="hover:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="hover:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="hover:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="hover:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="hover:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="hover:text-alpha--100">Text alpha 100</div>

Click the elements to toggle .active class

Text alpha 0
Text alpha 5
Text alpha 10
Text alpha 20
Text alpha 30
Text alpha 40
Text alpha 50
Text alpha 60
Text alpha 70
Text alpha 80
Text alpha 90
Text alpha 100
          













<div class="text-dark" data-fx="active:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="active:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="active:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="active:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="active:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="active:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="active:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="active:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="active:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="active:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="active:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="active:text-alpha--100">Text alpha 100</div>

Scroll into view to toggle .inview class

Text alpha 0
Text alpha 5
Text alpha 10
Text alpha 20
Text alpha 30
Text alpha 40
Text alpha 50
Text alpha 60
Text alpha 70
Text alpha 80
Text alpha 90
Text alpha 100
          













<div class="text-dark" data-fx="inview:text-alpha--0">Text alpha 0</div>
<div class="text-dark" data-fx="inview:text-alpha--5">Text alpha 5</div>
<div class="text-dark" data-fx="inview:text-alpha--10">Text alpha 10</div>
<div class="text-dark" data-fx="inview:text-alpha--20">Text alpha 20</div>
<div class="text-dark" data-fx="inview:text-alpha--30">Text alpha 30</div>
<div class="text-dark" data-fx="inview:text-alpha--40">Text alpha 40</div>
<div class="text-dark" data-fx="inview:text-alpha--50">Text alpha 50</div>
<div class="text-dark" data-fx="inview:text-alpha--60">Text alpha 60</div>
<div class="text-dark" data-fx="inview:text-alpha--70">Text alpha 70</div>
<div class="text-dark" data-fx="inview:text-alpha--80">Text alpha 80</div>
<div class="text-dark" data-fx="inview:text-alpha--90">Text alpha 90</div>
<div class="text-dark" data-fx="inview:text-alpha--100">Text alpha 100</div>
Parent triggers

Use data-fx="{inview/T|active/T|show/T|hover/T}text-alpha--{amount}" to change the text opacity of an element (elements) when a certain triggers has been performed on a parent element.

Hover over the wrapper:

Text alpha 0
Text alpha 5
Text alpha 10
Text alpha 20
Text alpha 30
Text alpha 40
Text alpha 50
Text alpha 60
Text alpha 70
Text alpha 80
Text alpha 90
Text alpha 100
          













<div data-fx-trigger="hover">
  <div class="text-dark" data-fx="hover/T:text-alpha--0">Text alpha 0</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--5">Text alpha 5</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--10">Text alpha 10</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--20">Text alpha 20</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--30">Text alpha 30</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--40">Text alpha 40</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--50">Text alpha 50</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--60">Text alpha 60</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--70">Text alpha 70</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--80">Text alpha 80</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--90">Text alpha 90</div>
  <div class="text-dark" data-fx="hover/T:text-alpha--100">Text alpha 100</div>
</div>

Click the wrapper to toggle .active class:

Text alpha 0
Text alpha 5
Text alpha 10
Text alpha 20
Text alpha 30
Text alpha 40
Text alpha 50
Text alpha 60
Text alpha 70
Text alpha 80
Text alpha 90
Text alpha 100
          













<div data-fx-trigger="active">
  <div class="text-dark" data-fx="active/T:text-alpha--0">Text alpha 0</div>
  <div class="text-dark" data-fx="active/T:text-alpha--5">Text alpha 5</div>
  <div class="text-dark" data-fx="active/T:text-alpha--10">Text alpha 10</div>
  <div class="text-dark" data-fx="active/T:text-alpha--20">Text alpha 20</div>
  <div class="text-dark" data-fx="active/T:text-alpha--30">Text alpha 30</div>
  <div class="text-dark" data-fx="active/T:text-alpha--40">Text alpha 40</div>
  <div class="text-dark" data-fx="active/T:text-alpha--50">Text alpha 50</div>
  <div class="text-dark" data-fx="active/T:text-alpha--60">Text alpha 60</div>
  <div class="text-dark" data-fx="active/T:text-alpha--70">Text alpha 70</div>
  <div class="text-dark" data-fx="active/T:text-alpha--80">Text alpha 80</div>
  <div class="text-dark" data-fx="active/T:text-alpha--90">Text alpha 90</div>
  <div class="text-dark" data-fx="active/T:text-alpha--100">Text alpha 100</div>
</div>

Scroll into view to toggle .inview class on parent

Text alpha 0
Text alpha 5
Text alpha 10
Text alpha 20
Text alpha 30
Text alpha 40
Text alpha 50
Text alpha 60
Text alpha 70
Text alpha 80
Text alpha 90
Text alpha 100
          













<div data-fx-trigger="inview">
  <div class="text-dark" data-fx="inview/T:text-alpha--0">Text alpha 0</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--5">Text alpha 5</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--10">Text alpha 10</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--20">Text alpha 20</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--30">Text alpha 30</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--40">Text alpha 40</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--50">Text alpha 50</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--60">Text alpha 60</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--70">Text alpha 70</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--80">Text alpha 80</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--90">Text alpha 90</div>
  <div class="text-dark" data-fx="inview/T:text-alpha--100">Text alpha 100</div>
</div>