diff --git a/frappe/hooks.py b/frappe/hooks.py
index 19503a1b2a..67ab997661 100644
--- a/frappe/hooks.py
+++ b/frappe/hooks.py
@@ -48,7 +48,7 @@ web_include_js = [
 ]
 
 web_include_css = [
-	"assets/css/bootstrap-4-web.css"
+	"assets/css/frappe-web-b4.css"
 ]
 
 website_route_rules = [
diff --git a/frappe/public/build.json b/frappe/public/build.json
index 26c4519b34..1d786ced7c 100755
--- a/frappe/public/build.json
+++ b/frappe/public/build.json
@@ -10,10 +10,11 @@
 		"public/less/chat.less",
 		"public/less/form_grid.less",
 		"node_modules/frappe-datatable/dist/frappe-datatable.css"
-	],
-	"css/bootstrap-4-web.css": [
-		"public/scss/bootstrap-4.scss"
-	],
+    ],
+    "css/frappe-web-b4.css": [
+        "public/scss/website.scss",
+        "public/less/indicator.less"
+    ],
 	"concat:js/moment-bundle.min.js": [
 		"node_modules/moment/min/moment-with-locales.min.js",
 		"node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"
diff --git a/frappe/public/less/indicator.less b/frappe/public/less/indicator.less
index 3388a3a7e6..c703f42d83 100644
--- a/frappe/public/less/indicator.less
+++ b/frappe/public/less/indicator.less
@@ -3,7 +3,6 @@
 .indicator,
 .indicator-right {
     background:none;
-    font-size:12px;
     vertical-align:middle;
     font-weight:bold;
     color:#6c7680;
diff --git a/frappe/public/scss/bootstrap-4.scss b/frappe/public/scss/website.scss
similarity index 70%
rename from frappe/public/scss/bootstrap-4.scss
rename to frappe/public/scss/website.scss
index 96d94a1176..9b519ef1c3 100644
--- a/frappe/public/scss/bootstrap-4.scss
+++ b/frappe/public/scss/website.scss
@@ -44,7 +44,10 @@ body {
 }
 
 .breadcrumb {
-	font-size: 0.75rem;
+    font-size: 0.75rem;
+    padding-left: 0;
+    padding-right: 0;
+    background-color: white;
 }
 
 a.card {
@@ -59,32 +62,6 @@ img {
 	@extend .d-none;
 }
 
-.video-background {
-	width: 100vw;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: -1;
-
-	&-overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		width: 100%;
-		height: 100%;
-		background-color: var(--dark);
-		opacity: 0.4;
-	}
-}
-
-.hero-section {
-	background-image: url("/assets/rigpl_theme/images/hero-image.jpg");
-	background-size: cover;
-	background-position-y: 15%;
-	background-position-y: 27%;
-}
-
 .btn-primary {
 	color: $white;
 }
@@ -93,6 +70,16 @@ img {
 	text-decoration: underline;
 }
 
+.web-footer {
+	padding: 5rem 0;
+	min-height: 140px;
+	border-top: 1px solid $border-color;
+}
+
+.no-underline {
+    text-decoration: none !important;
+}
+
 // .standard-image {
 // 	width: 100%;
 // 	height: 0;
diff --git a/frappe/templates/autodoc/macros.html b/frappe/templates/autodoc/macros.html
index e77f83fb58..4e7c34be16 100644
--- a/frappe/templates/autodoc/macros.html
+++ b/frappe/templates/autodoc/macros.html
@@ -47,12 +47,12 @@
 {%- endmacro %}
 
 {% macro version(name) %}
-<a class="btn btn-default btn-sm" disabled style="margin-bottom: 10px;">
+<a class="btn btn-light btn-sm" disabled style="margin-bottom: 10px;">
 	Version {{ autodoc.get_version(name) }}</a>
 {% endmacro %}
 
 {% macro source_link(app, file_path, tree=False) %}
-	<a class="btn btn-default btn-sm" href="{{ app.source_link }}/{{ "tree" if tree else "blob" }}/{{ app.branch }}/{{ file_path }}"
+	<a class="btn btn-light btn-sm" href="{{ app.source_link }}/{{ "tree" if tree else "blob" }}/{{ app.branch }}/{{ file_path }}"
 		target="_blank" style="margin-left: 10px; margin-bottom: 10px;"><i class="octicon octicon-mark-github"></i> Source</a>
 {% endmacro %}
 
diff --git a/frappe/templates/includes/blog/blogger.html b/frappe/templates/includes/blog/blogger.html
index 20da365e16..71abcdf89f 100644
--- a/frappe/templates/includes/blog/blogger.html
+++ b/frappe/templates/includes/blog/blogger.html
@@ -1,13 +1,13 @@
-<div class="blogger">
-	<div class="inline-block" style="vertical-align: top">
-		<div class="avatar avatar-large">
-			<img itemprop="thumbnailUrl" src="{{ blogger_info.avatar or "/assets/frappe/images/default-avatar.png" }}" />
-		</div>
+{% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
+
+<div class="media">
+	{{ square_image_with_fallback(src=blogger_info.avatar, size='72px', alt=blogger_info.full_name, class='align-self-start mr-3') }}
+	<div class="media-body">
+		<h5 class="mt-0">
+			<a href="/blog?blogger={{ blogger_info.name }}" class="text-dark">{{ blogger_info.full_name }}</a>
+		</h5>
+		{% if blogger_info.bio %}
+		<p class="text-muted">{{ blogger_info.bio }}</p>
+		{% endif %}
 	</div>
-	<div class="inline-block" style="width: calc(100% - 100px)">
-		<h3 class="blogger-name text-muted">
-			<a href="/blog?blogger={{ blogger_info.name }}">{{ blogger_info.full_name }}</a>
-		</h3>
-		<p class="text-muted">{%if blogger_info.bio %}{{ blogger_info.bio }}{% endif %}</p>
-	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frappe/templates/includes/comments/comment.html b/frappe/templates/includes/comments/comment.html
index e0f923b2e0..6872c72625 100644
--- a/frappe/templates/includes/comments/comment.html
+++ b/frappe/templates/includes/comments/comment.html
@@ -1,15 +1,18 @@
-<div class="comment-row">
-	<div class="inline-block" style="vertical-align: top">
-		<div class="avatar avatar-medium" style="margin-top: 11px;">
-			<img itemprop="thumbnailUrl" src="{{ frappe.get_gravatar(comment.sender) }}" />
-		</div>
+{% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
+
+<div class="comment-row media">
+	{{ square_image_with_fallback(src=frappe.get_gravatar(comment.sender), size='48px', alt=comment.sender_full_name, class='align-self-start mr-3') }}
+	<div class="media-body">
+        <div class="d-flex justify-content-between align-items-start">
+            <span class="font-weight-bold text-muted">
+                {{ comment.sender_full_name }}
+            </span>
+            <span class="text-muted small">
+                {{ comment.creation | global_date_format }}
+            </span>
+        </div>
+		<div class="text-muted">
+            {{ comment.content | markdown }}
+        </div>
 	</div>
-	<div class="inline-block" style="width: calc(100% - 50px)">
-		<h6 itemprop="name">{{ comment.sender_full_name }}
-			<span class="text-muted pull-right" itemprop="commentTime">
-				{{ comment.creation|global_date_format }}
-			</span>
-		</h6>
-		<div itemprop="commentText">{{ comment.content|markdown }}</div>
-	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frappe/templates/includes/comments/comments.html b/frappe/templates/includes/comments/comments.html
index bde4972c5b..f521ec5f36 100644
--- a/frappe/templates/includes/comments/comments.html
+++ b/frappe/templates/includes/comments/comments.html
@@ -1,6 +1,6 @@
-<div class="comment-view">
+<div class="comment-view mb-4">
 	{% if comment_text %}
-	<div class="comment-header">{{ comment_text }}</div>
+	<div class="comment-header mb-4">{{ comment_text }}</div>
 	{% endif %}
 	{% if not comment_list %}
 	<div class="no-comment">
@@ -9,8 +9,10 @@
 	{% endif %}
 
 	<div itemscope itemtype="http://schema.org/UserComments" id="comment-list">
-		{% for comment in comment_list %}
-		{% include "templates/includes/comments/comment.html" %}
+        {% for comment in comment_list %}
+        <div class="my-3">
+            {% include "templates/includes/comments/comment.html" %}
+        </div>
 		{% endfor %}
 	</div>
 </div>
@@ -22,13 +24,13 @@
 	</div>
 
 	<div class="comment-form-wrapper">
-		<a class="add-comment btn btn-default btn-xs">{{ _("Add Comment") }}</a>
+		<a class="add-comment btn btn-light btn-xs">{{ _("Add Comment") }}</a>
 			<div style="display: none;" id="comment-form">
 			<p>{{ _("Leave a Comment") }}</p>
 			<div class="alert" style="display:none;"></div>
 			<form>
 				<fieldset>
-					<div class="row {% if _login_required %}hide{% endif %}"
+					<div class="row {% if _login_required %} hidden {% endif %}"
 						style="margin-bottom: 15px;">
 						<div class="col-sm-6">
 							<input class="form-control" name="comment_by_fullname"
@@ -93,12 +95,12 @@
 			}
 
 			if(!args.comment_by_fullname || !args.comment_by || !args.comment) {
-				frappe.msgprint("{{ _("All fields are necessary to submit the comment.") }}");
+				frappe.msgprint(__("All fields are necessary to submit the comment."));
 				return false;
 			}
 
 			if (args.comment_by!=='Administrator' && !validate_email(args.comment_by)) {
-				frappe.msgprint("{{ _("Please enter a valid email address.") }}");
+				frappe.msgprint(__("Please enter a valid email address."));
 				return false;
 			}
 
@@ -116,7 +118,7 @@
 						$(".no-comment, .add-comment").toggle(false);
 						$("#comment-form").toggle();
 					}
-					$(".add-comment").text('{{ _("Add Another Comment") }}');
+					$(".add-comment").text(__("Add Another Comment"));
 					$(".add-comment").toggle();
 				}
 			})
diff --git a/frappe/templates/includes/footer/footer.html b/frappe/templates/includes/footer/footer.html
index 30c7d4570e..400575148f 100644
--- a/frappe/templates/includes/footer/footer.html
+++ b/frappe/templates/includes/footer/footer.html
@@ -16,8 +16,8 @@
 					{% endblock %}
 				</div>
 			</div>
-			<div class="row footer-bottom-line">
-				<div class="text-muted small col-sm-6 col-xs-12">
+			<div class="row footer-bottom-line mt-5">
+				<div class="text-muted small col-sm-6 col-12">
 					{% if copyright %}
 						&copy; {{ copyright }}
 					{% endif %}
@@ -27,7 +27,7 @@
 					{% endif %}
 				</div>
 				{# powered #}
-				<div class="text-muted small col-sm-6 col-xs-12
+				<div class="text-muted small col-sm-6 col-12
 					text-right footer-powered">
 					{% block powered %}
 						{% include "templates/includes/footer/footer_powered.html" %}
diff --git a/frappe/templates/includes/footer/footer_items.html b/frappe/templates/includes/footer/footer_items.html
index 2d4cfd7dd9..409d702d4d 100644
--- a/frappe/templates/includes/footer/footer_items.html
+++ b/frappe/templates/includes/footer/footer_items.html
@@ -1,27 +1,28 @@
 {% for page in footer_items %}
-<div class="col-sm-4 footer-group">
-	{% if not page.parent_label -%}
-		<div data-label='{{ page.label }}'>
-		<a {% if not page.child_items -%} href="{{ (page.url or '')|abs_url }}" {%- endif %}
-		{% if page.child_items %} onclick="return false;" {% endif %}
-		{{ page.target or ''}}>
-		{%- if page.child_items -%}
-			<span class="footer-group-label footer-parent-item text-muted">{{ page.label }}<span>
-			</a>
-			<ul class="list-unstyled small">
-			{%- for child in page.child_items -%}
-				<li class="footer-child-item" data-label='{{ child.label }}'>
-					<a href="{{ child.url | abs_url }}"
-						{% if child.target %}target="_blank"{% endif %}>{{ child.label }}</a>
-				</li>
-			{%- endfor -%}
-			</ul>
-		{%- else -%}
-		<span class="footer-group-label small text-muted">{{ page.label }}<span>
-		</a>
-		{%- endif -%}
-		</div>
-	{%- endif -%}
-	</div>
+{% if not page.parent_label %}
+    <div class="col footer-group">
+        {% if not page.parent_label -%}
+            <div data-label='{{ page.label }}'>
+            <a {% if not page.child_items -%} href="{{ (page.url or '')|abs_url }}" {%- endif %}
+            {% if page.child_items %} onclick="return false;" {% endif %}
+            {{ page.target or ''}}>
+            {%- if page.child_items -%}
+                <div class="footer-group-label footer-parent-item text-muted mb-3">{{ page.label }}</div>
+                </a>
+                <ul class="list-unstyled">
+                {%- for child in page.child_items -%}
+                    <li class="footer-child-item mt-2" data-label='{{ child.label }}'>
+                        <a href="{{ child.url | abs_url }}"
+                            {% if child.target %}target="_blank"{% endif %}>{{ child.label }}</a>
+                    </li>
+                {%- endfor -%}
+                </ul>
+            {%- else -%}
+            <div class="footer-group-label text-muted">{{ page.label }}<div>
+            </a>
+            {%- endif -%}
+            </div>
+        {%- endif -%}
+        </div>
+    {% endif %}
 {% endfor %}
-
diff --git a/frappe/templates/includes/footer/footer_powered.html b/frappe/templates/includes/footer/footer_powered.html
index 767c8ab161..8d4e6e0b16 100644
--- a/frappe/templates/includes/footer/footer_powered.html
+++ b/frappe/templates/includes/footer/footer_powered.html
@@ -1 +1 @@
-<a href="https://frappe.io" style="color: #aaa">Built on Frappe</a>
\ No newline at end of file
+<a href="https://frappe.io?source=website_footer" target="_blank" class="text-muted">Built on Frappe</a>
\ No newline at end of file
diff --git a/frappe/templates/includes/list/filters.html b/frappe/templates/includes/list/filters.html
index 4c45440d24..8c364327d1 100644
--- a/frappe/templates/includes/list/filters.html
+++ b/frappe/templates/includes/list/filters.html
@@ -1,12 +1,12 @@
 <div class="website-list-filters">
 	<div class="row">
-		<div class="col-xs-6">
+		<div class="col-6">
 			<form class="form-inline form-search" action="/{{ pathname }}">
 				<div class="input-group">
 					<input class="form-control" doctype="text" name="txt"
 						placeholder="Search..." value="{{ txt or '' }}">
 					<span class="input-group-btn">
-						<button class="btn btn-default" type="submit">
+						<button class="btn btn-light" type="submit">
 							<i class="fa fa-search"></i></button>
 					</span>
 				</div>
diff --git a/frappe/templates/includes/list/list.html b/frappe/templates/includes/list/list.html
index 70e7cb25d1..ccab53165e 100644
--- a/frappe/templates/includes/list/list.html
+++ b/frappe/templates/includes/list/list.html
@@ -2,25 +2,24 @@
 <h4 class="text-muted">{{ sub_title }}</h4>
 {% endif %}
 {% if not result -%}
-    <div class="text-muted no-results" style="min-height: 300px;">
-				<i class="mega-octicon octicon-telescope"></i>
-    		{{ no_result_message or _("Nothing to show") }}
-    </div>
+	<div class="text-muted" style="min-height: 300px;">
+		{{ no_result_message or _("Nothing to show") }}
+	</div>
 {% else %}
-    <div class="website-list" data-doctype="{{ doctype }}"
-        data-txt="{{ txt or '[notxt]' }}">
-        <!-- {% if not hide_filters -%}
-            {% include "templates/includes/list/filters.html" %}
-        {%- endif %} -->
+	<div class="website-list" data-doctype="{{ doctype }}"
+		data-txt="{{ txt or '[notxt]' }}">
+		<!-- {% if not hide_filters -%}
+			{% include "templates/includes/list/filters.html" %}
+		{%- endif %} -->
 		{% if result_heading_template %}{% include result_heading_template %}{% endif %}
 
-    	<div class="result">
-    		{% for item in result %}
-    			{{ item }}
-    		{% endfor %}
-    	</div>
-    	<div class="more-block {% if not show_more -%} hide {%- endif %}">
-    		<button class="btn btn-default btn-more btn-sm">{{ _("More") }}</button>
-    	</div>
-    </div>
+		<div class="result">
+			{% for item in result %}
+				{{ item }}
+			{% endfor %}
+		</div>
+		<div class="more-block {% if not show_more -%} hidden {%- endif %}">
+			<button class="btn btn-light btn-more btn-sm">{{ _("More") }}</button>
+		</div>
+	</div>
 {%- endif %}
diff --git a/frappe/templates/includes/list/row_template.html b/frappe/templates/includes/list/row_template.html
index fd21a62125..baeb4af807 100644
--- a/frappe/templates/includes/list/row_template.html
+++ b/frappe/templates/includes/list/row_template.html
@@ -1,7 +1,7 @@
 <div class="web-list-item">
-    <a class="no-decoration" href="/{{ route }}">
+    <a class="no-underline text-reset" href="/{{ route }}">
 		{% if list_view_fields %}
-			<div class='row'>
+			<div class="row">
 				{% for df in list_view_fields %}
 				<div class='col-sm-{{ (12/(list_view_fields|len))|int }}'>
 					{{ doc.get(df.fieldname) }}
diff --git a/frappe/templates/includes/macros.html b/frappe/templates/includes/macros.html
new file mode 100644
index 0000000000..f8605b4372
--- /dev/null
+++ b/frappe/templates/includes/macros.html
@@ -0,0 +1,19 @@
+{% macro square_image_with_fallback(src=None, size=None, alt=None, class="") %}
+{% if src %}
+<img
+	{% if size %}
+	width="{{size}}"
+	height="{{size}}"
+	{% endif %}
+
+	{% if src %}
+	src="{{ src }}"
+	{% endif %}
+
+	class="{{ class }} "
+	alt="{{ alt or '' }}"
+>
+{% else %}
+<div class="no-image bg-light {{ class }} " {% if size %}style="width: {{size}}; height: {{size}};"{% endif %}></div>
+{% endif %}
+{% endmacro %}
diff --git a/frappe/templates/includes/oauth_confirmation.html b/frappe/templates/includes/oauth_confirmation.html
index 3b0868e34d..73425af036 100644
--- a/frappe/templates/includes/oauth_confirmation.html
+++ b/frappe/templates/includes/oauth_confirmation.html
@@ -14,7 +14,7 @@
         <button id="allow" class="btn btn-sm btn-primary">Allow</button>
       </li>
       <li>
-        <button id="deny" class="btn btn-sm btn-default">Deny</button>
+        <button id="deny" class="btn btn-sm btn-light">Deny</button>
       </li>
     </ul>
   </div>
@@ -39,7 +39,7 @@
     <h4>{{ error }}</h4>
     <ul class="list-inline">
       <li>
-        <button class="btn btn-sm btn-default">OK</button>
+        <button class="btn btn-sm btn-light">OK</button>
       </li>
     </ul>
   </div>
diff --git a/frappe/templates/includes/search_template.html b/frappe/templates/includes/search_template.html
index 2ad6aa91bf..cc3d97c69a 100644
--- a/frappe/templates/includes/search_template.html
+++ b/frappe/templates/includes/search_template.html
@@ -13,7 +13,7 @@
 		</div>
 		{% endfor %}
 		{% if has_more %}
-		<button class='btn btn-default btn-sm btn-more'>{{ _("More") }}</button>
+		<button class='btn btn-light btn-sm btn-more'>{{ _("More") }}</button>
 		{% endif %}
 		<hr>
 	</div>
diff --git a/frappe/templates/includes/web_sidebar.html b/frappe/templates/includes/web_sidebar.html
index d74459b88d..9f1bbb8645 100644
--- a/frappe/templates/includes/web_sidebar.html
+++ b/frappe/templates/includes/web_sidebar.html
@@ -1,19 +1,5 @@
 <div class="web-sidebar">
-	<!-- <div class="your-account-info-sidebar">
-		<div class="row">
-			<div class="col-xs-2">
-				<span class="user-image-sidebar"></span>
-			</div>
-			<div class="col-xs-10">
-				<div class="web-sidebar-user">{{ fullname }}</div>
-				<a href="/?cmd=web_logout">
-					<div class="text-muted small">
-						{{ _("Logout") }}</div>
-				</a>
-			</div>
-		</div>
-	</div> -->
-	<div class="sidebar-items">
+	<div class="sidebar-items small">
 		<ul class="list-unstyled">
 			{% if sidebar_title %}
 			<li class="title">
@@ -21,14 +7,14 @@
 			</li>
 			{% endif %}
 			{% for item in sidebar_items -%}
-			<li class="sidebar-item">
+			<li class="sidebar-item my-2">
 				{% if item.type != 'input' %}
-					<a href="{{ item.route }}" class="gray {{ 'active' if pathname==item.route else '' }}"
+					<a href="{{ item.route }}" class="{{ 'text-dark' if pathname==item.route else 'text-muted' }}"
 						{% if item.target %}target="{{ item.target }}"{% endif %}>
 						{{ _(item.title or item.label) }}
 					</a>
 				{% else %}
-					<form action='{{ item.route }}' style="margin-right: 15px;">
+					<form action='{{ item.route }}' class="mr-3">
 						<input name='q' class='form-control' type='text' style="outline: none"
 							placeholder="{{ _(item.title or item.label) }}">
 					</form>
@@ -37,7 +23,7 @@
 			{%- endfor %}
 			{% if frappe.user != 'Guest' %}
 			<li class="sidebar-item">
-				<a href="/me">{{ _("My Account") }}</a>
+				<a href="/me" class="text-muted">{{ _("My Account") }}</a>
 			</li>
 			{% endif %}
 		</ul>
@@ -47,8 +33,13 @@
 <script>
 frappe.ready(function() {
 	$('.sidebar-item a').each(function(index) {
-	        if(this.href.trim() == window.location)
-	            $(this).addClass("active");
+        const active_class = 'text-dark font-weight-bold'
+        const non_active_class = 'text-muted'
+            if(this.href.trim() == window.location) {
+                $(this).removeClass(non_active_class).addClass(active_class);
+            } else {
+                $(this).removeClass(active_class).addClass(non_active_class);
+            }
 	    });
 });
 </script>
diff --git a/frappe/templates/print_formats/standard.html b/frappe/templates/print_formats/standard.html
index 43fe020b2a..e93295964c 100644
--- a/frappe/templates/print_formats/standard.html
+++ b/frappe/templates/print_formats/standard.html
@@ -27,7 +27,7 @@
 		<h4 class='col-sm-12'>{{ _(section.label) }}</h4>
 		{%- endif -%}
         {% for column in section.columns %}
-			<div class="col-xs-{{ (12 / section.columns|len)|int }} column-break">
+			<div class="col-{{ (12 / section.columns|len)|int }} column-break">
             {% for df in column.fields %}
                 {{ render_field(df, doc) }}
             {% endfor %}
diff --git a/frappe/templates/print_formats/standard_macros.html b/frappe/templates/print_formats/standard_macros.html
index ea667704af..122f9026f8 100644
--- a/frappe/templates/print_formats/standard_macros.html
+++ b/frappe/templates/print_formats/standard_macros.html
@@ -70,7 +70,7 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
 
 {%- macro render_field_with_label(df, doc) -%}
 		<div class="row {% if df.bold %}important{% endif %} data-field" {{ fieldmeta(df) }}>
-			<div class="col-xs-{{ "9" if df.fieldtype=="Check" else "5" }}
+			<div class="col-{{ "9" if df.fieldtype=="Check" else "5" }}
 				{%- if doc._align_labels_right %} text-right{%- endif -%}">
 
 				{% if df.fieldtype not in ("Image","HTML","Check") and
@@ -82,7 +82,7 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
 				<label>{{ _(df.label) }}</label>
 				{% endif %}
 			</div>
-			<div class="col-xs-{{ "3" if df.fieldtype=="Check" else "7" }}
+			<div class="col-{{ "3" if df.fieldtype=="Check" else "7" }}
 			{{ get_align_class(df) }} value">
 				{% if doc.get(df.fieldname) != None -%}
 					{{ _(print_value(df, doc)) }}{% endif %}
diff --git a/frappe/website/doctype/blog_post/templates/blog_post.html b/frappe/website/doctype/blog_post/templates/blog_post.html
index 99f4c1e392..cbfc1a8a1f 100644
--- a/frappe/website/doctype/blog_post/templates/blog_post.html
+++ b/frappe/website/doctype/blog_post/templates/blog_post.html
@@ -1,44 +1,52 @@
 {% extends "templates/web.html" %}
+
 {% block meta_block %}
 	{% include "templates/includes/meta_block.html" %}
 {% endblock %}
+
 {% block page_content %}
 <div class="blog-container">
-<article class="blog-content" itemscope itemtype="http://schema.org/BlogPosting">
-	<!-- begin blog content -->
-	<div class="blog-info">
-	<h1 itemprop="headline" class="blog-header">{{ title }}</h1>
-	<p class="post-by text-muted">
-		<a href="/blog?blogger={{ blogger }}" class="no-decoration">{{ _("By") }} {{ blogger_info and blogger_info.full_name or full_name }}</a>
-		<i class="spacer-dot"></i> {{ frappe.format_date(published_on) }}
-		<i class="spacer-dot"></i> <a href="/blog?blog_category={{ blog_category }}" class="no-decoration">{{ category.title }}</a>
-		<i class="spacer-dot"></i> {{ comment_text }}
-	</p>
+	<article class="blog-content mb-3" itemscope itemtype="http://schema.org/BlogPosting">
+		<!-- begin blog content -->
+		<div class="blog-info">
+			<h1 itemprop="headline" class="blog-header">{{ title }}</h1>
+			<p class="post-by text-muted small">
+				<a href="/blog?blogger={{ blogger }}" class="text-muted">{{ blogger_info and blogger_info.full_name or full_name }}</a>
+				&middot;
+				{{ frappe.format_date(published_on) }}
+				&middot;
+				<a href="/blog?blog_category={{ blog_category }}" class="text-muted">{{ category.title }}</a>
+				&middot;
+				{{ comment_text }}
+			</p>
+		</div>
+		<div itemprop="articleBody" class="longform blog-text mt-5">
+		{{ content }}
+		</div>
+		<!-- end blog content -->
+	</article>
+
+	{% if blogger_info %}
+	<hr>
+	{% include "templates/includes/blog/blogger.html" %}
+	{% endif %}
+
+	<div class="blog-comments my-5">
+		{% include 'templates/includes/comments/comments.html' %}
 	</div>
-	<div itemprop="articleBody" class="longform blog-text">
-	{{ content }}
-	</div>
-	<!-- end blog content -->
-</article>
-{% if blogger_info %}
-{% include "templates/includes/blog/blogger.html" %}
-{% endif %}
-<div class="blog-comments">
-	{% include 'templates/includes/comments/comments.html' %}
-</div>
 </div>
 <script>
-    frappe.ready(function() { frappe.set_search_path("/blog"); })
+	frappe.ready(() => frappe.set_search_path("/blog"))
 </script>
 {% endblock %}
+
 {% block style %}
 <style>
 .blog-container {
 	max-width: 720px;
-	margin: auto;
-}
-.page-content {
-	padding-bottom: 0px;
+	margin: 0 auto;
+	font-size: 1.2rem;
 }
+
 </style>
 {% endblock %}
diff --git a/frappe/website/doctype/blog_post/templates/blog_post_row.html b/frappe/website/doctype/blog_post/templates/blog_post_row.html
index aed72897df..fa928a5e33 100644
--- a/frappe/website/doctype/blog_post/templates/blog_post_row.html
+++ b/frappe/website/doctype/blog_post/templates/blog_post_row.html
@@ -1,35 +1,27 @@
 {%- set post = doc -%}
-<div class="web-list-item blog-list-item">
+<div class="web-list-item blog-list-item my-5">
 	<div class="row">
-		<div class="col-xs-12">
-			<h1><a href="/{{ post.route }}">{{ post.title }}</a></h1>
+		<div class="col-12 col-md-7">
+			<h4><a href="/{{ post.route }}" class="text-dark">{{ post.title }}</a></h4>
 			{% if post.cover_image %}
 			<p>
 				<img  class="blogpost-cover-img" src="{{ post.cover_image }}" alt="{{post.title}} - Cover Image">
 			</p>
 			{% endif %}
-			<p class="post-description">{{ post.intro }}</p>
-
-			<div>
-				<div class="inline-block" style="vertical-align: top">
-					<div class="avatar">
-						<img itemprop="thumbnailUrl" src="{{ post.avatar or "/assets/frappe/images/default-avatar.png" }}" />
-					</div>
-				</div>
-				<div class="inline-block" style="width: calc(100% - 100px)">
-					<div class='text-muted'>
-						<a href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
-					</div>
-					<div class="text-muted small">
-						{{ frappe.format_date(post.published_on) }}
-						{% if post.comments %}
-						<span style='display: inline-block; margin-left: 10px;'>
-						<i class='octicon octicon-comment-discussion'></i> {{ post.comments }}
-						</span>
-						{% endif %}
-					</div>
-				</div>
-			</div>
+			<p class="post-description text-muted">{{ post.intro }}</p>
+			<p class="text-muted small">
+				<a class="text-muted" href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
+				&middot;
+				{{ frappe.format_date(post.published_on) }}
+				{% if post.comments %}
+                &middot;
+                {% if post.comments == 1 %}
+                {{ _('1 comment') }}
+                {% else %}
+				{{ _('{0} comments').format(post.comments) }}
+                {% endif %}
+				{% endif %}
+			</p>
 		</div>
 	</div>
 </div>
diff --git a/frappe/website/doctype/help_article/templates/help_article_row.html b/frappe/website/doctype/help_article/templates/help_article_row.html
index 29b78d2949..0fecaf35e1 100644
--- a/frappe/website/doctype/help_article/templates/help_article_row.html
+++ b/frappe/website/doctype/help_article/templates/help_article_row.html
@@ -2,7 +2,7 @@
 <div class="row">
     <div class="col-sm-9">
 		<p>
-			<a class="no-decoration" href="/{{ article.route }}">
+			<a class="no-underline" href="/{{ article.route }}">
 				{{ article.title }}
 			</a><br>
 		</p>
diff --git a/frappe/website/doctype/web_form/templates/web_form.html b/frappe/website/doctype/web_form/templates/web_form.html
index f3377f8366..3135fbfe24 100644
--- a/frappe/website/doctype/web_form/templates/web_form.html
+++ b/frappe/website/doctype/web_form/templates/web_form.html
@@ -17,7 +17,7 @@
 	{% if not read_only and has_header %}
 	<div style="padding-bottom: 15px;">
 	    {% if login_required -%}
-		<a href="/{{ cancel_url or pathname }}" class="btn btn-default btn-sm">
+		<a href="/{{ cancel_url or pathname }}" class="btn btn-light btn-sm">
 	    	{{ _("Cancel") }}</a>
 		{%- endif %}
 		{% if not is_list %}
@@ -51,7 +51,7 @@
 	<p class="text-muted">{{ _(introduction_text) }}</p>
 	{% endif %}
 </div>
-<div class="form-message hide"></div>
+<div class="form-message hidden"></div>
 
 {% if _login_required %}
 <div class="login-required">
@@ -71,8 +71,8 @@
 	{% if show_in_grid %}
 		<div class="web-form-list">
 			<div class="results"></div>
-			<div class="more-block {% if not show_more -%} hide {%- endif %}">
-				<button class="btn btn-default btn-more btn-sm">{{ _("More") }}</button>
+			<div class="more-block {% if not show_more -%} hidden {%- endif %}">
+				<button class="btn btn-light btn-more btn-sm">{{ _("More") }}</button>
 			</div>
 		</div>
 	{% else %}
@@ -99,7 +99,7 @@
 	<div class="row">
 		<div class="col-sm-9">
 			<p class="text-muted">
-				<a class="btn btn-default btn-sm" href="{{ doc.route }}" target="_blank" rel="noopener noreferrer">
+				<a class="btn btn-light btn-sm" href="{{ doc.route }}" target="_blank" rel="noopener noreferrer">
 					{{ web_page_link_text }}</a>
 			</p>
 		</div>
@@ -144,7 +144,7 @@
 			<br>
 			<p class='text-right'>
 				{%- if loop.index > 1 -%}
-				<button class='btn btn-sm btn-default btn-change-section'
+				<button class='btn btn-sm btn-light btn-change-section'
 					data-idx="{{ loop.index - 1 }}">
 					{{ _("Previous") }}</button>
 				{%- endif -%}
@@ -171,12 +171,12 @@
 	<h3>{{ _("Attachments") }}</h3>
 	{% for attachment in attachments %}
 	<div class="attachment">
-		<a class="no-decoration attachment-link" href="{{ attachment.file_url }}" target="blank">
+		<a class="no-underline attachment-link" href="{{ attachment.file_url }}" target="blank">
 			<div class="row">
-				<div class="col-xs-9">
+				<div class="col-9">
 					<span class="file-name">{{ attachment.file_name }}</span>
 				</div>
-				<div class="col-xs-3">
+				<div class="col-3">
 					<span class="pull-right file-size">{{ attachment.file_size }}</span>
 				</div>
 			</div>
@@ -205,7 +205,7 @@
 <script>
 window.web_form_settings = {
 	allow_incomplete: 	{{ allow_incomplete or 0 }},
-	success_link: 		'<p>{{ success_message or _("Your information has been submitted") }}</p><p><a href="{{ success_url or "/" }}" class="btn btn-sm btn-default">{{ _("Continue") }}</a></p>',
+	success_link: 		'<p>{{ success_message or _("Your information has been submitted") }}</p><p><a href="{{ success_url or "/" }}" class="btn btn-sm btn-light">{{ _("Continue") }}</a></p>',
 	datepicker_format: 	"{{ frappe.date_format }}",
 	web_form_doctype: 	"{{ doc_type }}",
 	web_form_name: 		"{{ name }}",
diff --git a/package.json b/package.json
index bf1650f851..e59f15243f 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "ace-builds": "^1.4.1",
     "awesomplete": "^1.1.2",
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^4.2.1",
     "cookie": "^0.3.1",
     "express": "^4.16.2",
     "frappe-datatable": "^1.7.2",
diff --git a/yarn.lock b/yarn.lock
index 752b1481d7..6df143bb6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -470,10 +470,10 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bootstrap@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
-  integrity sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w==
+bootstrap@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.2.1.tgz#8f8bdca024dbf0e8644da32e918c8a03a90a5757"
+  integrity sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q==
 
 brace-expansion@^1.1.7:
   version "1.1.11"