From 686b88c505540a8ce0a260c18bd327865cad81c4 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Sat, 27 Jun 2020 00:28:32 +0200
Subject: use only data target to query elements in our plugin

---
 js/src/collapse.js                             |  1 -
 js/src/scrollspy.js                            | 14 ++++-
 js/src/util/index.js                           |  8 +--
 js/tests/unit/collapse.spec.js                 | 24 +++----
 js/tests/unit/dropdown.spec.js                 | 20 +++---
 js/tests/unit/scrollspy.spec.js                | 24 ++++++-
 js/tests/unit/tab.spec.js                      | 86 +++++++++++++-------------
 js/tests/unit/util/index.spec.js               | 43 +------------
 js/tests/visual/carousel.html                  |  4 +-
 js/tests/visual/collapse.html                  |  8 +--
 js/tests/visual/modal.html                     |  6 +-
 js/tests/visual/tab.html                       | 48 +++++++-------
 site/content/docs/5.0/components/carousel.md   | 22 +++----
 site/content/docs/5.0/components/collapse.md   | 12 ++--
 site/content/docs/5.0/components/list-group.md | 36 +++++------
 site/content/docs/5.0/components/modal.md      |  2 +-
 site/content/docs/5.0/components/navs.md       | 72 ++++++++++-----------
 site/content/docs/5.0/migration.md             |  1 +
 site/layouts/partials/docs-sidebar.html        |  2 +-
 19 files changed, 212 insertions(+), 221 deletions(-)

diff --git a/js/src/collapse.js b/js/src/collapse.js
index 693e7ee2c8..3b8c15212c 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -72,7 +72,6 @@ class Collapse {
     this._element = element
     this._config = this._getConfig(config)
     this._triggerArray = SelectorEngine.find(
-      `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
       `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]`
     )
 
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 90e03b0007..ff80de7674 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -121,7 +121,7 @@ class ScrollSpy {
     targets
       .map(element => {
         let target
-        const targetSelector = getSelectorFromElement(element)
+        const targetSelector = this._getSelectorFromElement(element)
 
         if (targetSelector) {
           target = SelectorEngine.findOne(targetSelector)
@@ -163,6 +163,18 @@ class ScrollSpy {
 
   // Private
 
+  _getSelectorFromElement(element) {
+    let selector = getSelectorFromElement(element)
+
+    if (!selector) {
+      const hrefAttr = element.getAttribute('href')
+
+      selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
+    }
+
+    return selector
+  }
+
   _getConfig(config) {
     config = {
       ...Default,
diff --git a/js/src/util/index.js b/js/src/util/index.js
index d9a975554c..e508908c43 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -33,12 +33,10 @@ const getUID = prefix => {
 }
 
 const getSelector = element => {
-  let selector = element.getAttribute('data-target')
+  const selector = element.getAttribute('data-target')
 
-  if (!selector || selector === '#') {
-    const hrefAttr = element.getAttribute('href')
-
-    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
+  if (!selector) {
+    return null
   }
 
   return selector
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index a5e101aad1..fcf3adfa57 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -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 href="#" role="button" data-toggle="collapse" class="collapsed" data-target=".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 href="#" role="button" data-toggle="collapse" data-target=".multi"></a>',
         '<div id="collapse1" class="collapse multi show"></div>',
         '<div id="collapse2" class="collapse multi show"></div>'
       ].join('')
@@ -466,11 +466,11 @@ 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>',
+        '    <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
         '    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>',
         '  </div>',
         '  <div class="item">',
-        '    <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '    <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
         '    <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
         '  </div>',
         '</div>'
@@ -521,13 +521,13 @@ 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>',
+        '        <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
         '        <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-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>',
+        '        <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
         '        <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
         '      </div>',
         '    </div>',
@@ -647,18 +647,18 @@ 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>',
+        '    <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
         '    <div id="collapseOne" data-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>',
+        '          <a id="nestedLinkTrigger" href="#" data-toggle="collapse" data-target="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
         '          <div id="nestedCollapseOne" data-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>',
+        '    <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
         '    <div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
         '  </div>',
         '</div>'
@@ -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" href="#" role="button" data-toggle="collapse" data-target="#test1"></a>',
+        '<a id="trigger2" href="#" role="button" data-toggle="collapse" data-target="#test2"></a>',
+        '<a id="trigger3" href="#" role="button" data-toggle="collapse" data-target=".multi"></a>',
         '<div id="test1" class="multi"></div>',
         '<div id="test2" class="multi"></div>'
       ].join('')
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index c7f05ed22a..cf32c56c0e 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1086,9 +1086,9 @@ 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 href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#testmenu">Test menu</a>',
         '    <div class="dropdown-menu">',
-        '      <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '      <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '    </div>',
         '  </div>',
         '</div>',
@@ -1138,9 +1138,9 @@ 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 href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#testmenu">Test menu</a>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '  </div>',
         '</div>',
         '<div class="btn-group">',
@@ -1199,7 +1199,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '  </div>',
         '</div>'
       ].join('')
@@ -1231,7 +1231,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '    <input type="text">',
         '    <textarea></textarea>',
         '  </div>',
@@ -1267,7 +1267,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item disabled" data-target="#sub1">Submenu 1</a>',
         '    <button class="dropdown-item" type="button" disabled>Disabled button</button>',
         '    <a id="item1" class="dropdown-item" href="#">Another link</a>',
         '  </div>',
@@ -1303,8 +1303,8 @@ describe('Dropdown', () => {
         '  <button class="btn dropdown-toggle" data-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>',
-        '    <a class="dropdown-item" href="#sub1" style="visibility: hidden">Hidden link</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1" style="display: none">Hidden link</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1" style="visibility: hidden">Hidden link</a>',
         '    <a id="item1" class="dropdown-item" href="#">Another link</a>',
         '  </div>',
         '</div>'
@@ -1454,7 +1454,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '    <input type="text">',
         '    <textarea></textarea>',
         '  </div>',
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 9ac02ce99f..53201a0b6c 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -64,7 +64,7 @@ describe('ScrollSpy', () => {
       expect(navEl.getAttribute('id')).not.toEqual(null)
     })
 
-    it('should not process element without target', () => {
+    it('should not process element without target and process elements with target inside href attribute', () => {
       fixtureEl.innerHTML = [
         '<nav id="navigation" class="navbar">',
         '  <ul class="navbar-nav">',
@@ -86,6 +86,28 @@ describe('ScrollSpy', () => {
       expect(scrollSpy._targets.length).toEqual(2)
     })
 
+    it('should process element with target in data-target', () => {
+      fixtureEl.innerHTML = [
+        '<nav id="navigation" class="navbar">',
+        '  <ul class="navbar-nav">',
+        '    <li class="nav-item active"><a class="nav-link" id="one-link" href="#">One</a></li>',
+        '    <li class="nav-item"><a class="nav-link" id="two-link" href="#" data-target="#two">Two</a></li>',
+        '    <li class="nav-item"><a class="nav-link" id="three-link" href="#" data-target="#three">Three</a></li>',
+        '  </ul>',
+        '</nav>',
+        '<div id="content" style="height: 200px; overflow-y: auto;">',
+        ' <div id="two" style="height: 300px;"></div>',
+        ' <div id="three" style="height: 10px;"></div>',
+        '</div>'
+      ].join('')
+
+      const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
+        target: '#navigation'
+      })
+
+      expect(scrollSpy._targets.length).toEqual(2)
+    })
+
     it('should only switch "active" class on current target', done => {
       fixtureEl.innerHTML = [
         '<div id="root" class="active" style="display: block">',
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index a08fec20d6..044957cc02 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -24,8 +24,8 @@ describe('Tab', () => {
     it('should activate element by tab id', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav">',
-        '  <li><a href="#home" role="tab">Home</a></li>',
-        '  <li><a id="triggerProfile" role="tab" href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home" role="tab">Home</a></li>',
+        '  <li><a href="#" id="triggerProfile" role="tab" data-target="#profile">Profile</a></li>',
         '</ul>',
         '<ul>',
         '  <li id="home"></li>',
@@ -48,8 +48,8 @@ describe('Tab', () => {
     it('should activate element by tab id in ordered list', done => {
       fixtureEl.innerHTML = [
         '<ol class="nav nav-pills">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a id="triggerProfile" href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home">Home</a></li>',
+        '  <li><a href="#" id="triggerProfile" data-target="#profile">Profile</a></li>',
         '</ol>',
         '<ol>',
         '  <li id="home"></li>',
@@ -71,8 +71,8 @@ describe('Tab', () => {
     it('should activate element by tab id in nav list', done => {
       fixtureEl.innerHTML = [
         '<nav class="nav">',
-        '  <a href="#home">Home</a>',
-        '  <a id="triggerProfile" href="#profile">Profile</a>',
+        '  <a href="#" data-target="#home">Home</a>',
+        '  <a href="#" id="triggerProfile" data-target="#profile">Profile</a>',
         '</nav>',
         '<nav><div id="home"></div><div id="profile"></div></nav>'
       ].join('')
@@ -91,8 +91,8 @@ describe('Tab', () => {
     it('should activate element by tab id in list group', done => {
       fixtureEl.innerHTML = [
         '<div class="list-group">',
-        '  <a href="#home">Home</a>',
-        '  <a id="triggerProfile" href="#profile">Profile</a>',
+        '  <a href="#" data-target="#home">Home</a>',
+        '  <a href="#" id="triggerProfile" data-target="#profile">Profile</a>',
         '</div>',
         '<nav><div id="home"></div><div id="profile"></div></nav>'
       ].join('')
@@ -135,8 +135,8 @@ describe('Tab', () => {
     it('should not fire shown when tab is already active', done => {
       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 href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -161,8 +161,8 @@ describe('Tab', () => {
     it('should not fire shown when tab is disabled', done => {
       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 href="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -187,8 +187,8 @@ describe('Tab', () => {
     it('show and shown events should reference correct relatedTarget', done => {
       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" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" id="triggerProfile" data-target="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -200,11 +200,11 @@ describe('Tab', () => {
       const secondTab = new Tab(secondTabTrigger)
 
       secondTabTrigger.addEventListener('show.bs.tab', ev => {
-        expect(ev.relatedTarget.hash).toEqual('#home')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#home')
       })
 
       secondTabTrigger.addEventListener('shown.bs.tab', ev => {
-        expect(ev.relatedTarget.hash).toEqual('#home')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#home')
         expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true')
         expect(fixtureEl.querySelector('a:not(.active)').getAttribute('aria-selected')).toEqual('false')
         done()
@@ -216,8 +216,8 @@ describe('Tab', () => {
     it('should fire hide and hidden events', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home">Home</a></li>',
+        '  <li><a href="#" data-target="#profile">Profile</a></li>',
         '</ul>'
       ].join('')
 
@@ -232,12 +232,12 @@ describe('Tab', () => {
 
       triggerList[0].addEventListener('hide.bs.tab', ev => {
         hideCalled = true
-        expect(ev.relatedTarget.hash).toEqual('#profile')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#profile')
       })
 
       triggerList[0].addEventListener('hidden.bs.tab', ev => {
         expect(hideCalled).toEqual(true)
-        expect(ev.relatedTarget.hash).toEqual('#profile')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#profile')
         done()
       })
 
@@ -247,8 +247,8 @@ describe('Tab', () => {
     it('should not fire hidden when hide is prevented', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home">Home</a></li>',
+        '  <li><a href="#" data-target="#profile">Profile</a></li>',
         '</ul>'
       ].join('')
 
@@ -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 href="#" class="nav-link nav-tab" data-target="#profile" role="tab" data-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 href="#" id="secondNav" class="nav-link nav-tab" data-target="#buzz" role="tab" data-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 href="#" class="nav-link nav-tab" data-target="#references" role="tab" data-toggle="tab">',
         '      <button id="btnClose" class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
@@ -316,7 +316,7 @@ describe('Tab', () => {
       btnCloseEl.addEventListener('click', () => {
         const linkEl = btnCloseEl.parentNode
         const liEl = linkEl.parentNode
-        const tabId = linkEl.getAttribute('href')
+        const tabId = linkEl.getAttribute('data-target')
         const tabIdEl = fixtureEl.querySelector(tabId)
 
         liEl.parentNode.removeChild(liEl)
@@ -424,8 +424,8 @@ describe('Tab', () => {
     it('should create dynamically a tab', done => {
       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 href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" id="triggerProfile" data-toggle="tab" data-target="#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 href="#" class="nav-link" data-target="#home" data-toggle="tab">Home</a></li>',
+        '  <li class="nav-item"><a href="#" class="nav-link" data-target="#profile" data-toggle="tab">Profile</a></li>',
         '  <li class="nav-item dropdown">',
         '    <a class="nav-link dropdown-toggle active" data-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 href="#" class="dropdown-item active" data-target="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>',
+        '      <a href="#" class="dropdown-item" data-target="#dropdown2" id="dropdown2-tab" data-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 href="#" id="tab1" data-target="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
+        '  <a href="#" data-target="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
+        '  <a href="#" data-target="#x-tab3" class="nav-link" data-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="#" data-target="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
+        '      <a href="#" id="tabNested2" data-target="#nested-tab2" class="nav-link" data-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 href="#" id="tab-home" data-target="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" id="tab-profile" data-target="#profile" class="nav-link" data-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 href="#" class="nav-link nav-tab" data-target="#home" role="tab" data-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 href="#" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-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 href="#" class="nav-link nav-tab" data-target="#home" role="tab" data-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 href="#" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</a>',
         '  </li>',
         '</ul>',
         '<div class="tab-content">',
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index 541c10baa7..de48cf53e0 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -35,36 +35,6 @@ describe('Util', () => {
       expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
     })
 
-    it('should get selector from href if no data-target set', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
-    })
-
-    it('should get selector from href if data-target equal to #', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" data-target="#" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
-    })
-
-    it('should return null if selector not found', () => {
-      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toBeNull()
-    })
-
     it('should return null if no selector', () => {
       fixtureEl.innerHTML = '<div></div>'
 
@@ -86,19 +56,8 @@ describe('Util', () => {
       expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
     })
 
-    it('should get element from href if no data-target set', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
-    })
-
     it('should return null if element not found', () => {
-      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
+      fixtureEl.innerHTML = '<a id="test" data-target=".target"></a>'
 
       const testEl = fixtureEl.querySelector('#test')
 
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index d66f140531..f788256f71 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -34,11 +34,11 @@
             <img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide">
           </div>
         </div>
-        <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
+        <a href="#" class="carousel-control-prev" data-target="#carousel-example-generic" role="button" data-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
         </a>
-        <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
+        <a href="#" class="carousel-control-next" data-target="#carousel-example-generic" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
         </a>
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 0fa97133ce..7b0d1bb5b9 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -14,7 +14,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingOne">
             <h5 class="mb-0">
-              <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+              <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 Collapsible Group Item #1
               </a>
             </h5>
@@ -29,7 +29,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingTwo">
             <h5 class="mb-0">
-              <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+              <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 Collapsible Group Item #2
               </a>
             </h5>
@@ -43,7 +43,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingThree">
             <h5 class="mb-0">
-              <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+              <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 Collapsible Group Item #3
               </a>
             </h5>
@@ -57,7 +57,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingFour">
             <h5 class="mb-0">
-              <a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+              <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                 Collapsible Group Item with XSS in data-parent
               </a>
             </h5>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index fa043af00e..af59969aa5 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -58,7 +58,7 @@
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingOne">
                     <h5 class="mb-0">
-                      <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                      <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         Collapsible Group Item #1
                       </a>
                     </h5>
@@ -73,7 +73,7 @@
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingTwo">
                     <h5 class="mb-0">
-                      <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                      <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                         Collapsible Group Item #2
                       </a>
                     </h5>
@@ -87,7 +87,7 @@
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingThree">
                     <h5 class="mb-0">
-                      <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                      <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                         Collapsible Group Item #3
                       </a>
                     </h5>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index e5bc0448b5..6809c6d93f 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -19,16 +19,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
+          <a href="#" class="nav-link active" data-toggle="tab" data-target="#home" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#fat" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -55,16 +55,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
+          <a href="#" class="nav-link active" data-toggle="tab" data-target="#home2" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile2" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#fat2" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo2" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -91,16 +91,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#home3" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile3" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a>
+          <a class="nav-link" data-toggle="tab" data-target="#fat3" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo3" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -127,16 +127,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#home4" role="tab">Home</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#home4" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile4" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat4" role="tab">@fat</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#fat4" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo4" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -161,13 +161,13 @@
 
       <h4>Tabs with nav (with fade)</h4>
       <nav class="nav nav-pills">
-        <a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
-        <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
+        <a href="#" class="nav-link nav-item active" data-toggle="tab" data-target="#home5">Home</a>
+        <a href="#" class="nav-link nav-item" data-toggle="tab" data-target="#profile5">Profile</a>
         <div class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <ul class="dropdown-menu" aria-labelledby="dropdown5">
-            <li><a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a></li>
-            <li><a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a></li>
+            <li><a href="#" class="dropdown-item" data-toggle="tab" data-target="#fat5">@fat</a></li>
+            <li><a href="#" class="dropdown-item" data-toggle="tab" data-target="#mdo5">@mdo</a></li>
           </ul>
         </div>
         <a class="nav-link nav-item disabled" href="#">Disabled</a>
@@ -196,10 +196,10 @@
       <div class="row">
         <div class="col-4">
           <div class="list-group" id="list-tab" role="tablist">
-            <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
-            <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
-            <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
-            <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
+            <a href="#" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" data-target="#list-home" role="tab" aria-controls="list-home">Home</a>
+            <a href="#" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" data-target="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
+            <a href="#" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" data-target="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
+            <a href="#" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
           </div>
         </div>
         <div class="col-8">
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md
index 935779238c..e131b502b9 100644
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@@ -22,7 +22,7 @@ Please be aware that nested carousels are not supported, and carousels are gener
 
 Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
 
-**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
+**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute that matches the id of the `.carousel` element.
 
 ### Slides only
 
@@ -61,11 +61,11 @@ Adding in the previous and next controls:
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+  <a href="#" class="carousel-control-prev" data-target="#carouselExampleControls" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+  <a href="#" class="carousel-control-next" data-target="#carouselExampleControls" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
@@ -94,11 +94,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+  <a href="#" class="carousel-control-prev" data-target="#carouselExampleIndicators" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+  <a href="#" class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
@@ -139,11 +139,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
       </div>
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+  <a href="#" class="carousel-control-prev" data-target="#carouselExampleCaptions" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+  <a href="#" class="carousel-control-next" data-target="#carouselExampleCaptions" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
@@ -167,11 +167,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
+  <a href="#" class="carousel-control-prev" data-target="#carouselExampleFade" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
+  <a href="#" class="carousel-control-next" data-target="#carouselExampleFade" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
@@ -195,11 +195,11 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
       {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
+  <a href="#" class="carousel-control-prev" data-target="#carouselExampleInterval" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
+  <a href="#" class="carousel-control-next" data-target="#carouselExampleInterval" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
index a182ab2301..7f5e821572 100644
--- a/site/content/docs/5.0/components/collapse.md
+++ b/site/content/docs/5.0/components/collapse.md
@@ -22,12 +22,12 @@ Click the buttons below to show and hide another element via class changes:
 - `.collapsing` is applied during transitions
 - `.collapse.show` shows content
 
-You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
+You can use any element with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
 
 {{< example >}}
 <p>
-  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
-    Link with href
+  <a href="#" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+    Link with data-target
   </a>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
     Button with data-target
@@ -42,12 +42,12 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 
 ## Multiple targets
 
-A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-target` attribute.
-Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-target` attribute
+Any element can show and hide multiple elements by referencing them with a selector in its `data-target` attribute.
+Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `data-target` attribute
 
 {{< example >}}
 <p>
-  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
+  <a href="#" class="btn btn-primary" data-toggle="collapse" data-target="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
 </p>
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md
index a82bdddf79..73d64eebf9 100644
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.0/components/list-group.md
@@ -263,10 +263,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
   <div class="row">
     <div class="col-4">
       <div class="list-group" id="list-tab" role="tablist">
-        <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
-        <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
-        <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
-        <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
+        <a href="#" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" data-target="#list-home" role="tab" aria-controls="list-home">Home</a>
+        <a href="#" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" data-target="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
+        <a href="#" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" data-target="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
+        <a href="#" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
       </div>
     </div>
     <div class="col-8">
@@ -292,10 +292,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
 <div class="row">
   <div class="col-4">
     <div class="list-group" id="list-tab" role="tablist">
-      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
-      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
-      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
-      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
+      <a href="#" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" data-target="#list-home" role="tab" aria-controls="home">Home</a>
+      <a href="#" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" data-target="#list-profile" role="tab" aria-controls="profile">Profile</a>
+      <a href="#" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" data-target="#list-messages" role="tab" aria-controls="messages">Messages</a>
+      <a href="#" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" data-target="#list-settings" role="tab" aria-controls="settings">Settings</a>
     </div>
   </div>
   <div class="col-8">
@@ -317,10 +317,10 @@ You can activate a list group navigation without writing any JavaScript by simpl
 {{< highlight html >}}
 <!-- List group -->
 <div class="list-group" id="myList" role="tablist">
-  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
-  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
-  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
-  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
+  <a href="#" class="list-group-item list-group-item-action active" data-toggle="list" data-target="#home" role="tab">Home</a>
+  <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#profile" role="tab">Profile</a>
+  <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#messages" role="tab">Messages</a>
+  <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#settings" role="tab">Settings</a>
 </div>
 
 <!-- Tab panes -->
@@ -352,7 +352,7 @@ triggerTabList.forEach(function (triggerEl) {
 You can activate individual list item in several ways:
 
 {{< highlight js >}}
-var triggerEl = document.querySelector('#myTab a[href="#profile"]')
+var triggerEl = document.querySelector('#myTab a[data-target="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
 var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
@@ -376,14 +376,14 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
 
 #### constructor
 
-Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
+Activates a list item element and content container. Tab should have either a `data-target` targeting a container node in the DOM.
 
 {{< highlight html >}}
 <div class="list-group" id="myList" role="tablist">
-  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
-  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
-  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
-  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
+  <a href="#" class="list-group-item list-group-item-action active" data-toggle="list" data-target="#home" role="tab">Home</a>
+  <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#profile" role="tab">Profile</a>
+  <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#messages" role="tab">Messages</a>
+  <a href="#" class="list-group-item list-group-item-action" data-toggle="list" data-target="#settings" role="tab">Settings</a>
 </div>
 
 <div class="tab-content">
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index 19d0aae376..5f64b3c832 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -849,7 +849,7 @@ The modal plugin toggles your hidden content on demand, via data attributes or J
 
 ### Via data attributes
 
-Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
+Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` to target a specific modal to toggle.
 
 {{< highlight html >}}
 <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
diff --git a/site/content/docs/5.0/components/navs.md b/site/content/docs/5.0/components/navs.md
index a52a11adc8..ac2edc1e84 100644
--- a/site/content/docs/5.0/components/navs.md
+++ b/site/content/docs/5.0/components/navs.md
@@ -314,13 +314,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 <div class="bd-example">
   <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
     <li class="nav-item" role="presentation">
-      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+      <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
     </li>
     <li class="nav-item" role="presentation">
-      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+      <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
     </li>
     <li class="nav-item" role="presentation">
-      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
+      <a href="#" class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
     </li>
   </ul>
   <div class="tab-content" id="myTabContent">
@@ -339,13 +339,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 {{< highlight html >}}
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
-    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+    <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+    <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
+    <a href="#" class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
   </li>
 </ul>
 <div class="tab-content" id="myTabContent">
@@ -360,9 +360,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 <div class="bd-example">
   <nav>
     <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
-      <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-      <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-      <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+      <a href="#" class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+      <a href="#" class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+      <a href="#" class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
     </div>
   </nav>
   <div class="tab-content" id="nav-tabContent">
@@ -381,9 +381,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 {{< highlight html >}}
 <nav>
   <div class="nav nav-tabs" id="nav-tab" role="tablist">
-    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
-    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
-    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+    <a href="#" class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+    <a href="#" class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+    <a href="#" class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
   </div>
 </nav>
 <div class="tab-content" id="nav-tabContent">
@@ -398,13 +398,13 @@ The tabs plugin also works with pills.
 <div class="bd-example">
   <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
     <li class="nav-item" role="presentation">
-      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
+      <a href="#" class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
     </li>
     <li class="nav-item" role="presentation">
-      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
+      <a href="#" class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
     </li>
     <li class="nav-item" role="presentation">
-      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
+      <a href="#" class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
     </li>
   </ul>
   <div class="tab-content" id="pills-tabContent">
@@ -423,13 +423,13 @@ The tabs plugin also works with pills.
 {{< highlight html >}}
 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
-    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
+    <a href="#" class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
+    <a href="#" class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
+    <a href="#" class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
   </li>
 </ul>
 <div class="tab-content" id="pills-tabContent">
@@ -445,10 +445,10 @@ And with vertical pills.
   <div class="row">
     <div class="col-3">
       <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-        <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
+        <a href="#" class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
+        <a href="#" class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
+        <a href="#" class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
+        <a href="#" class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
       </div>
     </div>
     <div class="col-9">
@@ -474,10 +474,10 @@ And with vertical pills.
 <div class="row">
   <div class="col-3">
     <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
-      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
-      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
-      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
+      <a href="#" class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
+      <a href="#" class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
+      <a href="#" class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
+      <a href="#" class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
     </div>
   </div>
   <div class="col-9">
@@ -499,16 +499,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
-    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+    <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+    <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
+    <a href="#" class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
+    <a href="#" class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
   </li>
 </ul>
 
@@ -540,7 +540,7 @@ triggerTabList.forEach(function (triggerEl) {
 You can activate individual tabs in several ways:
 
 {{< highlight js >}}
-var triggerEl = document.querySelector('#myTab a[href="#profile"]')
+var triggerEl = document.querySelector('#myTab a[data-target="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
 var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
@@ -568,21 +568,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 #### constructor
 
-Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
+Activates a tab element and content container. Tab should have either a `data-target` targeting a container node in the DOM.
 
 {{< highlight html >}}
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
-    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+    <a href="#" class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+    <a href="#" class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
+    <a href="#" class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
+    <a href="#" class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
   </li>
 </ul>
 
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index a366abb933..b870f9b596 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -57,6 +57,7 @@ Changes to our source and compiled JavaScript files.
 
 - Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
 - Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
+- Drop the use of `href` attributes to target element, except for our Scrollspy.
 
 ## Color system
 
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 6a665b826b..b0ec71fbc0 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -16,7 +16,7 @@
     {{- $is_active_group := eq $.Page.Params.group $group_slug }}
 
     <li class="my-1{{ if $is_active_group }} active{{ end }}">
-      <a class="d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
+      <a href="#" class="d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-toggle="collapse" data-target="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
         {{ $group.title }}
       </a>
 
-- 
cgit v1.2.3