<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    {% include header.html %}
    <!-- Place anything custom after this. -->
  </head>
  <body data-spy="scroll" data-target=".bs-docs-sidebar">

    <!-- Docs master nav -->
    {% include nav-main.html %}

    <!-- Docs page layout -->
    <div class="container bs-docs-container">
      <div class="bs-docs-header">
        <h1>{{ page.title }}</h1>
        <p class="lead">{{ page.lead }}</p>
      </div>

      <div class="row">
        <div class="col col-lg-3">
          <div class="bs-docs-sidebar">
            <ul class="nav">
              {% if page.slug == "welcome" %}
                 {% include nav-welcome.html %}
              {% elsif page.slug == "css" %}
                 {% include nav-css.html %}
              {% elsif page.slug == "components" %}
                 {% include nav-components.html %}
              {% elsif page.slug == "js" %}
                 {% include nav-javascript.html %}
              {% endif %}
            </ul>
          </div>
        </div>
        <div class="col col-lg-9">
          {{ content }}
        </div>
      </div>

      <!-- Quick back to top -->
      <a href="#welcome" class="bs-docs-top">
        Back to top
      </a>

      <!-- Main docs footer (social buttons, copyright, etc). -->
      {% include colophon.html %}
    </div>

    <!-- JS and analytics only. -->
    {% include footer.html %}

  </body>
</html>
