--- a/static/css/custom.css	Sun Jul 05 23:04:51 2015 +0800
+++ b/static/css/custom.css	Sun Jul 05 23:30:58 2015 +0800
@@ -46,22 +46,18 @@
 }
 
 .inline-editor {
-    display: block;
     position: relative;
     margin-bottom: 0;
 }
 
 .inline-editor input[type="text"] {
-    padding-top: 2px;
-    padding-bottom: 2px;
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 26px;
 }
 
-.inline-editor textarea {
-    margin-bottom: 0;
-}
-
-.align-right {
-    text-align: right;
+.inline-editor .btn-sm {
+    padding: 3px 8px;
 }
 
 .ui-sidebar {

--- a/static/js/framework/views/inline.js	Sun Jul 05 23:04:51 2015 +0800
+++ b/static/js/framework/views/inline.js	Sun Jul 05 23:30:58 2015 +0800
@@ -6,7 +6,7 @@
     renderInput: function(options) {
         var view = this;
         
-        this.$input = $('<input>').attr('type', 'text').addClass('input-xlarge').val(options.target.text());
+        this.$input = $('<input type="text" class="form-control input-sm">').val(options.target.text());
         
         this.$input.keyup(function(e) {
             switch (e.keyCode) {
@@ -19,7 +19,8 @@
             }
         });
         
-        this.$el.append(this.$input, this.$saveButton, this.$cancelButton);
+        this.$group.append(this.$saveButton, this.$cancelButton);
+        this.$el.append(this.$input, this.$group);
         options.target.after(this.$el);
         this.$input.focus();
             
@@ -29,7 +30,7 @@
     renderTextarea: function(options) {
         var view = this;
         
-        this.$input = $('<textarea>').addClass('input-xlarge').attr('rows', 3).text(options.target.text());
+        this.$input = $('<textarea class="form-control input-sm" rows="3">').text(options.target.text());
         
         this.$input.keyup(function(e) {
             switch (e.keyCode) {
@@ -44,7 +45,8 @@
             }
         });
         
-        this.$el.append(this.$input, this.$saveButton, this.$cancelButton);
+        this.$group.append(this.$saveButton, this.$cancelButton);
+        this.$el.append(this.$input, this.$group);
         options.target.after(this.$el);
         this.$input.focus();
             
@@ -54,9 +56,10 @@
     render: function(options) {
         var view = this;
         
-        this.$saveButton = $('<button>').addClass('btn btn-small btn-success').html('<i class="icon-white icon-ok"></i>');
-        this.$cancelButton = $('<button>').addClass('btn btn-small').html('<i class="icon-remove"></i>');
-        this.$el = $('<div>').addClass('inline-editor input-append');
+        this.$saveButton = $('<button class="btn btn-sm btn-success">').html('<i class="glyphicon glyphicon-ok"></i>');
+        this.$cancelButton = $('<button class="btn btn-sm btn-default">').html('<i class="glyphicon glyphicon-remove"></i>');
+        this.$el = $('<div class="inline-editor input-group">');
+        this.$group = $('<span class="input-group-btn">');
         
         this.$cancelButton.click(function() {
             view.$el.remove();

--- a/static/js/framework/views/projects.js	Sun Jul 05 23:04:51 2015 +0800
+++ b/static/js/framework/views/projects.js	Sun Jul 05 23:30:58 2015 +0800
@@ -50,10 +50,10 @@
     
     updateProgress: function(project) {
         project.$item
-            .find('.progress')
-            .removeClass('progress-info progress-success progress-warning progress-danger')
-            .addClass(project.get('color') ? 'progress-' + project.get('color') : '')
-            .find('.bar')
+            .find('.progress-bar')
+            .removeClass('progress-bar-info progress-bar-success progress-bar-warning progress-bar-danger')
+            .addClass(project.get('color') ? 'progress-bar-' + project.get('color') : '')
+            .attr('aria-valuenow', (100 * project.tasks.progress()))
             .css('width', (100 * project.tasks.progress()) + '%');
     },
     
@@ -71,7 +71,7 @@
         
         project.tasks.create = function(attributes, options) {
             attributes = attributes || {};
-            attributes['project_id'] = project.id;
+            attributes.project_id = project.id;
             return tasks.create(attributes, options);
         };
         

--- a/templates/index.html	Sun Jul 05 23:04:51 2015 +0800
+++ b/templates/index.html	Sun Jul 05 23:30:58 2015 +0800
@@ -4,14 +4,15 @@
     <title>Fruit Bar Progress Tracker</title>
     <link type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" rel="shortcut icon">
 
-    <link type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
+    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
+    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
     <link type="text/css" href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
-    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     {% assets filters='jsmin', output='bundles/fruitbar.%(version)s.js',
        'js/backbone.shard.js',
        'js/framework/models.js',
@@ -36,17 +37,17 @@
   <body style="opacity: 0;">
     <div class="container">
       <div class="row">
-        <div class="span2 ui-sidebar align-right">
-          <button class="btn btn-mini btn-success btn-new-project">New project</button>
+        <div class="col-sm-2 ui-sidebar text-right">
+          <button class="btn btn-xs btn-success btn-new-project">New project</button>
         </div>
-        <div class="span8">
+        <div class="col-sm-8">
           <h3>
-            <span class="muted">Workspace</span> <span class="workspace-title"></span> <small>(<span class="project-counter"></span>)</small>
+            <span class="text-muted">Workspace</span> <span class="workspace-title"></span> <small>(<span class="project-counter"></span>)</small>
           </h3>
           <hr>
         </div>
-        <div class="span2 ui-sidebar">
-          <ul class="nav nav-tabs nav-stacked workspace-tabs">
+        <div class="col-sm-2 ui-sidebar">
+          <ul class="nav nav-pills nav-stacked workspace-tabs">
             <script id="workspace-tab-template" type="text/template">
               <li data-workspace="<%- data.name %>">
                 <a href="#<%- data.name %>">#<%- data.name %></a>
@@ -60,11 +61,11 @@
         <script id="project-template" type="text/template">
           <div class="project">
             <div class="row">
-              <div class="span2 align-right ondemand">
-                <button class="btn btn-mini btn-danger btn-delete-project">Delete</button>
-                <button class="btn btn-mini btn-success btn-new-task">New task</button>
+              <div class="col-sm-2 text-right ondemand">
+                <button class="btn btn-xs btn-danger btn-delete-project">Delete</button>
+                <button class="btn btn-xs btn-success btn-new-task">New task</button>
               </div>
-              <div class="span4">
+              <div class="col-sm-4">
                 <h4>
                   <span class="inline-editable"
                     data-input-type="input"
@@ -73,9 +74,9 @@
                 </h4>
               </div>
 
-              <div class="span4">
-                <div class="progress progress-striped">
-                  <div class="bar"></div>
+              <div class="col-sm-4">
+                <div class="progress">
+                  <div class="progress-bar progress-bar-striped" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
                 </div>
               </div>
             </div>
@@ -87,17 +88,17 @@
         <script id="task-template" type="text/template">
           <div class="task">
             <div class="row">
-              <div class="span2 align-right ondemand">
-                <button class="btn btn-mini btn-danger btn-delete-task">Delete</button>
+              <div class="col-sm-2 text-right ondemand">
+                <button class="btn btn-xs btn-danger btn-delete-task">Delete</button>
               </div>
-              <div class="span4">
+              <div class="col-sm-4">
                 <input type="checkbox" <% if (data.done) print('checked') %>>
                 <span class="inline-editable"
                   data-input-type="input"
                   data-model="task"
                   data-model-attribute="name"><%- data.name %></span>
               </div>
-              <div class="span4">
+              <div class="col-sm-4">
                 <div class="task-note">
                   <span class="inline-editable"
                     data-input-type="textarea"