add justified nav links for tabs and pills

3 files changed, 84 insertions, 23 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 0f936bae3..e3460137e 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3579,6 +3579,40 @@ input[type="button"].btn-block {
   border-bottom-color: transparent;
 }
 
+.nav-pills > li > a {
+  border-radius: 5px;
+}
+
+.nav-pills > li + li > a {
+  margin-left: 2px;
+}
+
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+
+.nav-stacked > li {
+  float: none;
+}
+
+.nav-stacked > li + li > a {
+  margin-top: 2px;
+  margin-left: 0;
+}
+
+.nav-justified {
+  max-height: 37px;
+}
+
+.nav-justified > li {
+  display: table-cell;
+  float: none;
+  width: 1%;
+  text-align: center;
+}
+
 .nav-list {
   background-color: #fff;
   border-radius: 6px;
@@ -3620,29 +3654,6 @@ input[type="button"].btn-block {
           box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
 }
 
-.nav-pills > li > a {
-  border-radius: 5px;
-}
-
-.nav-pills > li + li > a {
-  margin-left: 2px;
-}
-
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
-  color: #ffffff;
-  background-color: #0088cc;
-}
-
-.nav-stacked > li {
-  float: none;
-}
-
-.nav-stacked > li + li > a {
-  margin-top: 2px;
-  margin-left: 0;
-}
-
 .nav-tabs .dropdown-menu {
   -webkit-border-top-right-radius: 0;
           border-top-right-radius: 0;
diff --git a/docs/components.html b/docs/components.html
index 3c47835c3..14e9041f3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -748,6 +748,31 @@
 
           <h2>Options</h2>
 
+          <h3>Justified links</h3>
+          <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-tabs nav-justified">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+            <br>
+            <ul class="nav nav-pills nav-justified">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages</a></li>
+            </ul>
+          </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-tabs nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+
+&lt;ul class="nav nav-pills nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+
           <h3>Disabled state</h3>
           <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
           <div class="bs-docs-example">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index b72cd01ed..9e796b9ba 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -680,6 +680,31 @@
 
           <h2>{{_i}}Options{{/i}}</h2>
 
+          <h3>{{_i}}Justified links{{/i}}</h3>
+          <p>{{_i}}Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.{{/i}}</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-tabs nav-justified">
+              <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+              <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+              <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+            </ul>
+            <br>
+            <ul class="nav nav-pills nav-justified">
+              <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+              <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+              <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+            </ul>
+          </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-tabs nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+
+&lt;ul class="nav nav-pills nav-justified"&gt;
+  ...
+&lt;/ul&gt;
+</pre>
+
           <h3>{{_i}}Disabled state{{/i}}</h3>
           <p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}</p>
           <div class="bs-docs-example">