Index: main/waeup.diazo/trunk/kofa/theme.html
===================================================================
--- main/waeup.diazo/trunk/kofa/theme.html	(revision 10164)
+++ main/waeup.diazo/trunk/kofa/theme.html	(revision 10878)
@@ -10,6 +10,4 @@
     <!-- stylesheets -->
     <link href="bootstrap/css/bootstrap.min.css"
-	  rel="stylesheet">
-    <link href="bootstrap/css/bootstrap-responsive.min.css"
 	  rel="stylesheet">
     <link href="static/css/base.css" rel="stylesheet">
@@ -35,66 +33,64 @@
   <body id="kofa-body">
 
-    <div class="navbar navbar-inverse navbar-static-top">
-      <div class="navbar-inner">
-        <div class="container-fluid">
-          <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>
-          </button>
-          <a class="brand active" href="/">WAeUP.Kofa</a>
-          <div class="nav-collapse collapse kofa-primary-nav">
-            <ul class="nav kofa-navbar-left">
-              <li class="active"><a href="#">Academics</a></li>
-              <li><a href="#about">Applicants</a></li>
-              <li><a href="#contact">Students</a></li>
-              <li><a href="#contact">Hostels</a></li>
-              <li class="dropdown kofa-langselect">
-                <a href="#" class="dropdown-toggle"
-		   data-toggle="dropdown">Language <b class="caret"></b></a>
-                <ul class="dropdown-menu">
-                  <li class="kofa-language"><a href="#">en</a></li>
-                  <li class="kofa-language"><a href="#">fr</a></li>
-                  <li class="kofa-language"><a href="#">de</a></li>
-                  <li class="kofa-language"><a href="#">ha</a></li>
-                  <li class="kofa-language"><a href="#">yo</a></li>
-                  <li class="kofa-language"><a href="#">ig</a></li>
-                </ul>
-              </li>
+    <div class="navbar navbar-inverse" role="navigation">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" data-toggle="collapse"
+		  data-target="#kofa-primary-nav">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand active" href="/">WAeUP.Kofa</a>
+      </div>
+      <div class="navbar-collapse collapse"
+           id="kofa-primary-nav">
+        <ul class="nav navbar-nav kofa-navbar-left">
+          <li class="active"><a href="#">Academics</a></li>
+          <li><a href="#about">Applicants</a></li>
+          <li><a href="#contact">Students</a></li>
+          <li><a href="#contact">Hostels</a></li>
+          <li class="dropdown kofa-langselect">
+            <a href="#" class="dropdown-toggle"
+	       data-toggle="dropdown">Language <b class="caret"></b></a>
+            <ul class="dropdown-menu">
+              <li class="kofa-language"><a href="#">en</a></li>
+              <li class="kofa-language"><a href="#">fr</a></li>
+              <li class="kofa-language"><a href="#">de</a></li>
+              <li class="kofa-language"><a href="#">ha</a></li>
+              <li class="kofa-language"><a href="#">yo</a></li>
+              <li class="kofa-language"><a href="#">ig</a></li>
             </ul>
-            <ul class="nav secondary-nav pull-right kofa-navbar-right">
-              <li class="nav"><a href="#">Contact</a></li>
-              <li class="nav"><a href="#">Logout</a></li>
-	    </ul>
+          </li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
+          <li class="nav"><a href="#">Contact</a></li>
+          <li class="nav"><a href="#">Logout</a></li>
+	</ul>
 
-          </div><!--/.nav-collapse -->
-        </div>
-      </div>
-    </div>
+      </div><!--/.nav-collapse -->
+    </div><!-- /.navbar -->
 
+    <div class="container">
+      <div class="row">
 
-    <div class="container-fluid">
+    <ol class="breadcrumb kofa-breadcrumbs">
+      <li class="kofa-breadcrumb">
+	<a href="#">
+	  Home
+	</a>
+      </li>
+      <li class="kofa-breadcrumb">
+	<a href="#">
+	  Subtopic
+	</a>
+      </li>
+    </ol><!-- /kofa-breadcrumbs -->
 
-      <div class="row-fluid kofa-breadcrumbs-box">
-	<div class="span12">
-	  <ul class="breadcrumb kofa-breadcrumbs">
-	    <li>
-	      <a href="#">
-		<span>Home</span>
-	      </a>
-	      <span class="divider">/</span>
-	    </li>
-	    <li>
-	      <a href="#">
-		<span>Subtopic</span>
-	      </a>
-	    </li>
-	  </ul>
-	</div><!-- /span12 -->
-      </div><!-- /row-fluid -->
+    </div></div>
 
-      <div class="row-fluid">
-	<div class="span2 kofa-sidebar">
+    <div class="container">
+
+      <div class="row">
+	<div class="col-md-3 kofa-sidebar">
 	  <div class="sidebar-nav well">
 	    <ul class="nav nav-list">
@@ -110,5 +106,5 @@
           </div> <!-- /well -->
         </div><!-- /span2 -->
-	<div class="span10 content well kofa-content kofa-content-narrow">
+	<div class="col-md-9 content well kofa-content kofa-content-narrow">
 
 	  <div class="hero-unit kofa-content-label-box">
@@ -144,12 +140,42 @@
 	  </div>
 	  <div>...content that spans the whole page.</div>
+
+          <div id="#sampleform">
+            <form method="post">
+              <fieldset id="form-fieldset">
+                <legend>A Sample Form</legend>
+                <div class="form-field">
+                  <label>Some Label</label>
+                  <input type="text" name="myinput[]" placeholder="A name..." />
+                </div>
+                <button type="submit" class="btn rowadd">
+                  Add row
+                </button>
+                <br />
+                <button type="submit" class="btn btn-primary">Save</button>
+              </fieldset>
+            </form>
+          </div><!-- /sampleform -->
+
 	</div>
-      </div>
+      </div><!-- /row-fluid -->
+
+
 
     </div><!-- /container-fluid -->
+
 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <script src="bootstrap/js/bootstrap.min.js"></script>
 
+    <script type="text/javascript">
+      $("button.rowadd").click(function (evt) {
+         /* Do not submit the form really */
+         evt.preventDefault();
+         /* Add first .form-field after last .form-field... */
+         $(".form-field:last").after($(".form-field:first").clone().hide().fadeIn());
+      });
+    </script>
+
   </body>
 </html>
