diff --git a/Gemfile b/Gemfile
index 1a8977f8db..2fa340d111 100644
--- a/Gemfile
+++ b/Gemfile
@@ -4,5 +4,6 @@ group :development, :test do
gem 'jekyll', '~> 3.4.3'
gem 'jekyll-redirect-from', '~> 0.12.1'
gem 'jekyll-sitemap', '~> 1.1.1'
+ gem 'jekyll-toc', '~> 0.3.0.pre1'
gem 'scss_lint', '~> 0.53.0'
end
diff --git a/Gemfile.lock b/Gemfile.lock
index 4df2612fcd..71753d9e8f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -23,6 +23,8 @@ GEM
sass (~> 3.4)
jekyll-sitemap (1.1.1)
jekyll (~> 3.3)
+ jekyll-toc (0.3.0.pre1)
+ nokogiri (~> 1.6)
jekyll-watch (1.5.0)
listen (~> 3.0, < 3.1)
kramdown (1.13.2)
@@ -31,6 +33,9 @@ GEM
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
mercenary (0.3.6)
+ mini_portile2 (2.1.0)
+ nokogiri (1.7.2)
+ mini_portile2 (~> 2.1.0)
pathutil (0.14.0)
forwardable-extended (~> 2.6)
public_suffix (2.0.5)
@@ -52,6 +57,7 @@ DEPENDENCIES
jekyll (~> 3.4.3)
jekyll-redirect-from (~> 0.12.1)
jekyll-sitemap (~> 1.1.1)
+ jekyll-toc (~> 0.3.0.pre1)
scss_lint (~> 0.53.0)
BUNDLED WITH
diff --git a/_config.yml b/_config.yml
index 96ffe8f9d7..3f6732ae8c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -21,6 +21,7 @@ exclude: [assets/scss/]
gems:
- jekyll-redirect-from
- jekyll-sitemap
+ - jekyll-toc
# Social
title: Bootstrap
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 540c4c733d..58b9482c01 100644
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -17,12 +17,18 @@
-
+
{{ page.title }}
{{ page.description }}
{% include ads.html %}
{{ content }}
+
+ {% if page.toc %}
+
+ {{ content | toc_only }}
+
+ {% endif %}
diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
index c8749c1d42..33d89d40d2 100644
--- a/docs/assets/scss/_content.scss
+++ b/docs/assets/scss/_content.scss
@@ -5,32 +5,6 @@
//
.bd-content {
- @include media-breakpoint-up(xl) {
- flex: 1;
- padding-right: 20%;
-
- #contents {
- display: none;
- }
- #markdown-toc {
- position: fixed;
- top: 5rem;
- right: 0;
- width: 20%;
- max-height: calc(100vh - 8rem);
- padding-right: 1.5rem;
- padding-left: 3rem;
- overflow-y: auto;
- font-size: .85rem;
- }
- }
-
- @media (min-width: 2000px) {
- #markdown-toc {
- padding-left: 6rem;
- }
- }
-
// Hack the sticky header
h2[id],
h3[id] {
@@ -126,21 +100,3 @@
font-weight: 300;
}
}
-
-
-//
-// Markdown generated ToC
-//
-
-#markdown-toc {
- // Hide the first child li because it's always going to be "Contents".
- > li:first-child {
- display: none;
- }
-
- ul {
- padding-left: 2rem;
- margin-top: .25rem;
- margin-bottom: .25rem;
- }
-}
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index d8e5f93045..55bed3036b 100644
--- a/docs/assets/scss/_sidebar.scss
+++ b/docs/assets/scss/_sidebar.scss
@@ -4,6 +4,40 @@
// Side navigation
//
+.bd-toc {
+ position: sticky;
+ top: 4rem;
+ max-height: calc(100vh - 4rem);
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ overflow-y: auto;
+ font-size: .85rem;
+}
+
+.section-nav {
+ padding-left: 0;
+ border-left: 1px solid #eee;
+
+ ul {
+ padding-left: 1rem;
+ }
+}
+
+.toc-entry {
+ display: block;
+
+ a {
+ display: block;
+ padding: .25rem 1.5rem;
+ color: #99979c;
+
+ &:hover {
+ color: $brand-primary;
+ text-decoration: none;
+ }
+ }
+}
+
.bd-sidebar {
background-color: #f5f5f5;
border-right: 1px solid rgba(0,0,0,.1);
@@ -93,6 +127,7 @@
> .bd-sidenav {
display: block;
+ padding-bottom: .75rem;
}
}
}
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index b07e4aacea..6be5d493dd 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@@ -4,18 +4,13 @@ title: Introduction
description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.
group: getting-started
redirect_from: "/getting-started/"
+toc: true
---
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
## Quick start
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/)