diff --git a/public/css/bootstrap-custom.css b/public/css/bootstrap-custom.css
index 5ad874476..934894f94 100644
--- a/public/css/bootstrap-custom.css
+++ b/public/css/bootstrap-custom.css
@@ -6,7 +6,7 @@
 }
 
 .container-narrow {
-    width: 800px;
+    max-width: 800px;
 }
 
 .panel-heading-buttons h3 {
@@ -36,3 +36,257 @@ label.label-switch {
 form textarea {
   resize: vertical; /* user can resize vertically, but width is fixed */
 }
+
+/* Utilities from Bootstrap 4 alpha 2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css */
+
+.img-fluid { 
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.m-a-0 {
+  margin: 0 0 !important;
+}
+
+.m-t-0 {
+  margin-top: 0 !important;
+}
+
+.m-r-0 {
+  margin-right: 0 !important;
+}
+
+.m-b-0 {
+  margin-bottom: 0 !important;
+}
+
+.m-l-0 {
+  margin-left: 0 !important;
+}
+
+.m-x-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.m-y-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.m-a-1 {
+  margin: 1rem 1rem !important;
+}
+
+.m-t-1 {
+  margin-top: 1rem !important;
+}
+
+.m-r-1 {
+  margin-right: 1rem !important;
+}
+
+.m-b-1 {
+  margin-bottom: 1rem !important;
+}
+
+.m-l-1 {
+  margin-left: 1rem !important;
+}
+
+.m-x-1 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.m-y-1 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.m-a-2 {
+  margin: 1.5rem 1.5rem !important;
+}
+
+.m-t-2 {
+  margin-top: 1.5rem !important;
+}
+
+.m-r-2 {
+  margin-right: 1.5rem !important;
+}
+
+.m-b-2 {
+  margin-bottom: 1.5rem !important;
+}
+
+.m-l-2 {
+  margin-left: 1.5rem !important;
+}
+
+.m-x-2 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
+}
+
+.m-y-2 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.m-a-3 {
+  margin: 3rem 3rem !important;
+}
+
+.m-t-3 {
+  margin-top: 3rem !important;
+}
+
+.m-r-3 {
+  margin-right: 3rem !important;
+}
+
+.m-b-3 {
+  margin-bottom: 3rem !important;
+}
+
+.m-l-3 {
+  margin-left: 3rem !important;
+}
+
+.m-x-3 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
+}
+
+.m-y-3 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.p-a-0 {
+  padding: 0 0 !important;
+}
+
+.p-t-0 {
+  padding-top: 0 !important;
+}
+
+.p-r-0 {
+  padding-right: 0 !important;
+}
+
+.p-b-0 {
+  padding-bottom: 0 !important;
+}
+
+.p-l-0 {
+  padding-left: 0 !important;
+}
+
+.p-x-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.p-y-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.p-a-1 {
+  padding: 1rem 1rem !important;
+}
+
+.p-t-1 {
+  padding-top: 1rem !important;
+}
+
+.p-r-1 {
+  padding-right: 1rem !important;
+}
+
+.p-b-1 {
+  padding-bottom: 1rem !important;
+}
+
+.p-l-1 {
+  padding-left: 1rem !important;
+}
+
+.p-x-1 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+}
+
+.p-y-1 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.p-a-2 {
+  padding: 1.5rem 1.5rem !important;
+}
+
+.p-t-2 {
+  padding-top: 1.5rem !important;
+}
+
+.p-r-2 {
+  padding-right: 1.5rem !important;
+}
+
+.p-b-2 {
+  padding-bottom: 1.5rem !important;
+}
+
+.p-l-2 {
+  padding-left: 1.5rem !important;
+}
+
+.p-x-2 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
+}
+
+.p-y-2 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.p-a-3 {
+  padding: 3rem 3rem !important;
+}
+
+.p-t-3 {
+  padding-top: 3rem !important;
+}
+
+.p-r-3 {
+  padding-right: 3rem !important;
+}
+
+.p-b-3 {
+  padding-bottom: 3rem !important;
+}
+
+.p-l-3 {
+  padding-left: 3rem !important;
+}
+
+.p-x-3 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
+}
+
+.p-y-3 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
diff --git a/userfrosting/initialize.php b/userfrosting/initialize.php
index 32539a24b..48d4ae2f8 100644
--- a/userfrosting/initialize.php
+++ b/userfrosting/initialize.php
@@ -11,6 +11,7 @@
 
 // This if-block just checks that config-userfrosting.php exists
 if (!file_exists(__DIR__ . "/config-userfrosting.php")){
+	http_response_code(503);
     echo "<h2>We can't seem to find config-userfrosting.php!  You should rename the file config-userfrosting-example.php to config-userfrosting.php, and then fill in the configuration details for your database and server.  For more information, please see the <a href='http://www.userfrosting.com/installation/#install-userfrosting'>installation instructions</a>.</h2><br>";
     exit;
 }
diff --git a/userfrosting/templates/themes/default/config/site-settings.twig b/userfrosting/templates/themes/default/config/site-settings.twig
index dc3eb4065..2fd605ced 100644
--- a/userfrosting/templates/themes/default/config/site-settings.twig
+++ b/userfrosting/templates/themes/default/config/site-settings.twig
@@ -25,10 +25,10 @@
                 {% for plugin_name, plugin in settings %}
                     {% for name, setting in plugin %} 
                         <div class="form-group">
-                            <label for="input_{{name}}" class="col-sm-2 control-label">{{setting.label}}</label>
-                            <div class="col-sm-10">
+                            <label for="input_{{name}}" class="col-xs-4 col-sm-3 col-lg-2 control-label">{{setting.label}}</label>
+                            <div class="col-xs-8 col-sm-9 col-lg-10">
                                 {% if (setting.type == 'text') %}
-                                    <input type='text' id="input_{{name}}" class="form-control" name="{{plugin_name}}[{{name}}]" value='{{setting.value}}' style="width: 50%;"/>
+                                    <input type='text' id="input_{{name}}" class="form-control" name="{{plugin_name}}[{{name}}]" value='{{setting.value}}'>
                                 {% elseif (setting.type == 'select') %}
                                     <select id="input_{{name}}" class='form-control select2' name="{{plugin_name}}[{{name}}]">
                                         {% for option, label in setting.options %}
@@ -56,10 +56,8 @@
                 </div>
                 <div class='panel-body'>
                     {% for name, value in info %}
-                        <p class="h6">{{name}}</p>                  
-                        <div class="well well-sm">
-                            {{value}}
-                        </div>
+                        <p class="h6">{{name}}</p>
+                            <pre><code>{{value}}</code></pre>
                     {% endfor %}
                 </div>
                 <div class="panel-footer">
diff --git a/userfrosting/templates/themes/default/errors/database.twig b/userfrosting/templates/themes/default/errors/database.twig
index 6afedbd6d..1da2b7176 100644
--- a/userfrosting/templates/themes/default/errors/database.twig
+++ b/userfrosting/templates/themes/default/errors/database.twig
@@ -13,7 +13,7 @@
 {% block content %}
     <div class="container text-center">
         <h1>We can't seem to connect to the database.</h1>
-        <img src="{{site.uri.image}}/database.png">
+        <img class="img-fluid" src="{{site.uri.image}}/database.png">
         <br><br>
         <p class="lead">Have you tried hacking into the mainframe?  Seriously though, check your PHP error log to figure out what's up.  You probably just need to enter your database credentials in <code>userfrosting/config-userfrosting.php</code>.  If you are sure that your credentials are fine, try simply reloading the page.</p>
     </div> <!-- /container -->
diff --git a/userfrosting/templates/themes/default/install/install-errors.twig b/userfrosting/templates/themes/default/install/install-errors.twig
index 50c40449a..73e503beb 100644
--- a/userfrosting/templates/themes/default/install/install-errors.twig
+++ b/userfrosting/templates/themes/default/install/install-errors.twig
@@ -2,24 +2,24 @@
 
 {# Set page properties (page.*) here. #}
 {% block page %}
-    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template, 
-    but BEFORE the page itself is rendered. #}    
+    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template,
+    but BEFORE the page itself is rendered. #}
     {% set page = page | merge({
         "title"       : "Installation Error",
         "description" : "Installation page for UserFrosting"
     }) %}
     {{ parent() }}
 {% endblock %}
-                
+
 {% block content %}
     <div class="container">
         <h1 class = "text-center">Something's not right here.</h1>
         <br>
         <div class="row">
-            <div class="col-lg-6">
-                <img src="{{site.uri.image}}/stuck.jpg">
+            <div  class="col-xs-12 col-sm-4 col-md-6" >
+                <img class="img-fluid" src="{{site.uri.image}}/stuck.jpg">
             </div>
-            <div class="col-lg-6">
+            <div class="col-xs-12 col-sm-8 col-md-6">
                 <p class="h3 text-center">Please fix the following errors, then <a href="{{site.uri.public}}/install">reload</a>.</p>
                 {% for message in messages %}
                     <div class="list-group">
diff --git a/userfrosting/templates/themes/default/install/install-master.twig b/userfrosting/templates/themes/default/install/install-master.twig
index ba94f2334..500ce1175 100644
--- a/userfrosting/templates/themes/default/install/install-master.twig
+++ b/userfrosting/templates/themes/default/install/install-master.twig
@@ -2,8 +2,8 @@
 
 {# Set page properties (page.*) here. #}
 {% block page %}
-    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template, 
-    but BEFORE the page itself is rendered. #}    
+    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template,
+    but BEFORE the page itself is rendered. #}
     {% set page = page | merge({
         "title"       : "Installation | Register Master Account",
         "description" : "Set up the master account for your installation of UserFrosting"
@@ -21,7 +21,7 @@
         </div>
         <form name="register" method="post" action="{{site.uri.public}}/install/master" class="form-horizontal">
             <div class="row">
-                <div class="col-sm-12">
+                <div class="col-xs-12">
                     <div class="form-group">
                         <label class="control-label  col-sm-4">Username</label>
                         <div class="col-sm-8">
@@ -34,7 +34,7 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-sm-12">
+                <div class="col-xs-12">
                     <div class="form-group">
                         <label class="control-label col-sm-4">Display Name</label>
                         <div class="col-sm-8">
@@ -47,7 +47,7 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-sm-12">
+                <div class="col-xs-12">
                     <div class="form-group">
                         <label class="control-label col-sm-4">Email</label>
                         <div class="col-sm-8">
@@ -58,9 +58,9 @@
                         </div>
                     </div>
                 </div>
-            </div>		  
+            </div>
             <div class="row">
-                <div class="col-sm-12">
+                <div class="col-xs-12">
                     <div class="form-group">
                         <label class="control-label col-sm-4">Password</label>
                         <div class="col-sm-8">
@@ -73,7 +73,7 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-sm-12">
+                <div class="col-xs-12">
                     <div class="form-group">
                         <label class="control-label col-sm-4">Confirm password</label>
                         <div class="col-sm-8">
@@ -86,7 +86,7 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-sm-12">
+                <div class="col-xs-12">
                     <div class="form-group">
                         <label class="control-label col-sm-4">Configuration Token</label>
                         <div class="col-sm-8">
@@ -104,15 +104,15 @@
             <div class="collapse">
               <label>Spiderbro: Don't change me bro, I'm tryin'a catch some flies!</label>
               <input name="spiderbro" id="spiderbro" value="http://"/>
-            </div>          
+            </div>
         </form>
-      </div>	
+      </div>
     </div> <!-- /container -->
 {% endblock %}
 {% block page_scripts %}
     <script>
-        $(document).ready(function() {           
-            // Process form 
+        $(document).ready(function() {
+            // Process form
             ufFormSubmit(
                 $("form[name='register']"),
                 {{ validators | raw }},
@@ -122,6 +122,6 @@
                     window.location.replace(site['uri']['public'] + "/account/login");
                 }
             );
-        });     
+        });
     </script>
 {% endblock %}
diff --git a/userfrosting/templates/themes/default/install/install-ready.twig b/userfrosting/templates/themes/default/install/install-ready.twig
index 8477766b3..8321ecc11 100644
--- a/userfrosting/templates/themes/default/install/install-ready.twig
+++ b/userfrosting/templates/themes/default/install/install-ready.twig
@@ -2,8 +2,8 @@
 
 {# Set page properties (page.*) here. #}
 {% block page %}
-    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template, 
-    but BEFORE the page itself is rendered. #}    
+    {# By putting this in a special block, we ensure that it will be set AFTER the default values are set in the parent template,
+    but BEFORE the page itself is rendered. #}
     {% set page = page | merge({
         "title"       : "Installation",
         "description" : "Installation page for UserFrosting"
@@ -15,10 +15,10 @@
         <h1 class = "text-center">Congratulations.<br><small>UserFrosting is ready to rock.</small></h1>
         <br>
         <div class="row">
-            <div class="col-lg-6">
-                <img src="{{site.uri.image}}/install-ready.jpg">
+            <div  class="col-xs-12 col-sm-4 col-lg-6" >
+                <img class="img-fluid m-b-1" src="{{site.uri.image}}/install-ready.jpg">
             </div>
-            <div class="col-lg-6">
+            <div class="col-xs-12 col-sm-8 col-lg-6">
                 {% for message in messages %}
                     <div class="list-group">
                       <div class="list-group-item list-group-item-{{message.class}}">