Enhanced Bootstrap Border color

Built in Border 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 shading of element based on these triggers or even background color opacity by changing
its alpha channel

Triggers

To animate the border color when {trigger} is performed on a single element, use data-fx="{trigger}:border-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:

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













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

Click the elements to toggle .active class

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













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

Scroll into view to toggle .inview class

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













<div data-fx="inview:border-color--primary">Border color primary</div>
<div data-fx="inview:border-color--secondary">Border color secondary</div>
<div data-fx="inview:border-color--success">Border color success</div>
<div data-fx="inview:border-color--danger">Border color danger</div>
<div data-fx="inview:border-color--warning">Border color warning</div>
<div data-fx="inview:border-color--info">Border color info</div>
<div data-fx="inview:border-color--light">Border color light</div>
<div data-fx="inview:border-color--dark">Border color dark</div>
<div data-fx="inview:border-color--white">Border color white</div>
<div data-fx="inview:border-color--transparent">Border 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:

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













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

Click the wrapper to toggle .active class:

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













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

Scroll into view to toggle .inview class on parent

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













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

Customizations

Border opacity

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

Triggers

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

Hover over the elements:

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













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

Click the elements to toggle .active class

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













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

Scroll into view to toggle .inview class

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













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

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

Hover over the wrapper:

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













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

Click the wrapper to toggle .active class:

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













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

Scroll into view to toggle .inview class on parent

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













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