body {

    /* With always visible navbar at top, make sure the content does not overlap with it. */

    padding-top: 70px;

}

    <!-- Custom CSS -->

    <link href="{% templatetag openblock %} static '{{ app_name }}/custom.css' {% templatetag closeblock %}" rel="stylesheet">

    <!-- Navigation bar, always visible at top. Drop "padding-top" from custom.css, and replace navbar-fixed-top

         with navbar-static-top if you prefer it not to be. -->

    <nav class="navbar navbar-inverse navbar-fixed-top">

      <div class="container">

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-navbar" aria-expanded="false">

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#">{{ app_name }}</a>

        </div>

        <!-- Group the links, forms etc in a div class that will be collapsed for small screens. -->

        <div class="collapse navbar-collapse" id="collapsed-navbar">

          <!-- Main menu entries. -->

          <ul class="nav navbar-nav">

            <li><a href="#">Home</a></li>

          </ul>

          <!-- Inline search form in navbar. -->

          <form class="navbar-form navbar-right" role="search">

            <div class="input-group">

              <input type="text" class="form-control" placeholder="Search">

              <span class="input-group-btn">

                <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>

              </span>

            </div>

          </form>

          <!-- Drop-down menu for user account. -->

          <ul class="nav navbar-nav navbar-right">

            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">

                <span class="glyphicon glyphicon-user"></span> Account <span class="caret"></span>

              </a>

              <ul class="dropdown-menu">

                <li><a href="#">Dashboard</a></li>

                <li role="separator" class="divider"></li>

                <li><a href="#">Log-out</a></li>

              </ul>

            </li>

          </ul>

        </div>

      </div>

    </nav>

    <!-- Main container that acts as wrapper for displaying content to users. -->

      <!-- Messages. -->

      {% templatetag openblock %} if messages {% templatetag closeblock %}

        {% templatetag openblock %} for message in messages {% templatetag closeblock %}

      <div class="{% templatetag openvariable %} message.tags {% templatetag closevariable %}">{% templatetag openvariable %} message {% templatetag closevariable %}</div>

        {% templatetag openblock %} endfor {% templatetag closeblock %}

      {% templatetag openblock %} endif {% templatetag closeblock %}

      <!-- Main content. -->

      <h1>Please override the content block in your template that extends base.html</h1>

{% templatetag openblock %} block title {% templatetag closeblock %}Probably an index page ☻{% templatetag openblock %} endblock {% templatetag closeblock %}

{% templatetag openblock %} block content {% templatetag closeblock %}

<h1>Well, looks like you haven't made any changes to the index.html yet &#9787;</h1>

{% templatetag openblock %} endblock {% templatetag closeblock %}