diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index 6107563232c67073dddff0d6ed62a4b17001dd1d..023d31c61b46b1dd84286f9615aaee0a5be66d02 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -14,35 +14,21 @@ group: components
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
<div class="bd-example">
- <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
- <div class="container-fluid">
- <div class="navbar-header">
- <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bd-example-js-navbar-scrollspy">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project Name</a>
- </div>
- <div class="collapse navbar-collapse bd-example-js-navbar-scrollspy">
- <ul class="nav navbar-nav">
- <li><a href="#fat">@fat</a></li>
- <li><a href="#mdo">@mdo</a></li>
- <li class="dropdown">
- <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Dropdown
- </a>
- <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
- <li><a href="#one">one</a></li>
- <li><a href="#two">two</a></li>
- <li role="separator" class="divider"></li>
- <li><a href="#three">three</a></li>
- </ul>
- </li>
+ <nav id="navbar-example2" class="navbar navbar-default" role="navigation">
+ <h3 class="navbar-brand">Project Name</h3>
+ <ul class="nav nav-pills">
+ <li class="nav-item"><a class="nav-link" href="#fat">@fat</a></li>
+ <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
+ <li class="nav-item">
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#one">one</a></li>
+ <li><a href="#two">two</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="#three">three</a></li>
</ul>
- </div>
- </div>
+ </li>
+ </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
diff --git a/docs/content/typography.md b/docs/content/typography.md
index 299edc5709cce4dcdd1f7e07ef8f74621751ebca..2434a73281d2ee5202fdae2628bd7b64d0c588dc 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -179,7 +179,7 @@ For quoting blocks of content from another source within your document. Wrap `<b
Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.
{% example html %}
-<blockquote>
+<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
@@ -190,7 +190,7 @@ Add a `<footer>` for identifying the source. Wrap the name of the source work in
Add `.blockquote-reverse` for a blockquote with right-aligned content.
{% example html %}
-<blockquote class="blockquote-reverse">
+<blockquote class="blockquote blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
diff --git a/docs/index.html b/docs/index.html
index 989e9ad77e35b86e4ed13e16e5687d399e3370ba..516ba5f464ef0146c3e686a6cc2693e1d4980bbb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -28,7 +28,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
<h4>Managed dependencies</h4>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p>
<p>
- <a class="btn btn-primary" href="">View install methods</a>
+ <a class="btn btn-bs btn-outline" href="">View install methods</a>
</p>
</div>
<!-- <div class="col-sm-4">
@@ -51,7 +51,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
<hr class="half-rule">
<p class="lead">More customized builds of Bootstrap's CSS and JS are also available.</p>
- <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline btn-lg">More download options</a>
+ <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-bs btn-outline btn-lg">More download options</a>
</div>
</div>
@@ -83,7 +83,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
<hr class="half-rule">
<p class="lead">Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
- <a href="{{ site.repo }}" class="btn btn-outline btn-lg">View the GitHub project</a>
+ <a href="{{ site.repo }}" class="btn btn-bs btn-outline btn-lg">View the GitHub project</a>
</div>
</div>
@@ -107,6 +107,6 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
<hr class="half-rule">
<p class="lead">We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
- <a href="{{ site.expo }}" class="btn btn-outline btn-lg">Explore the Expo</a>
+ <a href="{{ site.expo }}" class="btn btn-bs btn-outline btn-lg">Explore the Expo</a>
</div>
</div>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3a0bd195947f3b1bbd6534263c12ac93cfab0f0d..a51001a372490a529a060f4ea458e931d5fd9cea 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -14,6 +14,8 @@
// Grid breakpoints
// Grid containers
// Grid columns
+// Fonts
+// Components
// Colors
@@ -53,6 +55,7 @@ $enable-hover-media-query: false !default;
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
+$border-width: .0625rem !default;
// Body
@@ -152,7 +155,6 @@ $headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
-$border-width: .0625rem !default;
// Components