Add `bs` in data attributes

- Add `bs` in data APIs everywhere
- Update unit tests

14 files changed, 278 insertions, 262 deletions

diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js
index 9372215b6..a746d8501 100644
--- a/js/tests/unit/alert.spec.js
+++ b/js/tests/unit/alert.spec.js
@@ -23,7 +23,7 @@ describe('Alert', () => {
     it('should close an alert without instantiating it manually', () => {
       fixtureEl.innerHTML = [
         '<div class="alert">',
-        '  <button type="button" data-dismiss="alert">x</button>',
+        '  <button type="button" data-bs-dismiss="alert">x</button>',
         '</div>'
       ].join('')
 
@@ -36,7 +36,7 @@ describe('Alert', () => {
     it('should close an alert without instantiating it manually with the parent selector', () => {
       fixtureEl.innerHTML = [
         '<div class="alert">',
-        '  <button type="button" data-target=".alert" data-dismiss="alert">x</button>',
+        '  <button type="button" data-bs-target=".alert" data-bs-dismiss="alert">x</button>',
         '</div>'
       ].join('')
 
diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js
index ac32b4b89..44d7b54b1 100644
--- a/js/tests/unit/button.spec.js
+++ b/js/tests/unit/button.spec.js
@@ -27,8 +27,8 @@ describe('Button', () => {
   describe('data-api', () => {
     it('should toggle active class on click', () => {
       fixtureEl.innerHTML = [
-        '<button class="btn" data-toggle="button">btn</button>',
-        '<button class="btn testParent" data-toggle="button"><div class="test"></div></button>'
+        '<button class="btn" data-bs-toggle="button">btn</button>',
+        '<button class="btn testParent" data-bs-toggle="button"><div class="test"></div></button>'
       ].join('')
 
       const btn = fixtureEl.querySelector('.btn')
@@ -53,7 +53,7 @@ describe('Button', () => {
 
   describe('toggle', () => {
     it('should toggle aria-pressed', () => {
-      fixtureEl.innerHTML = '<button class="btn" data-toggle="button" aria-pressed="false"></button>'
+      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button" aria-pressed="false"></button>'
 
       const btnEl = fixtureEl.querySelector('.btn')
       const button = new Button(btnEl)
@@ -70,7 +70,7 @@ describe('Button', () => {
 
   describe('dispose', () => {
     it('should dispose a button', () => {
-      fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
+      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
 
       const btnEl = fixtureEl.querySelector('.btn')
       const button = new Button(btnEl)
@@ -85,7 +85,7 @@ describe('Button', () => {
 
   describe('jQueryInterface', () => {
     it('should handle config passed and toggle existing button', () => {
-      fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
+      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
 
       const btnEl = fixtureEl.querySelector('.btn')
       const button = new Button(btnEl)
@@ -101,7 +101,7 @@ describe('Button', () => {
     })
 
     it('should create new button instance and call toggle', () => {
-      fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
+      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
 
       const btnEl = fixtureEl.querySelector('.btn')
 
@@ -115,7 +115,7 @@ describe('Button', () => {
     })
 
     it('should just create a button instance without calling toggle', () => {
-      fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>'
+      fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>'
 
       const btnEl = fixtureEl.querySelector('.btn')
 
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index a4bd1bac8..8c928c429 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -313,7 +313,7 @@ describe('Carousel', () => {
       Simulator.setType('pointer')
 
       fixtureEl.innerHTML = [
-        '<div class="carousel" data-interval="false">',
+        '<div class="carousel" data-bs-interval="false">',
         '  <div class="carousel-inner">',
         '    <div id="item" class="carousel-item">',
         '      <img alt="">',
@@ -357,7 +357,7 @@ describe('Carousel', () => {
       Simulator.setType('pointer')
 
       fixtureEl.innerHTML = [
-        '<div class="carousel" data-interval="false">',
+        '<div class="carousel" data-bs-interval="false">',
         '  <div class="carousel-inner">',
         '    <div id="item" class="carousel-item active">',
         '      <img alt="">',
@@ -396,7 +396,7 @@ describe('Carousel', () => {
       document.documentElement.ontouchstart = () => {}
 
       fixtureEl.innerHTML = [
-        '<div class="carousel" data-interval="false">',
+        '<div class="carousel" data-bs-interval="false">',
         '  <div class="carousel-inner">',
         '    <div id="item" class="carousel-item">',
         '      <img alt="">',
@@ -434,7 +434,7 @@ describe('Carousel', () => {
       document.documentElement.ontouchstart = () => {}
 
       fixtureEl.innerHTML = [
-        '<div class="carousel" data-interval="false">',
+        '<div class="carousel" data-bs-interval="false">',
         '  <div class="carousel-inner">',
         '    <div id="item" class="carousel-item active">',
         '      <img alt="">',
@@ -472,7 +472,7 @@ describe('Carousel', () => {
       clearPointerEvents()
       document.documentElement.ontouchstart = () => {}
 
-      fixtureEl.innerHTML = '<div class="carousel" data-interval="false"></div>'
+      fixtureEl.innerHTML = '<div class="carousel" data-bs-interval="false"></div>'
 
       const carouselEl = fixtureEl.querySelector('.carousel')
       const carousel = new Carousel(carouselEl)
@@ -660,13 +660,13 @@ describe('Carousel', () => {
       fixtureEl.innerHTML = [
         '<div id="myCarousel" class="carousel slide">',
         '  <ol class="carousel-indicators">',
-        '    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>',
-        '    <li id="secondIndicator" data-target="#myCarousel" data-slide-to="1"></li>',
-        '    <li data-target="#myCarousel" data-slide-to="2"></li>',
+        '    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>',
+        '    <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>',
+        '    <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>',
         '  </ol>',
         '  <div class="carousel-inner">',
         '    <div class="carousel-item active">item 1</div>',
-        '    <div class="carousel-item" data-interval="7">item 2</div>',
+        '    <div class="carousel-item" data-bs-interval="7">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
         '</div>'
@@ -689,7 +689,7 @@ describe('Carousel', () => {
     it('should not call next when the page is not visible', () => {
       fixtureEl.innerHTML = [
         '<div style="display: none;">',
-        '  <div class="carousel" data-interval="false"></div>',
+        '  <div class="carousel" data-bs-interval="false"></div>',
         '</div>'
       ].join('')
 
@@ -878,8 +878,8 @@ describe('Carousel', () => {
       fixtureEl.innerHTML = [
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
-        '    <div class="carousel-item active" data-interval="7">item 1</div>',
-        '    <div id="secondItem" class="carousel-item" data-interval="9385">item 2</div>',
+        '    <div class="carousel-item active" data-bs-interval="7">item 1</div>',
+        '    <div id="secondItem" class="carousel-item" data-bs-interval="9385">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
         '</div>'
@@ -958,7 +958,7 @@ describe('Carousel', () => {
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
         '    <div class="carousel-item active">item 1</div>',
-        '    <div class="carousel-item" data-interval="7">item 2</div>',
+        '    <div class="carousel-item" data-bs-interval="7">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
         '</div>'
@@ -985,7 +985,7 @@ describe('Carousel', () => {
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
         '    <div class="carousel-item active">item 1</div>',
-        '    <div class="carousel-item" data-interval="7">item 2</div>',
+        '    <div class="carousel-item" data-bs-interval="7">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
         '</div>'
@@ -1010,7 +1010,7 @@ describe('Carousel', () => {
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
         '    <div class="carousel-item active">item 1</div>',
-        '    <div class="carousel-item" data-interval="7">item 2</div>',
+        '    <div class="carousel-item" data-bs-interval="7">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
         '</div>'
@@ -1045,7 +1045,7 @@ describe('Carousel', () => {
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
         '    <div class="carousel-item active">item 1</div>',
-        '    <div class="carousel-item" data-interval="7">item 2</div>',
+        '    <div class="carousel-item" data-bs-interval="7">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
         '</div>'
@@ -1125,8 +1125,8 @@ describe('Carousel', () => {
   })
 
   describe('data-api', () => {
-    it('should init carousels with data-ride="carousel" on load', () => {
-      fixtureEl.innerHTML = '<div data-ride="carousel"></div>'
+    it('should init carousels with data-bs-ride="carousel" on load', () => {
+      fixtureEl.innerHTML = '<div data-bs-ride="carousel"></div>'
 
       const carouselEl = fixtureEl.querySelector('div')
       const loadEvent = createEvent('load')
@@ -1144,8 +1144,8 @@ describe('Carousel', () => {
         '    <div id="item2" class="carousel-item">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
-        '  <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
-        '  <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>',
+        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
+        '  <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
         '</div>'
       ].join('')
 
@@ -1160,7 +1160,7 @@ describe('Carousel', () => {
       }, 10)
     })
 
-    it('should create carousel and go to the next slide on click with data-slide-to', done => {
+    it('should create carousel and go to the next slide on click with data-bs-slide-to', done => {
       fixtureEl.innerHTML = [
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
@@ -1168,7 +1168,7 @@ describe('Carousel', () => {
         '    <div id="item2" class="carousel-item">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
-        '  <div id="next" data-target="#myCarousel" data-slide-to="1"></div>',
+        '  <div id="next" data-bs-target="#myCarousel" data-bs-slide-to="1"></div>',
         '</div>'
       ].join('')
 
@@ -1191,8 +1191,8 @@ describe('Carousel', () => {
         '    <div class="carousel-item">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
-        '  <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
-        '  <div id="next" class="carousel-control-next" role="button" data-slide="next"></div>',
+        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
+        '  <div id="next" class="carousel-control-next" role="button" data-bs-slide="next"></div>',
         '</div>'
       ].join('')
 
@@ -1211,8 +1211,8 @@ describe('Carousel', () => {
         '    <div id="item2" class="carousel-item">item 2</div>',
         '    <div class="carousel-item">item 3</div>',
         '  </div>',
-        '  <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
-        '  <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>',
+        '  <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>',
+        '  <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>',
         '</div>'
       ].join('')
 
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index a5e101aad..c1ead859a 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -32,7 +32,7 @@ describe('Collapse', () => {
       fixtureEl.innerHTML = [
         '<div class="my-collapse">',
         '  <div class="item">',
-        '    <a data-toggle="collapse" href="#">Toggle item</a>',
+        '    <a data-bs-toggle="collapse" href="#">Toggle item</a>',
         '    <div class="collapse">Lorem ipsum</div>',
         '  </div>',
         '</div>'
@@ -55,7 +55,7 @@ describe('Collapse', () => {
       fixtureEl.innerHTML = [
         '<div class="my-collapse">',
         '  <div class="item">',
-        '    <a data-toggle="collapse" href="#">Toggle item</a>',
+        '    <a data-bs-toggle="collapse" href="#">Toggle item</a>',
         '    <div class="collapse">Lorem ipsum</div>',
         '  </div>',
         '</div>'
@@ -74,7 +74,7 @@ describe('Collapse', () => {
       fixtureEl.innerHTML = [
         '<div class="my-collapse">',
         '  <div class="item">',
-        '    <a data-toggle="collapse" href="#">Toggle item</a>',
+        '    <a data-bs-toggle="collapse" href="#">Toggle item</a>',
         '    <div class="collapse">Lorem ipsum</div>',
         '  </div>',
         '</div>'
@@ -120,15 +120,15 @@ describe('Collapse', () => {
       expect(collapse.hide).toHaveBeenCalled()
     })
 
-    it('should find collapse children if they have collapse class too not only data-parent', done => {
+    it('should find collapse children if they have collapse class too not only data-bs-parent', done => {
       fixtureEl.innerHTML = [
         '<div class="my-collapse">',
         '  <div class="item">',
-        '    <a data-toggle="collapse" href="#">Toggle item 1</a>',
+        '    <a data-bs-toggle="collapse" href="#">Toggle item 1</a>',
         '    <div id="collapse1" class="collapse show">Lorem ipsum 1</div>',
         '  </div>',
         '  <div class="item">',
-        '    <a id="triggerCollapse2" data-toggle="collapse" href="#">Toggle item 2</a>',
+        '    <a id="triggerCollapse2" data-bs-toggle="collapse" href="#">Toggle item 2</a>',
         '    <div id="collapse2" class="collapse">Lorem ipsum 2</div>',
         '  </div>',
         '</div>'
@@ -376,7 +376,7 @@ describe('Collapse', () => {
   describe('data-api', () => {
     it('should show multiple collapsed elements', done => {
       fixtureEl.innerHTML = [
-        '<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>',
+        '<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>',
         '<div id="collapse1" class="collapse multi"></div>',
         '<div id="collapse2" class="collapse multi"></div>'
       ].join('')
@@ -398,7 +398,7 @@ describe('Collapse', () => {
 
     it('should hide multiple collapsed elements', done => {
       fixtureEl.innerHTML = [
-        '<a role="button" data-toggle="collapse" href=".multi"></a>',
+        '<a role="button" data-bs-toggle="collapse" href=".multi"></a>',
         '<div id="collapse1" class="collapse multi show"></div>',
         '<div id="collapse2" class="collapse multi show"></div>'
       ].join('')
@@ -420,8 +420,8 @@ describe('Collapse', () => {
 
     it('should remove "collapsed" class from target when collapse is shown', done => {
       fixtureEl.innerHTML = [
-        '<a id="link1" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>',
-        '<a id="link2" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>',
+        '<a id="link1" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-target="#test1"></a>',
+        '<a id="link2" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-target="#test1"></a>',
         '<div id="test1"></div>'
       ].join('')
 
@@ -442,8 +442,8 @@ describe('Collapse', () => {
 
     it('should add "collapsed" class to target when collapse is hidden', done => {
       fixtureEl.innerHTML = [
-        '<a id="link1" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>',
-        '<a id="link2" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>',
+        '<a id="link1" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>',
+        '<a id="link2" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>',
         '<div id="test1" class="show"></div>'
       ].join('')
 
@@ -466,12 +466,12 @@ describe('Collapse', () => {
       fixtureEl.innerHTML = [
         '<div id="accordion">',
         '  <div class="item">',
-        '    <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
-        '    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>',
+        '    <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
+        '    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
         '  </div>',
         '  <div class="item">',
-        '    <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
-        '    <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
+        '    <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '    <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
         '  </div>',
         '</div>'
       ].join('')
@@ -499,7 +499,7 @@ describe('Collapse', () => {
 
     it('should not prevent event for input', done => {
       fixtureEl.innerHTML = [
-        '<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1">',
+        '<input type="checkbox" data-bs-toggle="collapse" data-bs-target="#collapsediv1">',
         '<div id="collapsediv1"></div>'
       ].join('')
 
@@ -521,14 +521,14 @@ describe('Collapse', () => {
         '  <div class="row">',
         '    <div class="col-lg-6">',
         '      <div class="item">',
-        '        <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
-        '        <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>',
+        '        <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
+        '        <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
         '      </div>',
         '    </div>',
         '    <div class="col-lg-6">',
         '      <div class="item">',
-        '        <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
-        '        <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
+        '        <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '        <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
         '      </div>',
         '    </div>',
         '  </div>',
@@ -569,12 +569,12 @@ describe('Collapse', () => {
     it('should allow accordion to target multiple elements', done => {
       fixtureEl.innerHTML = [
         '<div id="accordion">',
-        '  <a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>',
-        '  <a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>',
-        '  <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>',
-        '  <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>',
-        '  <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>',
-        '  <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>',
+        '  <a id="linkTriggerOne" data-bs-toggle="collapse" data-bs-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>',
+        '  <a id="linkTriggerTwo" data-bs-toggle="collapse" data-bs-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '  <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>',
+        '  <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>',
+        '  <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>',
+        '  <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>',
         '</div>'
       ].join('')
 
@@ -647,19 +647,19 @@ describe('Collapse', () => {
       fixtureEl.innerHTML = [
         '<div id="accordion">',
         '  <div class="item">',
-        '    <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
-        '    <div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">',
+        '    <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
+        '    <div id="collapseOne" data-bs-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">',
         '      <div id="nestedAccordion">',
         '        <div class="item">',
-        '          <a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
-        '          <div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>',
+        '          <a id="nestedLinkTrigger" data-bs-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
+        '          <div id="nestedCollapseOne" data-bs-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>',
         '        </div>',
         '      </div>',
         '    </div>',
         '  </div>',
         '  <div class="item">',
-        '    <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
-        '    <div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
+        '    <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '    <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
         '  </div>',
         '</div>'
       ].join('')
@@ -703,9 +703,9 @@ describe('Collapse', () => {
 
     it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', done => {
       fixtureEl.innerHTML = [
-        '<a id="trigger1" role="button" data-toggle="collapse" href="#test1"></a>',
-        '<a id="trigger2" role="button" data-toggle="collapse" href="#test2"></a>',
-        '<a id="trigger3" role="button" data-toggle="collapse" href=".multi"></a>',
+        '<a id="trigger1" role="button" data-bs-toggle="collapse" href="#test1"></a>',
+        '<a id="trigger2" role="button" data-bs-toggle="collapse" href="#test2"></a>',
+        '<a id="trigger3" role="button" data-bs-toggle="collapse" href=".multi"></a>',
         '<div id="test1" class="multi"></div>',
         '<div id="test2" class="multi"></div>'
       ].join('')
diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js
index 8d8118f2b..747e8bfd7 100644
--- a/js/tests/unit/dom/manipulator.spec.js
+++ b/js/tests/unit/dom/manipulator.spec.js
@@ -60,14 +60,30 @@ describe('Manipulator', () => {
       expect().nothing()
     })
 
-    it('should get all data attributes', () => {
-      fixtureEl.innerHTML = '<div data-test="js" data-test2="js2" ></div>'
+    it('should get all data attributes, without bs prefixed as well', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-bs-target="#element" data-another="value"></div>'
 
       const div = fixtureEl.querySelector('div')
 
       expect(Manipulator.getDataAttributes(div)).toEqual({
-        test: 'js',
-        test2: 'js2'
+        bsToggle: 'tabs',
+        bsTarget: '#element',
+        another: 'value',
+        toggle: 'tabs',
+        target: '#element'
+      })
+    })
+
+    it('should remove just prefixed bs keyword from the attributes and override original attribute with bs prefixed', () => {
+      fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-toggle="override" data-target-bs="#element" data-in-bs-out="in-between"></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(Manipulator.getDataAttributes(div)).toEqual({
+        bsToggle: 'tabs',
+        targetBs: '#element',
+        inBsOut: 'in-between',
+        toggle: 'tabs'
       })
     })
   })
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index 17a5b41cf..b1a99e7e6 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -39,7 +39,7 @@ describe('Dropdown', () => {
     it('should create offset modifier correctly when offset option is a function', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
@@ -47,7 +47,7 @@ describe('Dropdown', () => {
       ].join('')
 
       const getOffset = offsets => offsets
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown, {
         offset: getOffset
       })
@@ -61,7 +61,7 @@ describe('Dropdown', () => {
     it('should create offset modifier correctly when offset option is not a function', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
@@ -69,7 +69,7 @@ describe('Dropdown', () => {
       ].join('')
 
       const myOffset = 7
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown, {
         offset: myOffset
       })
@@ -80,7 +80,7 @@ describe('Dropdown', () => {
       expect(offset.fn).toBeUndefined()
     })
 
-    it('should add a listener on trigger which do not have data-toggle="dropdown"', () => {
+    it('should add a listener on trigger which do not have data-bs-toggle="dropdown"', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
         '  <button class="btn">Dropdown</button>',
@@ -103,14 +103,14 @@ describe('Dropdown', () => {
     it('should allow to pass config to popper.js with `popperConfig`', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown, {
         popperConfig: {
           placement: 'left'
@@ -127,14 +127,14 @@ describe('Dropdown', () => {
     it('should toggle a dropdown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -150,13 +150,13 @@ describe('Dropdown', () => {
     it('should destroy old popper references on toggle', done => {
       fixtureEl.innerHTML = [
         '<div class="first dropdown">',
-        '  <button class="firstBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="firstBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>',
         '<div class="second dropdown">',
-        '  <button class="secondBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="secondBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
@@ -187,7 +187,7 @@ describe('Dropdown', () => {
     it('should toggle a dropdown and add/remove event listener on mobile', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
@@ -195,7 +195,7 @@ describe('Dropdown', () => {
       ].join('')
 
       const defaultValueOnTouchStart = document.documentElement.ontouchstart
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -226,14 +226,14 @@ describe('Dropdown', () => {
     it('should toggle a dropdown at the right', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu dropdown-menu-right">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -249,14 +249,14 @@ describe('Dropdown', () => {
     it('should toggle a dropup', done => {
       fixtureEl.innerHTML = [
         '<div class="dropup">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropupEl = fixtureEl.querySelector('.dropup')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -272,14 +272,14 @@ describe('Dropdown', () => {
     it('should toggle a dropup at the right', done => {
       fixtureEl.innerHTML = [
         '<div class="dropup">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu dropdown-menu-right">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropupEl = fixtureEl.querySelector('.dropup')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -295,14 +295,14 @@ describe('Dropdown', () => {
     it('should toggle a dropright', done => {
       fixtureEl.innerHTML = [
         '<div class="dropright">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const droprightEl = fixtureEl.querySelector('.dropright')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -318,14 +318,14 @@ describe('Dropdown', () => {
     it('should toggle a dropleft', done => {
       fixtureEl.innerHTML = [
         '<div class="dropleft">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropleftEl = fixtureEl.querySelector('.dropleft')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -341,14 +341,14 @@ describe('Dropdown', () => {
     it('should toggle a dropdown with parent reference', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown, {
         reference: 'parent'
@@ -366,14 +366,14 @@ describe('Dropdown', () => {
     it('should toggle a dropdown with a dom node reference', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown, {
         reference: fixtureEl
@@ -391,14 +391,14 @@ describe('Dropdown', () => {
     it('should toggle a dropdown with a jquery object reference', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown, {
         reference: { 0: fixtureEl, jquery: 'jQuery' }
@@ -416,14 +416,14 @@ describe('Dropdown', () => {
     it('should not toggle a dropdown if the element is disabled', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -442,14 +442,14 @@ describe('Dropdown', () => {
     it('should not toggle a dropdown if the element contains .disabled', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -468,14 +468,14 @@ describe('Dropdown', () => {
     it('should not toggle a dropdown if the menu is shown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu show">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -494,14 +494,14 @@ describe('Dropdown', () => {
     it('should not toggle a dropdown if show event is prevented', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -526,14 +526,14 @@ describe('Dropdown', () => {
     it('should show a dropdown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -548,14 +548,14 @@ describe('Dropdown', () => {
     it('should not show a dropdown if the element is disabled', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -574,14 +574,14 @@ describe('Dropdown', () => {
     it('should not show a dropdown if the element contains .disabled', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -600,14 +600,14 @@ describe('Dropdown', () => {
     it('should not show a dropdown if the menu is shown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu show">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -626,14 +626,14 @@ describe('Dropdown', () => {
     it('should not show a dropdown if show event is prevented', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -658,14 +658,14 @@ describe('Dropdown', () => {
     it('should hide a dropdown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu show">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
@@ -681,14 +681,14 @@ describe('Dropdown', () => {
     it('should hide a dropdown and destroy popper', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -708,14 +708,14 @@ describe('Dropdown', () => {
     it('should not hide a dropdown if the element is disabled', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu show">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
@@ -735,14 +735,14 @@ describe('Dropdown', () => {
     it('should not hide a dropdown if the element contains .disabled', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu show">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
@@ -762,14 +762,14 @@ describe('Dropdown', () => {
     it('should not hide a dropdown if the menu is not shown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdown = new Dropdown(btnDropdown)
 
@@ -788,14 +788,14 @@ describe('Dropdown', () => {
     it('should not hide a dropdown if hide event is prevented', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu show">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
       const dropdown = new Dropdown(btnDropdown)
@@ -821,14 +821,14 @@ describe('Dropdown', () => {
     it('should dispose dropdown', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown)
 
       expect(dropdown._popper).toBeNull()
@@ -844,14 +844,14 @@ describe('Dropdown', () => {
     it('should dispose dropdown with popper.js', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown)
 
       dropdown.toggle()
@@ -875,14 +875,14 @@ describe('Dropdown', () => {
     it('should call popper.js and detect navbar on update', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown)
 
       dropdown.toggle()
@@ -901,14 +901,14 @@ describe('Dropdown', () => {
     it('should just detect navbar on update', () => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(btnDropdown)
 
       spyOn(dropdown, '_detectNavbar')
@@ -924,14 +924,14 @@ describe('Dropdown', () => {
     it('should not add class position-static to dropdown if boundary not set', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
 
       dropdownEl.addEventListener('shown.bs.dropdown', () => {
@@ -945,14 +945,14 @@ describe('Dropdown', () => {
     it('should add class position-static to dropdown if boundary not scrollParent', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
 
       dropdownEl.addEventListener('shown.bs.dropdown', () => {
@@ -966,14 +966,14 @@ describe('Dropdown', () => {
     it('should show and hide a dropdown', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       let showEventTriggered = false
       let hideEventTriggered = false
@@ -1009,7 +1009,7 @@ describe('Dropdown', () => {
       fixtureEl.innerHTML = [
         '<nav class="navbar navbar-expand-md navbar-light bg-light">',
         '  <div class="dropdown">',
-        '    <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>',
+        '    <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item" href="#">Secondary link</a>',
         '    </div>',
@@ -1017,7 +1017,7 @@ describe('Dropdown', () => {
         '</nav>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
 
@@ -1032,14 +1032,14 @@ describe('Dropdown', () => {
     it('should not use popper.js if display set to static', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
       const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
 
@@ -1055,14 +1055,14 @@ describe('Dropdown', () => {
     it('should remove "show" class if tabbing outside of menu', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Secondary link</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownEl = fixtureEl.querySelector('.dropdown')
 
       dropdownEl.addEventListener('shown.bs.dropdown', () => {
@@ -1086,7 +1086,7 @@ describe('Dropdown', () => {
       fixtureEl.innerHTML = [
         '<div class="nav">',
         '  <div class="dropdown" id="testmenu">',
-        '    <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>',
+        '    <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>',
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item" href="#sub1">Submenu 1</a>',
         '    </div>',
@@ -1094,14 +1094,14 @@ describe('Dropdown', () => {
         '</div>',
         '<div class="btn-group">',
         '  <button class="btn">Actions</button>',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown"></button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Action 1</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]')
+      const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]')
 
       expect(triggerDropdownList.length).toEqual(2)
 
@@ -1138,21 +1138,21 @@ describe('Dropdown', () => {
     it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>',
+        '  <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
         '  </div>',
         '</div>',
         '<div class="btn-group">',
         '  <button class="btn">Actions</button>',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown"></button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#">Action 1</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]')
+      const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]')
 
       expect(triggerDropdownList.length).toEqual(2)
 
@@ -1197,14 +1197,14 @@ describe('Dropdown', () => {
     it('should fire hide and hidden event without a clickEvent if event type is not click', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
 
       dropdown.addEventListener('hide.bs.dropdown', e => {
@@ -1229,7 +1229,7 @@ describe('Dropdown', () => {
     it('should ignore keyboard events within <input>s and <textarea>s', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
         '    <input type="text">',
@@ -1238,7 +1238,7 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
       const textarea = fixtureEl.querySelector('textarea')
@@ -1265,7 +1265,7 @@ describe('Dropdown', () => {
     it('should skip disabled element when using keyboard navigation', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>',
         '    <button class="dropdown-item" type="button" disabled>Disabled button</button>',
@@ -1274,7 +1274,7 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
@@ -1300,7 +1300,7 @@ describe('Dropdown', () => {
         '  }',
         '</style>',
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <button class="dropdown-item d-none" type="button">Hidden button by class</button>',
         '    <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>',
@@ -1310,7 +1310,7 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
 
       dropdown.addEventListener('shown.bs.dropdown', () => {
@@ -1332,7 +1332,7 @@ describe('Dropdown', () => {
     it('should focus next/previous element when using keyboard navigation', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a id="item1" class="dropdown-item" href="#">A link</a>',
         '    <a id="item2" class="dropdown-item" href="#">Another link</a>',
@@ -1340,7 +1340,7 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const item1 = fixtureEl.querySelector('#item1')
       const item2 = fixtureEl.querySelector('#item2')
@@ -1370,7 +1370,7 @@ describe('Dropdown', () => {
     it('should focus on the first element when using ArrowUp for the first time', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a id="item1" class="dropdown-item" href="#">A link</a>',
         '    <a id="item2" class="dropdown-item" href="#">Another link</a>',
@@ -1378,7 +1378,7 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const item1 = fixtureEl.querySelector('#item1')
 
@@ -1398,14 +1398,14 @@ describe('Dropdown', () => {
     it('should not close the dropdown if the user clicks on a text field', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <input type="text">',
         '  </div>',
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
 
@@ -1425,14 +1425,14 @@ describe('Dropdown', () => {
     it('should not close the dropdown if the user clicks on a textarea', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <textarea></textarea>',
         '  </div>',
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const textarea = fixtureEl.querySelector('textarea')
 
@@ -1452,7 +1452,7 @@ describe('Dropdown', () => {
     it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
         '    <input type="text">',
@@ -1461,7 +1461,7 @@ describe('Dropdown', () => {
         '</div>'
       ].join('')
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = fixtureEl.querySelector('.dropdown')
       const input = fixtureEl.querySelector('input')
       const textarea = fixtureEl.querySelector('textarea')
@@ -1527,7 +1527,7 @@ describe('Dropdown', () => {
       fixtureEl.innerHTML = [
         '<div class="tabs">',
         '  <div class="dropdown">',
-        '    <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '    <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item" href="#">Secondary link</a>',
         '      <a class="dropdown-item" href="#">Something else here</a>',
@@ -1538,9 +1538,9 @@ describe('Dropdown', () => {
         '</div>'
       ]
 
-      const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdown = new Dropdown(triggerDropdown)
-      const button = fixtureEl.querySelector('button[data-toggle="dropdown"]')
+      const button = fixtureEl.querySelector('button[data-bs-toggle="dropdown"]')
 
       spyOn(dropdown, 'toggle')
 
diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js
index ba41d49ef..6198cdb85 100644
--- a/js/tests/unit/jquery.spec.js
+++ b/js/tests/unit/jquery.spec.js
@@ -42,7 +42,7 @@ describe('jQuery', () => {
   it('should use jQuery event system', done => {
     fixtureEl.innerHTML = [
       '<div class="alert">',
-      '  <button type="button" data-dismiss="alert">x</button>',
+      '  <button type="button" data-bs-dismiss="alert">x</button>',
       '</div>'
     ].join('')
 
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 9ed1fc434..c90e260b6 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -29,7 +29,7 @@ describe('Modal', () => {
 
     document.body.classList.remove('modal-open')
     document.body.removeAttribute('style')
-    document.body.removeAttribute('data-padding-right')
+    document.body.removeAttribute('data-bs-padding-right')
 
     document.querySelectorAll('.modal-backdrop')
       .forEach(backdrop => {
@@ -67,12 +67,12 @@ describe('Modal', () => {
       document.body.style.paddingRight = originalPadding
 
       modalEl.addEventListener('shown.bs.modal', () => {
-        expect(document.body.getAttribute('data-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-padding-right')
+        expect(document.body.getAttribute('data-bs-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-bs-padding-right')
         modal.toggle()
       })
 
       modalEl.addEventListener('hidden.bs.modal', () => {
-        expect(document.body.getAttribute('data-padding-right')).toBeNull()
+        expect(document.body.getAttribute('data-bs-padding-right')).toBeNull()
         expect().nothing()
         done()
       })
@@ -95,7 +95,7 @@ describe('Modal', () => {
         const expectedPadding = originalPadding + modal._getScrollbarWidth()
         const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
 
-        expect(fixedEl.getAttribute('data-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-padding-right')
+        expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
         expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
         modal.toggle()
       })
@@ -103,7 +103,7 @@ describe('Modal', () => {
       modalEl.addEventListener('hidden.bs.modal', () => {
         const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10)
 
-        expect(fixedEl.getAttribute('data-padding-right')).toEqual(null, 'data-padding-right should be cleared after closing')
+        expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
         expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
         done()
       })
@@ -126,7 +126,7 @@ describe('Modal', () => {
         const expectedMargin = originalMargin - modal._getScrollbarWidth()
         const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
 
-        expect(stickyTopEl.getAttribute('data-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-margin-right')
+        expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right')
         expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
         modal.toggle()
       })
@@ -134,7 +134,7 @@ describe('Modal', () => {
       modalEl.addEventListener('hidden.bs.modal', () => {
         const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
 
-        expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing')
+        expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing')
         expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
         done()
       })
@@ -355,19 +355,19 @@ describe('Modal', () => {
       modal.show()
     })
 
-    it('should close modal when a click occurred on data-dismiss="modal"', done => {
+    it('should close modal when a click occurred on data-bs-dismiss="modal"', done => {
       fixtureEl.innerHTML = [
         '<div class="modal fade">',
         '  <div class="modal-dialog">',
         '    <div class="modal-header">',
-        '      <button type="button" data-dismiss="modal"></button>',
+        '      <button type="button" data-bs-dismiss="modal"></button>',
         '    </div>',
         '  </div>',
         '</div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
-      const btnClose = fixtureEl.querySelector('[data-dismiss="modal"]')
+      const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]')
       const modal = new Modal(modalEl)
 
       spyOn(modal, 'hide').and.callThrough()
@@ -542,7 +542,7 @@ describe('Modal', () => {
     })
 
     it('should not close modal when clicking outside of modal-content if backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" ><div class="modal-dialog"></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" ><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -569,7 +569,7 @@ describe('Modal', () => {
     })
 
     it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog"></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -596,7 +596,7 @@ describe('Modal', () => {
     })
 
     it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog"></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -627,7 +627,7 @@ describe('Modal', () => {
     })
 
     it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -873,12 +873,12 @@ describe('Modal', () => {
   describe('data-api', () => {
     it('should open modal', done => {
       fixtureEl.innerHTML = [
-        '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
+        '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
-      const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
+      const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
 
       modalEl.addEventListener('shown.bs.modal', () => {
         expect(modalEl.getAttribute('aria-modal')).toEqual('true')
@@ -894,13 +894,13 @@ describe('Modal', () => {
 
     it('should not recreate a new modal', done => {
       fixtureEl.innerHTML = [
-        '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
+        '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
-      const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
+      const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
 
       spyOn(modal, 'show').and.callThrough()
 
@@ -914,12 +914,12 @@ describe('Modal', () => {
 
     it('should prevent default when the trigger is <a> or <area>', done => {
       fixtureEl.innerHTML = [
-        '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
+        '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
-      const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
+      const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
 
       spyOn(Event.prototype, 'preventDefault').and.callThrough()
 
@@ -938,12 +938,12 @@ describe('Modal', () => {
 
     it('should focus the trigger on hide', done => {
       fixtureEl.innerHTML = [
-        '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
+        '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
-      const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
+      const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
 
       spyOn(trigger, 'focus')
 
@@ -969,12 +969,12 @@ describe('Modal', () => {
 
     it('should not focus the trigger if the modal is not visible', done => {
       fixtureEl.innerHTML = [
-        '<a data-toggle="modal" href="#" data-target="#exampleModal" style="display: none;"></a>',
+        '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal" style="display: none;"></a>',
         '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
-      const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
+      const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
 
       spyOn(trigger, 'focus')
 
@@ -1000,12 +1000,12 @@ describe('Modal', () => {
 
     it('should not focus the trigger if the modal is not shown', done => {
       fixtureEl.innerHTML = [
-        '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
+        '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
-      const trigger = fixtureEl.querySelector('[data-toggle="modal"]')
+      const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
 
       spyOn(trigger, 'focus')
 
@@ -1086,7 +1086,7 @@ describe('Modal', () => {
     })
 
     it('should should not call show method', () => {
-      fixtureEl.innerHTML = '<div class="modal" data-show="false"><div class="modal-dialog"></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-bs-show="false"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
 
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index acaf0a48c..df4830595 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -64,7 +64,7 @@ describe('Popover', () => {
 
   describe('show', () => {
     it('should show a popover', done => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -120,7 +120,7 @@ describe('Popover', () => {
 
   describe('hide', () => {
     it('should hide a popover', done => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -140,7 +140,7 @@ describe('Popover', () => {
 
   describe('jQueryInterface', () => {
     it('should create a popover', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
 
@@ -168,7 +168,7 @@ describe('Popover', () => {
     })
 
     it('should not re create a popover', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -182,7 +182,7 @@ describe('Popover', () => {
     })
 
     it('should throw error on undefined method', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const action = 'undefinedMethod'
@@ -198,7 +198,7 @@ describe('Popover', () => {
     })
 
     it('should should call show method', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -214,7 +214,7 @@ describe('Popover', () => {
     })
 
     it('should do nothing if dipose is called when a popover do not exist', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
 
@@ -231,7 +231,7 @@ describe('Popover', () => {
 
   describe('getInstance', () => {
     it('should return popover instance', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
@@ -240,7 +240,7 @@ describe('Popover', () => {
     })
 
     it('should return null when there is no popover instance', () => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>'
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
 
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 9ac02ce99..33298300c 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -641,7 +641,7 @@ describe('ScrollSpy', () => {
 
   describe('event handler', () => {
     it('should create scrollspy on window load event', () => {
-      fixtureEl.innerHTML = '<div data-spy="scroll"></div>'
+      fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>'
 
       const scrollSpyEl = fixtureEl.querySelector('div')
 
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index a08fec20d..f74d389df 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -282,17 +282,17 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">',
+        '    <a class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">',
         '      <button class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-toggle="tab">',
+        '    <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-bs-toggle="tab">',
         '      <button class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#references" role="tab" data-toggle="tab">',
+        '    <a class="nav-link nav-tab" href="#references" role="tab" data-bs-toggle="tab">',
         '      <button id="btnClose" class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
@@ -425,7 +425,7 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
         '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>',
-        '  <li class="nav-item" role="presentation"><a id="triggerProfile" data-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a id="triggerProfile" data-bs-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -447,13 +447,13 @@ describe('Tab', () => {
     it('selected tab should deactivate previous selected link in dropdown', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs">',
-        '  <li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>',
-        '  <li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>',
+        '  <li class="nav-item"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
+        '  <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
         '  <li class="nav-item dropdown">',
-        '    <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>',
+        '    <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#">Dropdown</a>',
         '    <div class="dropdown-menu">',
-        '      <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>',
-        '      <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>',
+        '      <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
+        '      <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-toggle="tab">@mdo</a>',
         '    </div>',
         '  </li>',
         '</ul>'
@@ -470,15 +470,15 @@ describe('Tab', () => {
     it('should handle nested tabs', done => {
       fixtureEl.innerHTML = [
         '<nav class="nav nav-tabs" role="tablist">',
-        '  <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
-        '  <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
-        '  <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
+        '  <a id="tab1" href="#x-tab1" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
+        '  <a href="#x-tab2" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
+        '  <a href="#x-tab3" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
         '</nav>',
         '<div class="tab-content">',
         '  <div class="tab-pane" id="x-tab1" role="tabpanel">',
         '    <nav class="nav nav-tabs" role="tablist">',
-        '      <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
-        '      <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
+        '      <a href="#nested-tab1" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
+        '      <a id="tabNested2" href="#nested-tab2" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
         '    </nav>',
         '    <div class="tab-content">',
         '      <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>',
@@ -510,8 +510,8 @@ describe('Tab', () => {
     it('should not remove fade class if no active pane is present', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
-        '  <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>',
-        '  <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-bs-toggle="tab" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-bs-toggle="tab" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane fade" id="home" role="tabpanel"></div>',
@@ -548,10 +548,10 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
+        '    <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>',
         '  </li>',
         '</ul>',
         '<div class="tab-content">',
@@ -574,10 +574,10 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
+        '    <a class="nav-link nav-tab" href="#home" role="tab" data-bs-toggle="tab">Home</a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>',
         '  </li>',
         '</ul>',
         '<div class="tab-content">',
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index 1641ded66..b74354962 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -43,10 +43,10 @@ describe('Toast', () => {
       toast.show()
     })
 
-    it('should close toast when close element with data-dismiss attribute is set', done => {
+    it('should close toast when close element with data-bs-dismiss attribute is set', done => {
       fixtureEl.innerHTML = [
-        '<div class="toast" data-delay="1" data-autohide="false" data-animation="false">',
-        '  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">',
+        '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
+        '  <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">',
         '    close',
         '  </button>',
         '</div>'
@@ -79,8 +79,8 @@ describe('Toast', () => {
       Toast.Default.delay = defaultDelay
 
       fixtureEl.innerHTML = [
-        '<div class="toast" data-autohide="false" data-animation="false">',
-        '  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">',
+        '<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
+        '  <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">',
         '    close',
         '  </button>',
         '</div>'
@@ -102,7 +102,7 @@ describe('Toast', () => {
   describe('show', () => {
     it('should auto hide', done => {
       fixtureEl.innerHTML = [
-        '<div class="toast" data-delay="1">',
+        '<div class="toast" data-bs-delay="1">',
         '  <div class="toast-body">',
         '    a simple toast',
         '  </div>',
@@ -122,7 +122,7 @@ describe('Toast', () => {
 
     it('should not add fade class', done => {
       fixtureEl.innerHTML = [
-        '<div class="toast" data-delay="1" data-animation="false">',
+        '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
         '  <div class="toast-body">',
         '    a simple toast',
         '  </div>',
@@ -142,7 +142,7 @@ describe('Toast', () => {
 
     it('should not trigger shown if show is prevented', done => {
       fixtureEl.innerHTML = [
-        '<div class="toast" data-delay="1" data-animation="false">',
+        '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
         '  <div class="toast-body">',
         '    a simple toast',
         '  </div>',
@@ -202,7 +202,7 @@ describe('Toast', () => {
   describe('hide', () => {
     it('should allow to hide toast manually', done => {
       fixtureEl.innerHTML = [
-        '<div class="toast" data-delay="1" data-autohide="false">',
+        '<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
         '  <div class="toast-body">',
         '    a simple toast',
         '  </div>',
@@ -239,7 +239,7 @@ describe('Toast', () => {
 
     it('should not trigger hidden if hide is prevented', done => {
       fixtureEl.innerHTML = [
-        '<div class="toast" data-delay="1" data-animation="false">',
+        '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
         '  <div class="toast-body">',
         '    a simple toast',
         '  </div>',
@@ -289,7 +289,7 @@ describe('Toast', () => {
 
     it('should allow to destroy toast and hide it before that', done => {
       fixtureEl.innerHTML = [
-        '<div class="toast" data-delay="0" data-autohide="false">',
+        '<div class="toast" data-bs-delay="0" data-bs-autohide="false">',
         '  <div class="toast-body">',
         '    a simple toast',
         '  </div>',
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 611fadfe1..c6d91b402 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -64,7 +64,7 @@ describe('Tooltip', () => {
 
   describe('constructor', () => {
     it('should not take care of disallowed data attributes', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-sanitize="false" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-sanitize="false" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index f7cc37977..ecad59b4d 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -24,9 +24,9 @@ describe('Util', () => {
   })
 
   describe('getSelectorFromElement', () => {
-    it('should get selector from data-target', () => {
+    it('should get selector from data-bs-target', () => {
       fixtureEl.innerHTML = [
-        '<div id="test" data-target=".target"></div>',
+        '<div id="test" data-bs-target=".target"></div>',
         '<div class="target"></div>'
       ].join('')
 
@@ -35,7 +35,7 @@ describe('Util', () => {
       expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
     })
 
-    it('should get selector from href if no data-target set', () => {
+    it('should get selector from href if no data-bs-target set', () => {
       fixtureEl.innerHTML = [
         '<a id="test" href=".target"></a>',
         '<div class="target"></div>'
@@ -46,9 +46,9 @@ describe('Util', () => {
       expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
     })
 
-    it('should get selector from href if data-target equal to #', () => {
+    it('should get selector from href if data-bs-target equal to #', () => {
       fixtureEl.innerHTML = [
-        '<a id="test" data-target="#" href=".target"></a>',
+        '<a id="test" data-bs-target="#" href=".target"></a>',
         '<div class="target"></div>'
       ].join('')
 
@@ -75,9 +75,9 @@ describe('Util', () => {
   })
 
   describe('getElementFromSelector', () => {
-    it('should get element from data-target', () => {
+    it('should get element from data-bs-target', () => {
       fixtureEl.innerHTML = [
-        '<div id="test" data-target=".target"></div>',
+        '<div id="test" data-bs-target=".target"></div>',
         '<div class="target"></div>'
       ].join('')
 
@@ -86,7 +86,7 @@ describe('Util', () => {
       expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
     })
 
-    it('should get element from href if no data-target set', () => {
+    it('should get element from href if no data-bs-target set', () => {
       fixtureEl.innerHTML = [
         '<a id="test" href=".target"></a>',
         '<div class="target"></div>'
@@ -380,13 +380,13 @@ describe('Util', () => {
       expect(Util.getjQuery()).toEqual(fakejQuery)
     })
 
-    it('should not return jQuery object when present if data-no-jquery', () => {
-      document.body.setAttribute('data-no-jquery', '')
+    it('should not return jQuery object when present if data-bs-no-jquery', () => {
+      document.body.setAttribute('data-bs-no-jquery', '')
 
       expect(window.jQuery).toEqual(fakejQuery)
       expect(Util.getjQuery()).toEqual(null)
 
-      document.body.removeAttribute('data-no-jquery')
+      document.body.removeAttribute('data-bs-no-jquery')
     })
 
     it('should not return jQuery if not present', () => {