From 2778bb50b7856a6b43c0fdcd20bd0ef2030f8627 Mon Sep 17 00:00:00 2001
From: Alex Fermon <alex@xicre.com>
Date: Mon, 9 Nov 2015 02:32:01 -0600
Subject: [PATCH] Update boostrap view

---
 application/view/login/changeUserRole.php     | 44 +++++-----
 application/view/login/editAvatar.php         | 33 ++++----
 application/view/login/editUserEmail.php      | 17 ++--
 application/view/login/editUsername.php       | 23 +++---
 application/view/login/index.php              | 82 +++++++++++--------
 application/view/login/register.php           | 62 ++++++++------
 .../view/login/requestPasswordReset.php       | 25 +++---
 application/view/login/resetPassword.php      | 25 +++---
 application/view/login/showProfile.php        | 34 ++++----
 application/view/login/verify.php             | 10 +--
 application/view/note/edit.php                | 41 ++++++----
 application/view/note/index.php               | 42 +++++-----
 application/view/profile/index.php            | 72 ++++++++--------
 application/view/profile/showProfile.php      | 59 +++++++------
 14 files changed, 297 insertions(+), 272 deletions(-)

diff --git a/application/view/login/changeUserRole.php b/application/view/login/changeUserRole.php
index ef2ecac63..f73ddd1d0 100644
--- a/application/view/login/changeUserRole.php
+++ b/application/view/login/changeUserRole.php
@@ -7,29 +7,27 @@
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
-        <div class="box">
-            <h2>Change account type</h2>
-            <p>
-                This page is a basic implementation of the upgrade-process.
-                User can click on that button to upgrade their accounts from
-                "basic account" to "premium account". This script simple offers
-                a click-able button that will upgrade/downgrade the account instantly.
-                In a real world application you would implement something like a
-                pay-process.
-            </p>
-                <p>
-                        Please note: This whole process has been renamed from AccountType (v3.0) to UserRole (v3.1).
-                </p>
+        <h2>Change account type</h2>
+        <p>
+            This page is a basic implementation of the upgrade-process.
+            User can click on that button to upgrade their accounts from
+            "basic account" to "premium account". This script simple offers
+            a click-able button that will upgrade/downgrade the account instantly.
+            In a real world application you would implement something like a
+            pay-process.
+        </p>
+        <p>
+            Please note: This whole process has been renamed from AccountType (v3.0) to UserRole (v3.1).
+        </p>
 
-            <h2>Currently your account type is: <?php echo Session::get('user_account_type'); ?></h2>
-            <!-- basic implementation for two account types: type 1 and type 2 -->
-                <form action="<?php echo Config::get('URL'); ?>login/changeUserRole_action" method="post">
-                <?php if (Session::get('user_account_type') == 1) { ?>
-                    <input type="submit" name="user_account_upgrade" value="Upgrade my account (to Premium User)" />
-                    <?php } else if (Session::get('user_account_type') == 2) { ?>
-                        <input type="submit" name="user_account_downgrade" value="Downgrade my account (to Basic User)" />
-                    <?php } ?>
-                </form>
-        </div>
+        <h2>Currently your account type is: <?php echo Session::get('user_account_type'); ?></h2>
+        <!-- basic implementation for two account types: type 1 and type 2 -->
+        <form action="<?php echo Config::get('URL'); ?>login/changeUserRole_action" method="post">
+        <?php if (Session::get('user_account_type') == 1) { ?>
+            <input class="btn btn-success" type="submit" name="user_account_upgrade" value="Upgrade my account (to Premium User)" />
+            <?php } else if (Session::get('user_account_type') == 2) { ?>
+                <input class="btn btn-warning" type="submit" name="user_account_downgrade" value="Downgrade my account (to Basic User)" />
+            <?php } ?>
+        </form>
     </div>
 </div>
diff --git a/application/view/login/editAvatar.php b/application/view/login/editAvatar.php
index ce8e0cb65..ba59cad24 100644
--- a/application/view/login/editAvatar.php
+++ b/application/view/login/editAvatar.php
@@ -7,26 +7,25 @@
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
-        <div class="box">
-            <h3>Upload an Avatar</h3>
+        <h3>Upload an Avatar</h3>
 
-            <div class="feedback info">
-                If you still see the old picture after uploading a new one: Hard-Reload the page with F5! Your browser doesn't
-                realize there's a new image as new and old one have the same filename.
-            </div>
+        <p>
+            If you still see the old picture after uploading a new one: Hard-Reload the page with F5! Your browser doesn't
+            realize there's a new image as new and old one have the same filename.
+        </p>
 
-            <form action="<?php echo Config::get('URL'); ?>login/uploadAvatar_action" method="post" enctype="multipart/form-data">
+        <form action="<?php echo Config::get('URL'); ?>login/uploadAvatar_action" method="post" enctype="multipart/form-data">
+            <div class="form-group"
                 <label for="avatar_file">Select an avatar image from your hard-disk (will be scaled to 44x44 px, only .jpg currently):</label>
-                <input type="file" name="avatar_file" required />
+                <input type="file" id="avatar_file" name="avatar_file" required />
                 <!-- max size 5 MB (as many people directly upload high res pictures from their digital cameras) -->
-                <input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
-                <input type="submit" value="Upload image" />
-            </form>
-        </div>
-
-        <div class="box">
-            <h3>Delete your avatar</h3>
-            <p>Click this link to delete your (local) avatar: <a href="<?php echo Config::get('URL'); ?>login/deleteAvatar_action">Delete your avatar</a>
-        </div>
+            </div>
+            <input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
+            <input class="btn btn-primary" type="submit" value="Upload image" />
+        </form>
+        
+        <h3>Delete your avatar</h3>
+        <p>Click this link to delete your (local) avatar: <a class="btn btn-danger" href="<?php echo Config::get('URL'); ?>login/deleteAvatar_action">Delete your avatar</a>
+        
     </div>
 </div>
diff --git a/application/view/login/editUserEmail.php b/application/view/login/editUserEmail.php
index 6c1629839..b64bbbfbd 100644
--- a/application/view/login/editUserEmail.php
+++ b/application/view/login/editUserEmail.php
@@ -7,16 +7,15 @@
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
-        <div class="box">
-            <h2>Change your email address</h2>
+        <h2>Change your email address</h2>
 
-            <form action="<?php echo Config::get('URL'); ?>login/editUserEmail_action" method="post">
-                <label>
-                    New email address: <input type="text" name="user_email" required />
-                </label>
-                <input type="submit" value="Submit" />
-            </form>
-        </div>
+        <form class="form-inline" action="<?php echo Config::get('URL'); ?>login/editUserEmail_action" method="post">
+            <div class="form-group">
+                <label for="user_email">New email address:</label>
+                <input type="text" id="user_email" name="user_email" required />
+            </div>
+            <input class="btn btn-primary" type="submit" value="Submit" />
+        </form>
     </div>
 </div>
     
diff --git a/application/view/login/editUsername.php b/application/view/login/editUsername.php
index 9220b8aae..fd8ef7dee 100644
--- a/application/view/login/editUsername.php
+++ b/application/view/login/editUsername.php
@@ -7,18 +7,17 @@
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
-        <div class="box">
-            <h2>Change your username</h2>
+        <h2>Change your username</h2>
 
-            <form action="<?php echo Config::get('URL'); ?>login/editUserName_action" method="post">
-                <!-- btw http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag -->
-                <label>
-                    New username: <input type="text" name="user_name" required />
-                </label>
-                            <!-- set CSRF token at the end of the form -->
-                            <input type="hidden" name="csrf_token" value="<?= Csrf::makeToken(); ?>" />
-                <input type="submit" value="Submit" />
-            </form>
-        </div>
+        <form class="form-inline" action="<?php echo Config::get('URL'); ?>login/editUserName_action" method="post">
+            <!-- btw http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag -->
+            <div class="form-group">
+                <label for="user_name">New username:</label>
+                <input type="text" name="user_name" id="user_name" required />
+            </div>
+            <!-- set CSRF token at the end of the form -->
+            <input type="hidden" name="csrf_token" value="<?= Csrf::makeToken(); ?>" />
+            <input class="btn btn-primary" type="submit" value="Submit" />
+        </form>
     </div>
 </div>
diff --git a/application/view/login/index.php b/application/view/login/index.php
index 7099788ef..cc4755112 100644
--- a/application/view/login/index.php
+++ b/application/view/login/index.php
@@ -1,21 +1,29 @@
-<div class="container">
-
-    <!-- echo out the system feedback (error and success messages) -->
-    <?php $this->renderFeedbackMessages(); ?>
-
-    <div class="login-page-box">
-        <div class="table-wrapper">
-
-            <!-- login box on left side -->
-            <div class="login-box">
-                <h2>Login here</h2>
+<div class="row">
+    <div class="col-md-12">
+        <!-- echo out the system feedback (error and success messages) -->
+        <?php $this->renderFeedbackMessages(); ?>
+    </div>
+    <div class="row">
+        <div class="col-xs-6">
+            <div class="well">
                 <form action="<?php echo Config::get('URL'); ?>login/login" method="post">
-                    <input type="text" name="user_name" placeholder="Username or email" required />
-                    <input type="password" name="user_password" placeholder="Password" required />
-                    <label for="set_remember_me_cookie" class="remember-me-label">
-                        <input type="checkbox" name="set_remember_me_cookie" class="remember-me-checkbox" />
-                        Remember me for 2 weeks
-                    </label>
+                    
+                    
+                    
+                    <div class="form-group">
+                        <label for="user_name">Username</label>
+                        <input class="form-control" type="text" name="user_name" id="user_name" placeholder="Username or email" required />
+                    </div>
+                    <div class="form-group">
+                        <label for="user_password" >Password</label>
+                        <input class="form-control" type="password" id="user_password" name="user_password" placeholder="Password" required />
+                    </div>
+                    <div class="checkbox">
+                        <label>
+                            <input type="checkbox" name="set_remember_me_cookie" class="remember-me-checkbox" />
+                            Remember me for 2 weeks
+                        </label>
+                    </div>
                     <!-- when a user navigates to a page that's only accessible for logged a logged-in user, then
                          the user is sent to this page here, also having the page he/she came from in the URL parameter
                          (have a look). This "where did you came from" value is put into this form to sent the user back
@@ -24,27 +32,29 @@
                     <?php if (!empty($this->redirect)) { ?>
                         <input type="hidden" name="redirect" value="<?php echo $this->redirect ?>" />
                     <?php } ?>
-					<!-- 
-						set CSRF token in login form, although sending fake login requests mightn't be interesting gap here.
-						If you want to get deeper, check these answers:
-							1. natevw's http://stackoverflow.com/questions/6412813/do-login-forms-need-tokens-against-csrf-attacks?rq=1
-							2. http://stackoverflow.com/questions/15602473/is-csrf-protection-necessary-on-a-sign-up-form?lq=1
-							3. http://stackoverflow.com/questions/13667437/how-to-add-csrf-token-to-login-form?lq=1
-					-->
-					<input type="hidden" name="csrf_token" value="<?= Csrf::makeToken(); ?>" />
-                    <input type="submit" class="login-submit-button" value="Log in"/>
+                    <!-- 
+                            set CSRF token in login form, although sending fake login requests mightn't be interesting gap here.
+                            If you want to get deeper, check these answers:
+                                    1. natevw's http://stackoverflow.com/questions/6412813/do-login-forms-need-tokens-against-csrf-attacks?rq=1
+                                    2. http://stackoverflow.com/questions/15602473/is-csrf-protection-necessary-on-a-sign-up-form?lq=1
+                                    3. http://stackoverflow.com/questions/13667437/how-to-add-csrf-token-to-login-form?lq=1
+                    -->
+                    <input type="hidden" name="csrf_token" value="<?= Csrf::makeToken(); ?>" />
+                    <input type="submit" class="btn btn-success btn-block" value="Log in"/>
                 </form>
-                <div class="link-forgot-my-password">
-                    <a href="<?php echo Config::get('URL'); ?>login/requestPasswordReset">I forgot my password</a>
-                </div>
-            </div>
-
-            <!-- register box on right side -->
-            <div class="register-box">
-                <h2>No account yet ?</h2>
-                <a href="<?php echo Config::get('URL'); ?>login/register">Register</a>
+                <a class="btn btn-default btn-block" href="<?php echo Config::get('URL'); ?>login/requestPasswordReset">I forgot my password</a>
             </div>
-
+        </div>
+        <div class="col-xs-6">
+            <p class="lead">Register now for <span class="text-success">FREE</span></p>
+            <ul class="list-unstyled" style="line-height: 2">
+                <li><span class="glyphicon glyphicon-ok text-success"></span> See all your orders</li>
+                <li><span class="glyphicon glyphicon-ok text-success"></span> Fast re-order</li>
+                <li><span class="glyphicon glyphicon-ok text-success"></span> Save your favorites</li>
+                <li><span class="glyphicon glyphicon-ok text-success"></span> Fast checkout</li>
+                <li><span class="glyphicon glyphicon-ok text-success"></span> Get a gift <small>(only new customers)</small></li>
+            </ul>
+            <p><a class="btn btn-info btn-block" href="<?php echo Config::get('URL'); ?>login/register">Register</a></p>
         </div>
     </div>
 </div>
diff --git a/application/view/login/register.php b/application/view/login/register.php
index a9169c141..e064884a8 100644
--- a/application/view/login/register.php
+++ b/application/view/login/register.php
@@ -1,37 +1,49 @@
-<div class="container">
-
-    <!-- echo out the system feedback (error and success messages) -->
-    <?php $this->renderFeedbackMessages(); ?>
+<div class="row">
+    <div class="col-md-12"
 
+        <!-- echo out the system feedback (error and success messages) -->
+        <?php $this->renderFeedbackMessages(); ?>
+    
+    </div>
     <!-- login box on left side -->
-    <div class="login-box" style="width: 50%; display: block;">
+    <div class="col-md-6 col-md-offset-3 well text-center">
         <h2>Register a new account</h2>
 
         <!-- register form -->
         <form method="post" action="<?php echo Config::get('URL'); ?>login/register_action">
             <!-- the user name input field uses a HTML5 pattern check -->
-            <input type="text" pattern="[a-zA-Z0-9]{2,64}" name="user_name" placeholder="Username (letters/numbers, 2-64 chars)" required />
-            <input type="text" name="user_email" placeholder="email address (a real address)" required />
-            <input type="password" name="user_password_new" pattern=".{6,}" placeholder="Password (6+ characters)" required autocomplete="off" />
-            <input type="password" name="user_password_repeat" pattern=".{6,}" required placeholder="Repeat your password" autocomplete="off" />
-
+            <div class="form-group">
+                <input class="form-control" type="text" pattern="[a-zA-Z0-9]{2,64}" name="user_name" placeholder="Username (letters/numbers, 2-64 chars)" required />
+            </div>
+            <div class="form-group">
+                <input class="form-control" type="text" name="user_email" placeholder="email address (a real address)" required />
+            </div>
+            <div class="form-group">
+                <input class="form-control" type="password" name="user_password_new" pattern=".{6,}" placeholder="Password (6+ characters)" required autocomplete="off" />
+            </div>
+            <div class="form-group">
+                <input class="form-control" type="password" name="user_password_repeat" pattern=".{6,}" required placeholder="Repeat your password" autocomplete="off" />
+            </div>
             <!-- show the captcha by calling the login/showCaptcha-method in the src attribute of the img tag -->
-            <img id="captcha" src="<?php echo Config::get('URL'); ?>login/showCaptcha" />
-            <input type="text" name="captcha" placeholder="Please enter above characters" required />
-
-            <!-- quick & dirty captcha reloader -->
-            <a href="#" style="display: block; font-size: 11px; margin: 5px 0 15px 0; text-align: center"
-               onclick="document.getElementById('captcha').src = '<?php echo Config::get('URL'); ?>login/showCaptcha?' + Math.random(); return false">Reload Captcha</a>
+            <div class="col-md-6 col-md-offset-3">
+                <img class="img-responsive" id="captcha" src="<?php echo Config::get('URL'); ?>login/showCaptcha" />
+                  <!-- quick & dirty captcha reloader -->
+                  <a href="#" onclick="document.getElementById('captcha').src = '<?php echo Config::get('URL'); ?>login/showCaptcha?' + Math.random(); return false">Reload Captcha</a>
+            </div>
+            <div class="form-group">
+                <input class="form-control" type="text" name="captcha" placeholder="Please enter above characters" required />
+            </div>
 
-            <input type="submit" value="Register" />
+            <input class="btn btn-success" type="submit" value="Register" />
         </form>
     </div>
+    <div class="col-md-12">
+        <p>
+            Please note: This captcha will be generated when the img tag requests the captcha-generation
+            (= a real image) from YOURURL/login/showcaptcha. As this is a client-side triggered request, a
+            $_SESSION["captcha"] dump will not show the captcha characters. The captcha generation
+            happens AFTER the request that generates THIS page has been finished.
+        </p>
+    </div>
 </div>
-<div class="container">
-    <p style="display: block; font-size: 11px; color: #999;">
-        Please note: This captcha will be generated when the img tag requests the captcha-generation
-        (= a real image) from YOURURL/login/showcaptcha. As this is a client-side triggered request, a
-        $_SESSION["captcha"] dump will not show the captcha characters. The captcha generation
-        happens AFTER the request that generates THIS page has been finished.
-    </p>
-</div>
+
diff --git a/application/view/login/requestPasswordReset.php b/application/view/login/requestPasswordReset.php
index 7e0541a40..e7cece8a2 100644
--- a/application/view/login/requestPasswordReset.php
+++ b/application/view/login/requestPasswordReset.php
@@ -3,20 +3,17 @@
         <div class="page-header">
             <h1>Request a password reset</h1>
         </div>
-        <div class="box">
+        
+        <!-- echo out the system feedback (error and success messages) -->
+        <?php $this->renderFeedbackMessages(); ?>
 
-            <!-- echo out the system feedback (error and success messages) -->
-            <?php $this->renderFeedbackMessages(); ?>
-
-            <!-- request password reset form box -->
-            <form method="post" action="<?php echo Config::get('URL'); ?>login/requestPasswordReset_action">
-                <label>
-                    Enter your username or email and you'll get a mail with instructions:
-                    <input type="text" name="user_name_or_email" required />
-                </label>
-                <input type="submit" value="Send me a password-reset mail" />
-            </form>
-
-        </div>
+        <!-- request password reset form box -->
+        <form class="form-inline" method="post" action="<?php echo Config::get('URL'); ?>login/requestPasswordReset_action">
+            <div class="form-group">
+                <label for="user_name_or_email">Enter your username or email and you'll get a mail with instructions:</label>
+                <input class="form-control" type="text" id="user_name_or_email" name="user_name_or_email" required />
+            </div>
+            <input class="btn btn-success" type="submit" value="Send me a password-reset mail" />
+        </form>
     </div>
 </div>
diff --git a/application/view/login/resetPassword.php b/application/view/login/resetPassword.php
index 7b19ba4ec..2fdd8bf57 100644
--- a/application/view/login/resetPassword.php
+++ b/application/view/login/resetPassword.php
@@ -3,11 +3,11 @@
         <div class="page-header">
             <h1>LoginController/resetPassword</h1>
         </div>
-
+        
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
-        <div class="box">
+        <div class="col-md-6 col-md-offset-3 well text-center">
             <h2>Set new password</h2>
 
             <p>FYI: ... Idenfitication process works via password-reset-token (hidden input field)</p>
@@ -16,16 +16,19 @@
             <form method="post" action="<?php echo Config::get('URL'); ?>login/setNewPassword" name="new_password_form">
                 <input type='hidden' name='user_name' value='<?php echo $this->user_name; ?>' />
                 <input type='hidden' name='user_password_reset_hash' value='<?php echo $this->user_password_reset_hash; ?>' />
-                <label for="reset_input_password_new">New password (min. 6 characters)</label>
-                <input id="reset_input_password_new" class="reset_input" type="password"
-                       name="user_password_new" pattern=".{6,}" required autocomplete="off" />
-                <label for="reset_input_password_repeat">Repeat new password</label>
-                <input id="reset_input_password_repeat" class="reset_input" type="password"
-                       name="user_password_repeat" pattern=".{6,}" required autocomplete="off" />
-                <input type="submit"  name="submit_new_password" value="Submit new password" />
+                <div class="form-group">
+                    <label for="reset_input_password_new">New password (min. 6 characters)</label>
+                    <input class="form-control" id="reset_input_password_new" class="reset_input" type="password"
+                           name="user_password_new" pattern=".{6,}" required autocomplete="off" />
+                </div>
+                <div class="form-group">
+                    <label for="reset_input_password_repeat">Repeat new password</label>
+                    <input class="form-control" id="reset_input_password_repeat" class="reset_input" type="password"
+                           name="user_password_repeat" pattern=".{6,}" required autocomplete="off" />
+                </div>
+                <input class="btn btn-success" type="submit"  name="submit_new_password" value="Submit new password" />
             </form>
-
-            <a href="<?php echo Config::get('URL'); ?>login/index">Back to Login Page</a>
         </div>
+        <a class="btn btn-primary pull-right" href="<?php echo Config::get('URL'); ?>login/index">Back to Login Page</a>
     </div>
 </div>
diff --git a/application/view/login/showProfile.php b/application/view/login/showProfile.php
index 50bb42067..b1bd91930 100644
--- a/application/view/login/showProfile.php
+++ b/application/view/login/showProfile.php
@@ -3,22 +3,28 @@
         <div class="page-header">
             <h1>LoginController/showProfile</h1>
         </div>
-        <div class="box">
-            <h2>Your profile</h2>
+        
+        <!-- echo out the system feedback (error and success messages) -->
+        <?php $this->renderFeedbackMessages(); ?>
+        
+        <div class="col-md-6 col-md-offset-3">
+             <div class="well well-sm">
+                <div class="row">
+                    <div class="col-sm-6 col-md-4">
+                        <?php if (Config::get('USE_GRAVATAR')) { ?>
+                            <img class="img-responsive" src='<?= $this->user_gravatar_image_url; ?>' />
+                        <?php } else { ?>
+                            <img class="img-responsive" src='<?= $this->user_avatar_file; ?>' />
+                        <?php } ?>
+                    </div>
+                    <div class="col-sm-6 col-md-8">
+                        <h4><?= $this->user_name; ?></h4>
+                        <p><i class="glyphicon glyphicon-envelope"></i> <?= $this->user_email; ?></p>
 
-            <!-- echo out the system feedback (error and success messages) -->
-            <?php $this->renderFeedbackMessages(); ?>
-
-            <div>Your username: <?= $this->user_name; ?></div>
-            <div>Your email: <?= $this->user_email; ?></div>
-            <div>Your avatar image:
-                <?php if (Config::get('USE_GRAVATAR')) { ?>
-                    Your gravatar pic (on gravatar.com): <img src='<?= $this->user_gravatar_image_url; ?>' />
-                <?php } else { ?>
-                    Your avatar pic (saved locally): <img src='<?= $this->user_avatar_file; ?>' />
-                <?php } ?>
+                        <p><span class="label label-success">Account type: <?= $this->user_account_type; ?></p>
+                    </div>
+                </div>
             </div>
-            <div>Your account type is: <?= $this->user_account_type; ?></div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/application/view/login/verify.php b/application/view/login/verify.php
index 6a880c47c..bfe5e815d 100644
--- a/application/view/login/verify.php
+++ b/application/view/login/verify.php
@@ -1,12 +1,10 @@
 <div class="container">
-
-    <h1>Verification</h1>
-    <div class="box">
-
+    <div class="jumbotron">
+        <h1>Verification</h1>
+        
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
-        <a href="<?php echo Config::get('URL'); ?>">Go back to home page</a>
+        <a class="btn btn-success text-center" href="<?php echo Config::get('URL'); ?>">Go back to home page</a>
     </div>
-
 </div>
diff --git a/application/view/note/edit.php b/application/view/note/edit.php
index 1a0b148ff..28a212a72 100644
--- a/application/view/note/edit.php
+++ b/application/view/note/edit.php
@@ -1,23 +1,30 @@
-<div class="col-md-12">
-    <div class="page-header">
-        <h1>NoteController/edit/:note_id</h1>
-    </div>
-    <div class="box">
-        <h2>Edit a note</h2>
+<div class="row">    
+    <div class="col-md-12">
+        <div class="page-header">
+            <h1>NoteController/edit/:note_id</h1>
+        </div>
 
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
-        <?php if ($this->note) { ?>
-            <form method="post" action="<?php echo Config::get('URL'); ?>note/editSave">
-                <label>Change text of note: </label>
-                <!-- we use htmlentities() here to prevent user input with " etc. break the HTML -->
-                <input type="hidden" name="note_id" value="<?php echo htmlentities($this->note->note_id); ?>" />
-                <input type="text" name="note_text" value="<?php echo htmlentities($this->note->note_text); ?>" />
-                <input type="submit" value='Change' />
-            </form>
-        <?php } else { ?>
-            <p>This note does not exist.</p>
-        <?php } ?>
+        <div class="row">
+            <div class="well col-md-6 col-md-offset-3">
+                <h2>Edit a note</h2>
+                <?php if ($this->note) { ?>
+                    <form method="post" action="<?php echo Config::get('URL'); ?>note/editSave">
+
+                        <!-- we use htmlentities() here to prevent user input with " etc. break the HTML -->
+                        <input type="hidden" name="note_id" value="<?php echo htmlentities($this->note->note_id); ?>" />
+                        <div class="form-group">
+                            <label for="note_text">Change text of note: </label>
+                            <input type="text" class="form-control" id="note_text" name="note_text" value="<?php echo htmlentities($this->note->note_text); ?>" />
+                        </div>
+                        <input type="submit" class="btn btn-default" value='Change' />
+                    </form>
+                <?php } else { ?>
+                <p class="text-center">This note does not exist.</p>
+                <?php } ?>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/application/view/note/index.php b/application/view/note/index.php
index 6d0354333..e9eb98ea7 100644
--- a/application/view/note/index.php
+++ b/application/view/note/index.php
@@ -1,25 +1,25 @@
-<div class="container">
-    <div class="page-header">
-        <h1>NoteController/index</h1>
-    </div>
-    <div class="box">
-
+<div class="row">
+    <div class="col-md-12">
+        <div class="page-header">
+            <h1>NoteController/index</h1>
+        </div>
+        
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
         <h3>What happens here ?</h3>
-        <p>
-            This is just a simple CRUD implementation. Creating, reading, updating and deleting things.
-        </p>
-        <p>
-            <form method="post" action="<?php echo Config::get('URL');?>note/create">
-                <label>Text of new note: </label><input type="text" name="note_text" />
-                <input type="submit" value='Create this note' autocomplete="off" />
-            </form>
-        </p>
+        <p>This is just a simple CRUD implementation. Creating, reading, updating and deleting things.</p>
+        
+        <form class="form-inline" method="post" action="<?php echo Config::get('URL');?>note/create">
+            <div class="form-group">
+                <label for="note_text">Text of new note: </label>
+                <input type="text" class="form-control" name="note_text" id="note_text" />
+            </div>
+            <input class="btn btn-default" type="submit" value='Create this note' autocomplete="off" />
+        </form>
 
         <?php if ($this->notes) { ?>
-            <table class="table">
+            <table class="table text-center">
                 <thead>
                 <tr>
                     <td>Id</td>
@@ -33,14 +33,14 @@
                         <tr>
                             <td><?= $value->note_id; ?></td>
                             <td><?= htmlentities($value->note_text); ?></td>
-                            <td><a href="<?= Config::get('URL') . 'note/edit/' . $value->note_id; ?>">Edit</a></td>
-                            <td><a href="<?= Config::get('URL') . 'note/delete/' . $value->note_id; ?>">Delete</a></td>
+                            <td><a class="btn btn-primary" href="<?= Config::get('URL') . 'note/edit/' . $value->note_id; ?>">Edit</a></td>
+                            <td><a class="btn btn-danger" href="<?= Config::get('URL') . 'note/delete/' . $value->note_id; ?>">Delete</a></td>
                         </tr>
                     <?php } ?>
                 </tbody>
             </table>
-            <?php } else { ?>
-                <div>No notes yet. Create some !</div>
-            <?php } ?>
+        <?php } else { ?>
+        <p class="text-center">No notes yet. Create some !</p>
+        <?php } ?>
     </div>
 </div>
diff --git a/application/view/profile/index.php b/application/view/profile/index.php
index 076abe978..fe582e884 100644
--- a/application/view/profile/index.php
+++ b/application/view/profile/index.php
@@ -1,46 +1,44 @@
-<div class="container">
-    <div class="page-header">
-        <h1>ProfileController/index</h1>
-    </div>
-    <div class="box">
-
+<div class="row">
+    <div class="col-md-12">
+        <div class="page-header">
+            <h1>ProfileController/index</h1>
+        </div>
+        
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
         <h3>What happens here ?</h3>
-        <div>
+        <p>
             This controller/action/view shows a list of all users in the system. You could use the underlying code to
             build things that use profile information of one or multiple/all users.
-        </div>
-        <div>
-            <table class="table">
-                <thead>
-                <tr>
-                    <td>Id</td>
-                    <td>Avatar</td>
-                    <td>Username</td>
-                    <td>User's email</td>
-                    <td>Activated ?</td>
-                    <td>Link to user's profile</td>
+        </p>
+        <table class="table text-center">
+            <thead>
+            <tr>
+                <td>Id</td>
+                <td>Avatar</td>
+                <td>Username</td>
+                <td>User's email</td>
+                <td>Activated ?</td>
+                <td>Link to user's profile</td>
+            </tr>
+            </thead>
+            <?php foreach ($this->users as $user) { ?>
+                <tr class="<?= ($user->user_active == 0 ? 'inactive' : 'active'); ?>">
+                    <td><?= $user->user_id; ?></td>
+                    <td class="avatar">
+                        <?php if (isset($user->user_avatar_link)) { ?>
+                        <img class="img-responsive" src="<?= $user->user_avatar_link; ?>" />
+                        <?php } ?>
+                    </td>
+                    <td><?= $user->user_name; ?></td>
+                    <td><?= $user->user_email; ?></td>
+                    <td><?= ($user->user_active == 0 ? 'No' : 'Yes'); ?></td>
+                    <td>
+                        <a class="btn btn-primary" href="<?= Config::get('URL') . 'profile/showProfile/' . $user->user_id; ?>">Profile</a>
+                    </td>
                 </tr>
-                </thead>
-                <?php foreach ($this->users as $user) { ?>
-                    <tr class="<?= ($user->user_active == 0 ? 'inactive' : 'active'); ?>">
-                        <td><?= $user->user_id; ?></td>
-                        <td class="avatar">
-                            <?php if (isset($user->user_avatar_link)) { ?>
-                                <img src="<?= $user->user_avatar_link; ?>" />
-                            <?php } ?>
-                        </td>
-                        <td><?= $user->user_name; ?></td>
-                        <td><?= $user->user_email; ?></td>
-                        <td><?= ($user->user_active == 0 ? 'No' : 'Yes'); ?></td>
-                        <td>
-                            <a href="<?= Config::get('URL') . 'profile/showProfile/' . $user->user_id; ?>">Profile</a>
-                        </td>
-                    </tr>
-                <?php } ?>
-            </table>
-        </div>
+            <?php } ?>
+        </table>
     </div>
 </div>
diff --git a/application/view/profile/showProfile.php b/application/view/profile/showProfile.php
index aab9fca96..f0e3dc0df 100644
--- a/application/view/profile/showProfile.php
+++ b/application/view/profile/showProfile.php
@@ -1,41 +1,40 @@
-<div class="container">
-    <h1>ProfileController/showProfile/:id</h1>
-    <div class="box">
+<div class="row">
+    <div class="col-md-12">
+        <div class="page-header">
+            <h1>ProfileController/showProfile/:id</h1>
+        </div>        
 
         <!-- echo out the system feedback (error and success messages) -->
         <?php $this->renderFeedbackMessages(); ?>
 
         <h3>What happens here ?</h3>
-        <div>This controller/action/view shows all public information about a certain user.</div>
+        <p>This controller/action/view shows all public information about a certain user.</p>
 
         <?php if ($this->user) { ?>
-            <div>
-                <table class="table">
-                    <thead>
-                    <tr>
-                        <td>Id</td>
-                        <td>Avatar</td>
-                        <td>Username</td>
-                        <td>User's email</td>
-                        <td>Activated ?</td>
+            <table class="table text-center">
+                <thead>
+                <tr>
+                    <td>Id</td>
+                    <td>Avatar</td>
+                    <td>Username</td>
+                    <td>User's email</td>
+                    <td>Activated ?</td>
+                </tr>
+                </thead>
+                <tbody>
+                    <tr class="<?= ($this->user->user_active == 0 ? 'inactive' : 'active'); ?>">
+                        <td><?= $this->user->user_id; ?></td>
+                        <td class="avatar">
+                            <?php if (isset($this->user->user_avatar_link)) { ?>
+                                <img class="img-responsive" src="<?= $this->user->user_avatar_link; ?>" />
+                            <?php } ?>
+                        </td>
+                        <td><?= $this->user->user_name; ?></td>
+                        <td><?= $this->user->user_email; ?></td>
+                        <td><?= ($this->user->user_active == 0 ? 'No' : 'Yes'); ?></td>
                     </tr>
-                    </thead>
-                    <tbody>
-                        <tr class="<?= ($this->user->user_active == 0 ? 'inactive' : 'active'); ?>">
-                            <td><?= $this->user->user_id; ?></td>
-                            <td class="avatar">
-                                <?php if (isset($this->user->user_avatar_link)) { ?>
-                                    <img src="<?= $this->user->user_avatar_link; ?>" />
-                                <?php } ?>
-                            </td>
-                            <td><?= $this->user->user_name; ?></td>
-                            <td><?= $this->user->user_email; ?></td>
-                            <td><?= ($this->user->user_active == 0 ? 'No' : 'Yes'); ?></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+                </tbody>
+            </table>
         <?php } ?>
-
     </div>
 </div>