diff --git a/README.md b/README.md
index df2b83e..49b6ea2 100644
--- a/README.md
+++ b/README.md
@@ -75,14 +75,14 @@ Add the following HTML:
   <div class="bs-stepper-header" role="tablist">
     <!-- your steps here -->
     <div class="step" data-target="#logins-part">
-      <button type="button" class="btn bs-stepper-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
+      <button type="button" class="btn step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
         <span class="bs-stepper-circle">1</span>
         <span class="bs-stepper-label">Logins</span>
       </button>
     </div>
     <div class="line"></div>
     <div class="step" data-target="#information-part">
-      <button type="button" class="btn bs-stepper-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
+      <button type="button" class="btn step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
         <span class="bs-stepper-circle">2</span>
         <span class="bs-stepper-label">Various information</span>
       </button>
diff --git a/docs/index.html b/docs/index.html
index e1f2dc2..14d64b4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,36 +37,36 @@ <h3>Linear stepper</h3>
           <div id="stepper1" class="bs-stepper">
             <div class="bs-stepper-header" role="tablist">
               <div class="step" data-target="#test-l-1">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1">
                   <span class="bs-stepper-circle">1</span>
                   <span class="bs-stepper-label">Email</span>
                 </button>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-l-2">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper1trigger2" aria-controls="test-l-2">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper1trigger2" aria-controls="test-l-2">
                   <span class="bs-stepper-circle">2</span>
                   <span class="bs-stepper-label">Password</span>
                 </button>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-l-3">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper1trigger3" aria-controls="test-l-3">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper1trigger3" aria-controls="test-l-3">
                   <span class="bs-stepper-circle">3</span>
                   <span class="bs-stepper-label">Validate</span>
                 </button>
               </div>
             </div>
             <div class="bs-stepper-content">
-              <form onSubmit="return false" class="tab-content">
-                <div id="test-l-1" role="tabpanel" class="tab-pane" aria-labelledby="stepper1trigger1">
+              <form onSubmit="return false">
+                <div id="test-l-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger1">
                   <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label>
                     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                   </div>
                   <button class="btn btn-primary" onclick="stepper1.next()">Next</button>
                 </div>
-                <div id="test-l-2" role="tabpanel" class="tab-pane" aria-labelledby="stepper1trigger2">
+                <div id="test-l-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger2">
                   <div class="form-group">
                     <label for="exampleInputPassword1">Password</label>
                     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
@@ -74,7 +74,7 @@ <h3>Linear stepper</h3>
                   <button class="btn btn-primary" onclick="stepper1.previous()">Previous</button>
                   <button class="btn btn-primary" onclick="stepper1.next()">Next</button>
                 </div>
-                <div id="test-l-3" role="tabpanel" class="tab-pane text-center" aria-labelledby="stepper1trigger3">
+                <div id="test-l-3" role="tabpanel" class="bs-stepper-pane text-center" aria-labelledby="stepper1trigger3">
                   <button class="btn btn-primary mt-5" onclick="stepper1.previous()">Previous</button>
                   <button type="submit" class="btn btn-primary mt-5">Submit</button>
                 </div>
@@ -87,7 +87,7 @@ <h3>Non linear stepper</h3>
           <div id="stepper2" class="bs-stepper">
             <div class="bs-stepper-header" role="tablist">
               <div class="step" data-target="#test-nl-1">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper2trigger1" aria-controls="test-nl-1">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper2trigger1" aria-controls="test-nl-1">
                   <span class="bs-stepper-circle">
                     <span class="fas fa-user" aria-hidden="true"></span>
                   </span>
@@ -96,7 +96,7 @@ <h3>Non linear stepper</h3>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-nl-2">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper2trigger2" aria-controls="test-nl-2">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper2trigger2" aria-controls="test-nl-2">
                   <span class="bs-stepper-circle">
                     <span class="fas fa-map-marked" aria-hidden="true"></span>
                   </span>
@@ -105,7 +105,7 @@ <h3>Non linear stepper</h3>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-nl-3">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper2trigger3" aria-controls="test-nl-3">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper2trigger3" aria-controls="test-nl-3">
                   <span class="bs-stepper-circle">
                     <span class="fas fa-save" aria-hidden="true"></span>
                   </span>
@@ -114,22 +114,22 @@ <h3>Non linear stepper</h3>
               </div>
             </div>
             <div class="bs-stepper-content">
-              <form onSubmit="return false" class="tab-content">
-                <div id="test-nl-1" role="tabpanel" class="tab-pane" aria-labelledby="stepper2trigger1">
+              <form onSubmit="return false">
+                <div id="test-nl-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger1">
                   <div class="form-group">
                     <label for="exampleInputName1">Name</label>
                     <input type="email" class="form-control" id="exampleInputName1" placeholder="Enter your name">
                   </div>
                   <button class="btn btn-primary" onclick="stepper2.next()">Next</button>
                 </div>
-                <div id="test-nl-2" role="tabpanel" class="tab-pane" aria-labelledby="stepper2trigger2">
+                <div id="test-nl-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger2">
                   <div class="form-group">
                     <label for="exampleInpuAddress1">Address</label>
                     <input type="email" class="form-control" id="exampleInpuAddress1" placeholder="Enter your address">
                   </div>
                   <button class="btn btn-primary" onclick="stepper2.next()">Next</button>
                 </div>
-                <div id="test-nl-3" role="tabpanel" class="tab-pane text-center" aria-labelledby="stepper2trigger3">
+                <div id="test-nl-3" role="tabpanel" class="bs-stepper-pane text-center" aria-labelledby="stepper2trigger3">
                   <button type="submit" class="btn btn-primary mt-5">Submit</button>
                 </div>
               </form>
@@ -141,7 +141,7 @@ <h3>Non linear stepper (with fade)</h3>
           <div id="stepper3" class="bs-stepper">
             <div class="bs-stepper-header" role="tablist">
               <div class="step" data-target="#test-nlf-1">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper3trigger1" aria-controls="test-nlf-1">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper3trigger1" aria-controls="test-nlf-1">
                   <span class="bs-stepper-circle">
                     <span class="fas fa-user" aria-hidden="true"></span>
                   </span>
@@ -150,7 +150,7 @@ <h3>Non linear stepper (with fade)</h3>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-nlf-2">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper3trigger2" aria-controls="test-nlf-2">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper3trigger2" aria-controls="test-nlf-2">
                   <span class="bs-stepper-circle">
                     <span class="fas fa-map-marked" aria-hidden="true"></span>
                   </span>
@@ -159,7 +159,7 @@ <h3>Non linear stepper (with fade)</h3>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-nlf-3">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper3trigger3" aria-controls="test-nlf-3">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper3trigger3" aria-controls="test-nlf-3">
                   <span class="bs-stepper-circle">
                     <span class="fas fa-save" aria-hidden="true"></span>
                   </span>
@@ -168,22 +168,22 @@ <h3>Non linear stepper (with fade)</h3>
               </div>
             </div>
             <div class="bs-stepper-content">
-              <form onSubmit="return false" class="tab-content">
-                <div id="test-nlf-1" role="tabpanel" class="tab-pane bs-stepper-pane bs-stepper-shown" aria-labelledby="stepper3trigger1">
+              <form onSubmit="return false">
+                <div id="test-nlf-1" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper3trigger1">
                   <div class="form-group">
                     <label for="exampleInputName2">Name</label>
                     <input type="email" class="form-control" id="exampleInputName2" placeholder="Enter your name">
                   </div>
                   <button class="btn btn-primary" onclick="stepper3.next()">Next</button>
                 </div>
-                <div id="test-nlf-2" role="tabpanel" class="tab-pane bs-stepper-pane" aria-labelledby="stepper3trigger2">
+                <div id="test-nlf-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper3trigger2">
                   <div class="form-group">
                     <label for="exampleInpuAddress2">Address</label>
                     <input type="email" class="form-control" id="exampleInpuAddress2" placeholder="Enter your address">
                   </div>
                   <button class="btn btn-primary" onclick="stepper3.next()">Next</button>
                 </div>
-                <div id="test-nlf-3" role="tabpanel" class="tab-pane bs-stepper-pane text-center" aria-labelledby="stepper3trigger3">
+                <div id="test-nlf-3" role="tabpanel" class="bs-stepper-pane fade text-center" aria-labelledby="stepper3trigger3">
                   <button type="submit" class="btn btn-primary mt-5">Submit</button>
                 </div>
               </form>
@@ -192,39 +192,39 @@ <h3>Non linear stepper (with fade)</h3>
         </div>
         <div class="mb-5 p-4 bg-white shadow-sm">
           <h3>Vertical linear stepper</h3>
-          <div id="stepper4" class="bs-stepper bs-stepper-vertical">
+          <div id="stepper4" class="bs-stepper vertical">
             <div class="bs-stepper-header" role="tablist">
               <div class="step" data-target="#test-vl-1">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper4trigger1" aria-controls="test-vl-1">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper4trigger1" aria-controls="test-vl-1">
                   <span class="bs-stepper-circle">1</span>
                   <span class="bs-stepper-label">Email</span>
                 </button>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-vl-2">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper4trigger2" aria-controls="test-vl-2">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper4trigger2" aria-controls="test-vl-2">
                   <span class="bs-stepper-circle">2</span>
                   <span class="bs-stepper-label">Password</span>
                 </button>
               </div>
               <div class="bs-stepper-line"></div>
               <div class="step" data-target="#test-vl-3">
-                <button type="button" class="bs-stepper-trigger" role="tab" id="stepper4trigger3" aria-controls="test-vl-3">
+                <button type="button" class="btn step-trigger" role="tab" id="stepper4trigger3" aria-controls="test-vl-3">
                   <span class="bs-stepper-circle">3</span>
                   <span class="bs-stepper-label">Validate</span>
                 </button>
               </div>
             </div>
             <div class="bs-stepper-content">
-              <form onSubmit="return false" class="tab-content">
-                <div id="test-vl-1" role="tabpanel" class="tab-pane bs-stepper-pane bs-stepper-shown fade" aria-labelledby="stepper4trigger1">
+              <form onSubmit="return false">
+                <div id="test-vl-1" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper4trigger1">
                   <div class="form-group">
                     <label for="exampleInputEmailV1">Email address</label>
                     <input type="email" class="form-control" id="exampleInputEmailV1" placeholder="Enter email">
                   </div>
                   <button class="btn btn-primary" onclick="stepper4.next()">Next</button>
                 </div>
-                <div id="test-vl-2" role="tabpanel" class="tab-pane bs-stepper-pane fade" aria-labelledby="stepper4trigger2">
+                <div id="test-vl-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper4trigger2">
                   <div class="form-group">
                     <label for="exampleInputPasswordV1">Password</label>
                     <input type="password" class="form-control" id="exampleInputPasswordV1" placeholder="Password">
@@ -232,7 +232,7 @@ <h3>Vertical linear stepper</h3>
                   <button class="btn btn-primary" onclick="stepper4.previous()">Previous</button>
                   <button class="btn btn-primary" onclick="stepper4.next()">Next</button>
                 </div>
-                <div id="test-vl-3" role="tabpanel" class="tab-pane bs-stepper-pane fade" aria-labelledby="stepper4trigger3">
+                <div id="test-vl-3" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper4trigger3">
                   <button class="btn btn-primary mt-5" onclick="stepper4.previous()">Previous</button>
                   <button type="submit" class="btn btn-primary mt-5">Submit</button>
                 </div>
@@ -248,10 +248,9 @@ <h3>Vertical linear stepper</h3>
         </p>
       </div>
     </footer>
-    <script src="https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.min.js"></script>
-    <script src="dist/js/bs-stepper.min.js"></script>
-    <script src="js/main.js"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+    <script src="dist/js/bs-stepper.min.js"></script>
+    <script src="js/main.js"></script>
   </body>
 </html>
diff --git a/docs/js/main.js b/docs/js/main.js
index 580908a..5f3a030 100644
--- a/docs/js/main.js
+++ b/docs/js/main.js
@@ -13,23 +13,4 @@ document.addEventListener('DOMContentLoaded', function () {
     animation: true
   })
   stepper4 = new Stepper(document.querySelector('#stepper4'))
-
-  function handleBreakPointChange (breakpoint) {
-    if (breakpoint === 'large') {
-      stepper1._element.classList.add('vertical')
-      stepper2._element.classList.add('vertical')
-      stepper3._element.classList.add('vertical')
-    } else if (breakpoint === 'xLarge' && stepper1._element.classList.contains('vertical')) {
-      stepper1._element.classList.remove('vertical')
-      stepper2._element.classList.remove('vertical')
-      stepper3._element.classList.remove('vertical')
-    }
-  }
-
-  window.addEventListener('new.bs.breakpoint', function (event) {
-    handleBreakPointChange(event.detail)
-  })
-
-  bsBreakpoints.init()
-  handleBreakPointChange(bsBreakpoints.detectBreakpoint())
 })
diff --git a/package.json b/package.json
index d13ef74..8e2624c 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,9 @@
     "css-minify": "cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/bs-stepper.min.css dist/css/bs-stepper.css",
     "dev": "rollup --environment DEV -c -w",
     "test:unit": "karma start tests/karma.conf.js",
-    "test": "npm run standard && npm run build-js:unit && npm run test:unit && npm run build",
+    "test": "npm run standard && npm run css-lint && npm run build-js:unit && npm run test:unit && npm run build",
     "standard": "standard src/js/* tests/units/*.spec.js",
+    "css-lint": "stylelint src/css/bs-stepper.css",
     "deploy": "gh-pages -d docs",
     "docs-build": "shx mkdir -p docs/dist/ && shx cp -r dist/css/ docs/dist/ && shx cp -r dist/js/ docs/dist/",
     "docs-serve": "http-server docs/ -c-1 -o",
diff --git a/src/css/bs-stepper.css b/src/css/bs-stepper.css
index f925195..c459636 100644
--- a/src/css/bs-stepper.css
+++ b/src/css/bs-stepper.css
@@ -4,40 +4,56 @@
  * Licensed under MIT (https://github.com/Johann-S/bs-stepper/blob/master/LICENSE)
  */
 
-.bs-stepper-trigger {
+.bs-stepper .step-trigger,
+.bs-stepper a {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   padding: 20px;
+  font-size: 1rem;
   font-weight: 700;
+  line-height: 1.5;
   color: #6c757d;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
-  cursor: pointer;
+  vertical-align: middle;
+  user-select: none;
   background-color: transparent;
   border: none;
+  border-radius: .25rem;
   transition: background-color .15s ease-out, color .15s ease-out;
 }
 
-.bs-stepper-trigger:disabled {
+.bs-stepper .step-trigger:not(:disabled):not(.disabled),
+.bs-stepper a:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+.bs-stepper .step-trigger:disabled,
+.bs-stepper .step-trigger.disabled,
+.bs-stepper a:disabled,
+.bs-stepper .disabled:not(.step-trigger) {
   pointer-events: none;
   opacity: .65;
 }
 
-.bs-stepper-trigger:focus {
+.bs-stepper .step-trigger:focus,
+.bs-stepper a:focus {
   color: #007bff;
   outline: none;
 }
 
-.bs-stepper-trigger:hover {
+.bs-stepper .step-trigger:hover,
+.bs-stepper a:hover {
   text-decoration: none;
   background-color: rgba(0, 0, 0, .06);
 }
 
 @media (max-width: 520px) {
-  .bs-stepper-trigger {
+  .bs-stepper .step-trigger,
+  .bs-stepper a {
     flex-direction: column;
     padding: 10px;
   }
@@ -60,7 +76,8 @@
   }
 }
 
-.bs-stepper-line {
+.bs-stepper-line,
+.bs-stepper .line {
   flex: 1 0 32px;
   min-width: 1px;
   min-height: 1px;
@@ -68,9 +85,9 @@
   background-color: rgba(0, 0, 0, .12);
 }
 
-
 @media (max-width: 400px) {
-  .bs-stepper-line {
+  .bs-stepper-line,
+  .bs-stepper .line {
     flex-basis: 20px;
   }
 }
@@ -103,26 +120,40 @@
   }
 }
 
-.bs-stepper-vertical {
+.bs-stepper.vertical {
   display: flex;
 }
 
-.bs-stepper-vertical .bs-stepper-header {
+.bs-stepper.vertical .bs-stepper-header {
   flex-direction: column;
   align-items: stretch;
   margin: 0;
 }
 
-.bs-stepper-vertical .bs-stepper-pane {
+.bs-stepper.vertical .bs-stepper-pane,
+.bs-stepper.vertical .content {
   display: block;
 }
 
-.bs-stepper-pane {
+.bs-stepper-pane,
+.bs-stepper .content {
   display: none;
   opacity: 0;
 }
 
-.bs-stepper-pane.bs-stepper-shown {
+.bs-stepper-pane.active,
+.bs-stepper .content.active {
   display: block;
   opacity: 1;
 }
+
+.bs-stepper-pane.dstepper-block,
+.bs-stepper .content.dstepper-block {
+  opacity: 1;
+}
+
+.bs-stepper .content.fade,
+.bs-stepper-pane.fade {
+  transition-duration: .3s;
+  transition-property: opacity;
+}
diff --git a/src/js/util.js b/src/js/util.js
index d60b02b..7d19b7a 100644
--- a/src/js/util.js
+++ b/src/js/util.js
@@ -3,14 +3,14 @@ import { WinEvent, closest } from './polyfill'
 const MILLISECONDS_MULTIPLIER = 1000
 const Selectors = {
   STEPS: '.step',
-  TRIGGER: '.bs-stepper-trigger, a',
+  TRIGGER: '.step-trigger, a',
   STEPPER: '.bs-stepper'
 }
 
 const ClassName = {
   ACTIVE: 'active',
   LINEAR: 'linear',
-  BLOCK: 'bs-stepper-shown',
+  BLOCK: 'dstepper-block',
   NONE: 'dstepper-none',
   FADE: 'fade'
 }
diff --git a/tests/index.html b/tests/index.html
index 73a043e..ec50036 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -16,21 +16,21 @@ <h2>Linear stepper</h2>
           <div id="stepper1" class="bs-stepper">
             <div class="bs-stepper-header">
               <div class="step" data-target="#test-l-1">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">1</span>
                   <span class="bs-stepper-label">First step</span>
                 </button>
               </div>
               <div class="line"></div>
               <div class="step" data-target="#test-l-2">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">2</span>
                   <span class="bs-stepper-label">Second step</span>
                 </button>
               </div>
               <div class="line"></div>
               <div class="step" data-target="#test-l-3">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">3</span>
                   <span class="bs-stepper-label">Third step</span>
                 </button>
@@ -58,21 +58,21 @@ <h2>Non linear stepper</h2>
           <div id="stepper2" class="bs-stepper">
             <div class="bs-stepper-header">
               <div class="step" data-target="#test-nl-1">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">1</span>
                   <span class="bs-stepper-label">First step</span>
                 </button>
               </div>
               <div class="line"></div>
               <div class="step" data-target="#test-nl-2">
-                <div class="btn btn-link bs-stepper-trigger">
+                <div class="btn step-trigger">
                   <span class="bs-stepper-circle">2</span>
                   <span class="bs-stepper-label">Second step</span>
                 </div>
               </div>
               <div class="line"></div>
               <div class="step" data-target="#test-nl-3">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">3</span>
                   <span class="bs-stepper-label">Third step</span>
                 </button>
@@ -100,21 +100,21 @@ <h2>Vertical stepper</h2>
           <div id="stepper3" class="bs-stepper vertical">
             <div class="bs-stepper-header">
               <div class="step" data-target="#test-lv-1">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">1</span>
                   <span class="bs-stepper-label">First step</span>
                 </button>
               </div>
               <div class="line"></div>
               <div class="step" data-target="#test-lv-2">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">2</span>
                   <span class="bs-stepper-label">Second step</span>
                 </button>
               </div>
               <div class="line"></div>
               <div class="step" data-target="#test-lv-3">
-                <button type="button" class="btn btn-link bs-stepper-trigger">
+                <button type="button" class="btn step-trigger">
                   <span class="bs-stepper-circle">3</span>
                   <span class="bs-stepper-label">Third step</span>
                 </button>
diff --git a/tests/units/main.spec.js b/tests/units/main.spec.js
index 80f4adf..3f3411a 100644
--- a/tests/units/main.spec.js
+++ b/tests/units/main.spec.js
@@ -21,10 +21,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger" id="trigger1">1</button>',
+        '    <button class="step-trigger" id="trigger1">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger" id="trigger2">2</button>',
+        '    <button class="step-trigger" id="trigger2">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -61,10 +61,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -90,10 +90,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button id="trigger1" class="bs-stepper-trigger">1</button>',
+        '    <button id="trigger1" class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button id="trigger2" class="bs-stepper-trigger">2</button>',
+        '    <button id="trigger2" class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -146,10 +146,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button id="trigger2" class="bs-stepper-trigger">2</button>',
+        '    <button id="trigger2" class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -176,10 +176,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -206,10 +206,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button id="trigger1" class="bs-stepper-trigger">1</button>',
+        '    <button id="trigger1" class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button id="trigger2" class="bs-stepper-trigger">2</button>',
+        '    <button id="trigger2" class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -236,10 +236,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -259,10 +259,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -285,10 +285,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -315,10 +315,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -343,10 +343,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -368,13 +368,13 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div class="step" data-target="#test3">',
-        '    <button class="bs-stepper-trigger">3</button>',
+        '    <button class="step-trigger">3</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -413,10 +413,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -445,10 +445,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button class="bs-stepper-trigger">1</button>',
+        '    <button class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button class="bs-stepper-trigger">2</button>',
+        '    <button class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',
@@ -477,10 +477,10 @@ describe('Stepper', function () {
       fixture.innerHTML = [
         '<div id="myStepper" class="bs-stepper">',
         '  <div class="step" data-target="#test1">',
-        '    <button id="trigger1" class="bs-stepper-trigger">1</button>',
+        '    <button id="trigger1" class="step-trigger">1</button>',
         '  </div>',
         '  <div class="step" data-target="#test2">',
-        '    <button id="trigger2" class="bs-stepper-trigger">2</button>',
+        '    <button id="trigger2" class="step-trigger">2</button>',
         '  </div>',
         '  <div id="test1">1</div>',
         '  <div id="test2">2</div>',