diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html
index 8ba41c7b42dedfec69d8132de8a179109c2b9142..f77f02084d9d9076189cd293f1080251ce0b21cb 100644
--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
@@ -27,7 +27,9 @@
<nav>
<div class="clearfix">
- <button class="navbar-toggler float-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler float-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap
</a>
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 7d0656d4b38d3e9b652f4892ff5ea701f85a0c10..d1dd333f153840e564afa02deb4509f32cf25a51 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -40,7 +40,9 @@ Here's an example of all the sub-components included in a responsive light-theme
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -108,7 +110,9 @@ Active states—with `.active`—to indicate the current page can be applied dir
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav">
@@ -133,7 +137,9 @@ And because we use classes for our navs, you can avoid the list-based approach e
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="nav navbar-nav">
@@ -150,7 +156,9 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="nav navbar-nav">
@@ -242,7 +250,9 @@ Mix and match with other components and utilities as needed.
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar w/ text</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="nav navbar-nav">
@@ -269,7 +279,9 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<div class="bd-example">
<nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor01">
@@ -295,7 +307,9 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</nav>
<nav class="navbar navbar-inverse navbar-toggleable-md bg-primary">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor02">
@@ -321,7 +335,9 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</nav>
<nav class="navbar navbar-light navbar-toggleable-md" style="background-color: #e3f2fd;">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor03">
@@ -417,7 +433,9 @@ With no `.navbar-brand` shown in lowest breakpoint:
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
- <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="nav navbar-nav mt-2 mt-lg-0">
@@ -443,7 +461,9 @@ With a brand name shown on the left and toggler on the right:
{% example html %}
<nav class="navbar navbar-light navbar-toggleable-md bg-faded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
@@ -479,7 +499,9 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
</div>
</div>
<nav class="navbar navbar-inverse bg-inverse">
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
</nav>
</div>
{% endexample %}
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index 217ee5877c4aff23ac75462572c43b1459298d90..f2f542257c81d60be1c6e873ae9429c2f03590a0 100644
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -41,7 +41,9 @@
<div class="navbar navbar-inverse bg-inverse navbar-toggleable-sm">
<div class="container flex-items-between">
<a href="#" class="navbar-brand">Album</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
</div>
</div>
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index f591235368b785437ae71f1e176587a6e5b4e5df..f1e28475f1eab7f52d1bb900ea9d3ae7597d492e 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -20,7 +20,9 @@
<body>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Carousel</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0">
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index 96133e61abcd81549aa8494326ef49e5b1814462..11c85b155d4cacb177e15b3f5cb89b5a9bb07064 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -20,7 +20,9 @@
<body>
<nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
- <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<div class="collapse navbar-toggleable-sm" id="navbar">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav float-sm-right">
diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index 73c44352799c183d8c1027674fc7d32d231fcd70..d2aaf17d20d9aeed85f947b8e53cb1e64231c883 100644
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -26,7 +26,9 @@
<h3 class="text-muted">Project name</h3>
<nav class="navbar navbar-light bg-faded rounded mb-3">
- <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<div class="collapse navbar-toggleable-md" id="navbarCollapse">
<ul class="nav navbar-nav text-md-center flex-items-md-between">
<li class="nav-item active">
diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html
index c38aaef1b12d1cd912524cda7e852b5cc848707f..62129228333b7bfe1fbfaa25b2e07a4f09c193bd 100644
--- a/docs/examples/navbar-top-fixed/index.html
+++ b/docs/examples/navbar-top-fixed/index.html
@@ -21,7 +21,9 @@
<body>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0">
diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html
index 04c03ac2181385e7a4633e92c9d5fb136ee1d395..242b46d5d2adcba618653c192432b0925d810d2c 100644
--- a/docs/examples/navbar-top/index.html
+++ b/docs/examples/navbar-top/index.html
@@ -21,7 +21,9 @@
<body>
<nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse mb-3">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0">
diff --git a/docs/examples/navbars/index.html b/docs/examples/navbars/index.html
index 934c2cd0338d8bf1c5a9758b891e9bee0da3c4b2..602b10bb2d8ea5966b9535f6062923ed0b2fcd2e 100644
--- a/docs/examples/navbars/index.html
+++ b/docs/examples/navbars/index.html
@@ -21,7 +21,9 @@
<body>
<nav class="navbar navbar-inverse bg-inverse">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-toggleable-md" id="navbarsExampleDefault">
@@ -53,7 +55,9 @@
<nav class="navbar navbar-inverse bg-inverse">
<div class="container">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Container</a>
<div class="collapse navbar-toggleable-md" id="navbarsExampleContainer">
@@ -85,7 +89,9 @@
</nav>
<nav class="navbar navbar-inverse bg-inverse">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">
<ul class="nav navbar-nav text-md-center">
@@ -112,7 +118,9 @@
<div class="container">
<nav class="navbar navbar-light bg-faded rounded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-toggleable-md" id="containerNavbar">
@@ -143,7 +151,9 @@
</nav>
<nav class="navbar navbar-light bg-faded rounded">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<div class="collapse navbar-toggleable-md" id="containerNavbarCenter">
<ul class="nav navbar-nav text-md-center">
diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html
index bc2708a5056a77c9ffeb90acf7ebc1f2cb35ce53..c15cae2fee00bfa8b3f949f81e7ef773e0732aad 100644
--- a/docs/examples/sticky-footer-navbar/index.html
+++ b/docs/examples/sticky-footer-navbar/index.html
@@ -22,7 +22,9 @@
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
- <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
<a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav mt-2 mt-lg-0">