Full source

{% load tags %}
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Page{% endblock %}</title>
    <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css">
  <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-responsive.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  body
  {
    margin:0;
    padding:0;
  }
  .floatright
  {
    float: right;
  }
  </style>
</head>
<body>

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <span class="brand" href="#">Test</span>


      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
       <ul class="nav">
         <li class="{% active request "^/$" %}"><a href="#">Home</a></li>
         <li class="{% active request "^/about$" %}"><a href="#">About</a></li>
       </ul>


        <form class="navbar-search pull-right">
          <input type="text" class="search-query" placeholder="Search...">
        </form>
        <div class="navbar-form pull-right">
         <a href="{% url "login" %}" class="btn">Log in</a>
         <a href="#" class="btn btn-primary">Sign up</a>
        </div>
      </div>
      </div>

        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{{ STATIC_URL}}js/bootstrap.min.js"></script>
</body>
</html>