<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    {% include header.html %}
  </head>
  <body class="bs-docs" data-spy="scroll" data-target=".bs-docs-sidenav">
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

    {% include docs-nav.html %}

    <div class="bs-docs-header" id="content">
      <div class="bs-docs-container">
        {% if page.url contains "getting-started" %}
          <h1>Getting started</h1>
          <p class="lead">Learn how to quickly start a new project with Bootstrap with downloads, basic templates and examples, and more.</p>
        {% elsif page.url contains "layout" %}
          <h1>Layout</h1>
          <p class="lead">Grid system, containers, media object, and responsive utilities for organization pages.</p>
        {% elsif page.url contains "components" %}
          <h1>Components</h1>
          <p class="lead">
            Global styles for common HTML elements, as well as dozens of reusable components like dropdowns, input groups, navigation, alerts, and much more.
          </p>
        {% elsif page.url contains "javascript" %}
          <h1>JavaScript</h1>
          <p class="lead">Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
        {% elsif page.url contains "examples" %}
          <h1>Examples</h1>
          <p class="lead">Build on the basic template above with Bootstrap's many components. Customize and adapt Bootstrap to suit your individual project's needs.</p>
        {% elsif page.url contains "about" %}
          <h1>About</h1>
          <p class="lead">Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p>
        {% endif %}

        {% include ads.html %}
      </div>
    </div>

    <div class="bs-docs-container bs-docs-content">
      {{ content }}
    </div>

    {% include footer.html %}
  </body>
</html>
