diff --git a/src/root/Makefile.am b/src/root/Makefile.am
index 97c4a610..4ef68ab8 100644
--- a/src/root/Makefile.am
+++ b/src/root/Makefile.am
@@ -7,7 +7,7 @@ STATIC = \
 FLOT = flot-0.6.zip
 TABLESORTER = jquery.tablesorter.zip
 JQUERY = jquery-ui-1.8.5.custom.zip
-BOOTSTRAP = bootstrap.zip
+BOOTSTRAP = bootstrap-2.0.3.zip
 
 ZIPS = $(FLOT) $(TABLESORTER) $(JQUERY) $(BOOTSTRAP)
 
diff --git a/src/root/bootstrap-2.0.3.zip b/src/root/bootstrap-2.0.3.zip
new file mode 100644
index 00000000..b631c401
Binary files /dev/null and b/src/root/bootstrap-2.0.3.zip differ
diff --git a/src/root/bootstrap.zip b/src/root/bootstrap.zip
deleted file mode 100644
index d5f53340..00000000
Binary files a/src/root/bootstrap.zip and /dev/null differ
diff --git a/src/root/layout.tt b/src/root/layout.tt
index beef8859..4885bcd0 100644
--- a/src/root/layout.tt
+++ b/src/root/layout.tt
@@ -16,20 +16,19 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
-    <link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
     <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
+    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+
+    <!-- hydra.css must be included before bootstrap-responsive to
+         make the @media rule work. -->
+    <link rel="stylesheet" href="/static/css/hydra.css" type="text/css" />
+    <link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
 
     <script type="text/javascript" src="/static/js/bootbox.min.js"></script>
 
-    <link rel="stylesheet" href="/static/css/hydra.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/tree.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/logfile.css" type="text/css" />
 
-    <!--
-    <script type="text/javascript" src="/static/js/tablesorter/jquery.tablesorter.js"></script>
-    -->
-
     <script type="text/javascript">
       $(document).ready(function() {
 
@@ -94,11 +93,11 @@
     <div class="navbar navbar-fixed-top navbar-inverse">
       <div class="navbar-inner">
         <div class="container">
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+          <button type="button" 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>
+          </button>
           <a class="brand" href="[% c.uri_for(c.controller('Root').action_for('index')) %]">
             [% IF logo == "" %]
               Hydra
@@ -106,7 +105,7 @@
               <img src="[% logo %]" alt="Hydra Logo" class="logo" />
             [% END %]
           </a>
-          <div class="nav-collapse collapse navbar-responsive-collapse">
+          <div class="nav-collapse collapse">
             [% PROCESS topbar.tt %]
           </div>
         </div>
diff --git a/src/root/static/css/hydra.css b/src/root/static/css/hydra.css
index 95226d70..987f00be 100644
--- a/src/root/static/css/hydra.css
+++ b/src/root/static/css/hydra.css
@@ -1,5 +1,7 @@
-body {
-    padding-top: 40px;
+@media (min-width: 768px) {
+    body {
+        padding-top: 40px;
+    }
 }
 
 .logo {