many class fixes and revive shiny class for item titles in a new way

17 files changed, 85 insertions, 117 deletions

diff --git a/Zotlabs/Lib/ThreadItem.php b/Zotlabs/Lib/ThreadItem.php
index 6534a5345..c3464b86b 100644
--- a/Zotlabs/Lib/ThreadItem.php
+++ b/Zotlabs/Lib/ThreadItem.php
@@ -82,7 +82,8 @@ class ThreadItem {
 		$dropping = false;
 		$star = false;
 		$isstarred = "unstarred fa-star-o";
-		$indent = '';
+		$is_comment = false;
+		$is_item = false;
 		$osparkle = '';
 		$total_children = $this->count_descendants();
 		$unseen_comments = (($item['real_uid']) ? 0 : $this->count_unseen_descendants());
@@ -232,7 +233,7 @@ class ThreadItem {
 			}
 		} 
 		else {
-			$indent = 'comment';
+			$is_comment = true;
 		}
 
 
@@ -282,7 +283,7 @@ class ThreadItem {
 			$dreport = t('Delivery Report');
 
 		if(strcmp(datetime_convert('UTC','UTC',$item['created']),datetime_convert('UTC','UTC','now - 12 hours')) > 0)
-			$indent .= ' shiny';
+			$is_new = true;
 
 
 		localize_item($item);
@@ -361,7 +362,8 @@ class ThreadItem {
 			'attend_title' => t('Attendance Options'),
 			'vote_label' => t('Vote'),
 			'vote_title' => t('Voting Options'),
-			'indent' => $indent,
+			'is_comment' => $is_comment,
+			'is_new' => $is_new,
 			'owner_url' => $this->get_owner_url(),
 			'owner_photo' => $this->get_owner_photo(),
 			'owner_name' => $this->get_owner_name(),
@@ -407,7 +409,7 @@ class ThreadItem {
 			'showlike' => $showlike,
 			'showdislike' => $showdislike,
 			'comment' => $this->get_comment_box($indent),
-			'previewing' => ($conv->is_preview() ? ' preview ' : ''),
+			'previewing' => ($conv->is_preview() ? true : false ),
 			'wait' => t('Please wait'),
 			'submid' => str_replace(['+','='], ['',''], base64_encode(substr($item['mid'],0,32))),
 			'thread_level' => $thread_level
diff --git a/view/css/conversation.css b/view/css/conversation.css
index 7567d13eb..78dd29741 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -73,10 +73,6 @@
 	height: 30px;
 }
 
-#profile-jot-wrapper {
-	margin-bottom: 30px;
-}
-
 #profile-jot-plugin-wrapper {
 	margin-top: 10px;
 }
@@ -91,9 +87,6 @@
 
 /* conversation */
 
-.thread-wrapper.toplevel_item {
-	margin-bottom: 20px;
-}
 
 /* conv_item */
 
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index caebd04d5..fe41c2bdd 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1703,8 +1703,7 @@ main.fullscreen .section-content-wrapper-np {
 
 nav ul li .undefined, 
 nav ul li .notify-seen,
-nav ul li .notify-unseen
- {
+nav ul li .notify-unseen {
     max-height: 3rem;
 }
 
@@ -1819,10 +1818,6 @@ blockquote {
 }
 */
 
-#tabs-collapse-1 {
-	padding: 0px;
-	margin-bottom: 25px;
-}
 
 @media screen and (max-width: 767px) {
 
@@ -2052,3 +2047,5 @@ dl.bb-dl > dd > li {
 #permcat-index {
 	margin: 10px;
 }
+
+.shiny { background-color: red; }
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 1ed5e520f..4686e93db 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -18,7 +18,7 @@ $(document).ready(function() {
 
 	if($(window).width() > 767) {
 		$('#left_aside_wrapper').stick_in_parent({
-			offset_top: $('nav').outerHeight(true),
+			offset_top: $('nav').outerHeight(true) + 10,
 			parent: '#region_1',
 			spacer: '#left_aside_spacer'
 		});
@@ -105,7 +105,7 @@ function toggleAside() {
 		$('main').addClass('region_1-on')
 		$('<div id="overlay"></div>').appendTo('section');
 		$('#left_aside_wrapper').stick_in_parent({
-			offset_top: $('nav').outerHeight(true) - 10,
+			offset_top: $('nav').outerHeight(true) + 10,
 			parent: '#region_1',
 			spacer: '#left_aside_spacer'
 		});
diff --git a/view/tpl/categories_widget.tpl b/view/tpl/categories_widget.tpl
index ea6d28dfc..72478aa3d 100755
--- a/view/tpl/categories_widget.tpl
+++ b/view/tpl/categories_widget.tpl
@@ -2,10 +2,10 @@
 	<h3>{{$title}}</h3>
 	<div id="categories-sidebar-desc">{{$desc}}</div>
 	
-	<ul class="nav nav-pills nav-stacked">
-		<li><a href="{{$base}}"{{if $sel_all}} class="categories-selected"{{/if}}>{{$all}}</a></li>
+	<ul class="nav nav-pills flex-column">
+		<li class="nav-item"><a href="{{$base}}" class="nav-link{{if $sel_all}} active{{/if}}">{{$all}}</a></li>
 		{{foreach $terms as $term}}
-		<li><a href="{{$base}}?f=&cat={{$term.name}}"{{if $term.selected}} class="categories-selected"{{/if}}>{{$term.name}}</a></li>
+		<li class="nav-item"><a  href="{{$base}}?f=&cat={{$term.name}}" class="nav-link{{if $term.selected}} active{{/if}}">{{$term.name}}</a></li>
 		{{/foreach}}
 	</ul>
 	
diff --git a/view/tpl/common_tabs.tpl b/view/tpl/common_tabs.tpl
index 43c66b042..e78f54a3c 100755
--- a/view/tpl/common_tabs.tpl
+++ b/view/tpl/common_tabs.tpl
@@ -1,11 +1,11 @@
-<div id="tabs-collapse-1" class="hidden-sm-down">
+<div class="mb-4 hidden-sm-down">
 	<ul class="nav nav-tabs nav-fill">
 		{{foreach $tabs as $tab}}
 		<li class="nav-item"{{if $tab.id}} id="{{$tab.id}}"{{/if}}><a class="nav-link{{if $tab.sel}} {{$tab.sel}}{{/if}}" href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
 		{{/foreach}}
 	</ul>
 </div>
-<div class="hidden-md-up dropdown clearfix" style="position:fixed; right:7px; top:4rem; z-index:1020">
+<div class="hidden-md-up dropdown clearfix" style="position:fixed; right:7px; top:4.5rem; z-index:1020">
 	<button type="button" class="btn btn-outline-secondary btn-sm float-right" data-toggle="dropdown">
 		<i class="fa fa-bars"></i>
 	</button>
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index 1896ef66e..4a4ae7273 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -4,10 +4,10 @@
 </div>
 <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}
-	<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} generic-content-wrapper h-entry {{else}} u-comment h-cite {{/if}} item_{{$item.submid}}">
+	<div id="thread-wrapper-{{$item.id}}" class="mb-4 clearfix thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} generic-content-wrapper h-entry {{else}} u-comment h-cite {{/if}} item_{{$item.submid}}">
 		<a name="item_{{$item.id}}" ></a>
-		<div class="wall-item-outside-wrapper {{$item.indent}}{{$item.previewing}}" id="wall-item-outside-wrapper-{{$item.id}}" >
-			<div class="wall-item-content-wrapper {{$item.indent}}" id="wall-item-content-wrapper-{{$item.id}}" style="clear:both;">
+		<div class="clearfix wall-item-outside-wrapper{{if $item.is_comment}} comment{{/if}}{{if $item.previewing}} preview{{/if}}" id="wall-item-outside-wrapper-{{$item.id}}" >
+			<div class="clearfix wall-item-content-wrapper{{if $item.is_comment}} comment{{/if}}" id="wall-item-content-wrapper-{{$item.id}}" style="clear:both;">
 				{{if $item.photo}}
 				<div class="wall-photo-item" id="wall-photo-item-{{$item.id}}">
 					{{$item.photo}}
@@ -19,9 +19,12 @@
 				</div>
 				{{/if}}
 				{{if $item.title && !$item.event}}
-				<div class="p-2 bg-primary text-white wall-item-title h3{{if !$item.photo}} rounded-top{{/if}}" id="wall-item-title-{{$item.id}}" title="{{$item.title}}">
+				<div class="p-2{{if $item.is_new}} bg-primary text-white{{/if}} wall-item-title h3{{if !$item.photo}} rounded-top{{/if}}" id="wall-item-title-{{$item.id}}" title="{{$item.title}}">
 					{{if $item.title_tosource}}{{if $item.plink}}<a href="{{$item.plink.href}}" title="{{$item.title}} ({{$item.plink.title}})">{{/if}}{{/if}}{{$item.title}}{{if $item.title_tosource}}{{if $item.plink}}</a>{{/if}}{{/if}}
 				</div>
+				{{if ! $item.is_new}}
+				<hr class="m-0">
+				{{/if}}
 				{{/if}}
 				<div class="p-2 wall-item-head">
 					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
@@ -78,7 +81,7 @@
 					<div class="clear"></div>
 				</div>
 				{{/if}}
-				<div class="p-2 wall-item-tools">
+				<div class="p-2 clearfix wall-item-tools">
 					<div class="wall-item-tools-right pull-right">
 						{{if $item.toplevel && $item.emojis && $item.reactions}}
 						<div class="btn-group dropdown">
@@ -233,11 +236,8 @@
 						{{/foreach}}
 					</div>
 					{{/if}}
-					<div class="clear"></div>
 				</div>
-				<div class="clear"></div>
 			</div>
-			<div class="clear{{if $indent}} {{$indent}}{{/if}}"></div>
 		</div>
 		{{if $item.toplevel}}
 		{{foreach $item.children as $child}}
@@ -245,10 +245,9 @@
 		{{/foreach}}
 		{{/if}}
 		{{if $item.comment}}
-		<div class="wall-item-comment-wrapper{{if $item.children}} wall-item-comment-wrapper-wc{{/if}}" >
+		<div class="p-2 wall-item-comment-wrapper{{if $item.children}} wall-item-comment-wrapper-wc{{/if}}" >
 			{{$item.comment}}
 		</div>
-		<div class="clear"></div>
 		{{/if}}
 	</div>
 {{if $item.comment_lastcollapsed}}
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 8885da7c1..b9afbd98e 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -6,7 +6,7 @@
 		<span class="channel-id-select-desc">{{$id_seltext}}</span> {{$id_select}}
 	</div>
 	{{/if}}
-	<div id="profile-jot-wrapper">
+	<div class="mb-4" id="profile-jot-wrapper">
 		{{if $parent}}
 		<input type="hidden" name="parent" value="{{$parent}}" />
 		{{/if}}
diff --git a/view/tpl/nwiki_page_history.tpl b/view/tpl/nwiki_page_history.tpl
index 5d95ce105..b1c6c9284 100644
--- a/view/tpl/nwiki_page_history.tpl
+++ b/view/tpl/nwiki_page_history.tpl
@@ -39,10 +39,10 @@
     background:rgb(224,255,224);
   }
 </style>
-<table class="table-striped table-responsive table-hover" style="width: 100%;">
+<table class="" style="width: 100%;">
   {{foreach $pageHistory as $commit}}
-  <tr><td>
-      <table id="rev-{{$commit.revision}}" onclick="$('#details-{{$commit.revision}}').show()" width="100%">
+  <tr class="wikis-index-row"><td>
+      <table id="rev-{{$commit.revision}}" onclick="$('#details-{{$commit.revision}}').show()" style="width: 100%;">
         <tr><td width="10%">Date</td><td width="70%">{{$commit.date}}</td>
             <td rowspan="3" width="20%" align="right">
 		{{if $permsWrite}}
diff --git a/view/tpl/photo_albums.tpl b/view/tpl/photo_albums.tpl
index de1105bbc..d2797aefb 100755
--- a/view/tpl/photo_albums.tpl
+++ b/view/tpl/photo_albums.tpl
@@ -1,11 +1,11 @@
 <div id="side-bar-photos-albums" class="widget">
 	<h3>{{$title}}</h3>
-	<ul class="nav nav-pills nav-stacked">
-		<li><a href="{{$baseurl}}/photos/{{$nick}}" title="{{$title}}" >Recent Photos</a></li>
+	<ul class="nav nav-pills flex-column">
+		<li class="nav-item"><a  class="nav-link"href="{{$baseurl}}/photos/{{$nick}}" title="{{$title}}" >Recent Photos</a></li>
 		{{if $albums}}
 		{{foreach $albums as $al}}
 		{{if $al.text}}
-		<li><a href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}"><span class="badge pull-right">{{$al.total}}</span>{{$al.text}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}"><span class="badge pull-right">{{$al.total}}</span>{{$al.text}}</a></li>
 		{{/if}}
 		{{/foreach}}
 		{{/if}}
diff --git a/view/tpl/posted_date_widget.tpl b/view/tpl/posted_date_widget.tpl
index 3ad58cc28..fb43c744b 100755
--- a/view/tpl/posted_date_widget.tpl
+++ b/view/tpl/posted_date_widget.tpl
@@ -18,21 +18,21 @@ function toggle_posted_date_button() {
 <div id="datebrowse-sidebar" class="widget">
 	<h3>{{$title}}</h3>
 	<script>function dateSubmit(dateurl) { window.location.href = dateurl; } </script>
-	<ul id="posted-date-selector" class="nav nav-pills nav-stacked">
+	<ul id="posted-date-selector" class="nav nav-pills flex-column">
 		{{foreach $dates as $y => $arr}}
 		{{if $y == $cutoff_year}}
 		</ul>
 		<div id="posted-date-dropdown" style="display: none;">
-		<ul id="posted-date-selector-drop" class="nav nav-pills nav-stacked">
+		<ul id="posted-date-selector-drop" class="nav nav-pills flex-column">
 		{{/if}} 
-		<li id="posted-date-selector-year-{{$y}}">
-			<a href="#" onclick="openClose('posted-date-selector-{{$y}}'); return false;">{{$y}}</a>
+		<li class="nav-item" id="posted-date-selector-year-{{$y}}">
+			<a class="nav-link" href="#" onclick="openClose('posted-date-selector-{{$y}}'); return false;">{{$y}}</a>
 		</li>
 		<div id="posted-date-selector-{{$y}}" style="display: none;">
-			<ul class="posted-date-selector-months nav nav-pills nav-stacked">
+			<ul class="posted-date-selector-months nav nav-pills flex-column">
 				{{foreach $arr as $d}}
-				<li>
-					<a href="#" onclick="dateSubmit('{{$url}}?f=&dend={{$d.1}}{{if $showend}}&dbegin={{$d.2}}{{/if}}'); return false;">{{$d.0}}</a>
+				<li class="nav-item">
+					<a class="nav-link" href="#" onclick="dateSubmit('{{$url}}?f=&dend={{$d.1}}{{if $showend}}&dbegin={{$d.2}}{{/if}}'); return false;">{{$d.0}}</a>
 				</li>
 				{{/foreach}}
 			</ul>
diff --git a/view/tpl/profile_advanced.tpl b/view/tpl/profile_advanced.tpl
index c176f678d..c56062459 100755
--- a/view/tpl/profile_advanced.tpl
+++ b/view/tpl/profile_advanced.tpl
@@ -1,6 +1,6 @@
 <div id="profile-content-wrapper" class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="pull-right">
+		<div class="float-right">
 			{{if $profile.like_count}}
 			<div class="btn-group">
 				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="profile-like">{{$profile.like_count}} {{$profile.like_button_label}}</button>
@@ -19,15 +19,15 @@
 			{{if $editmenu.multi}}
 			<div class="btn-group">
 				<a class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" href="#" ><i class="fa fa-pencil"></i>&nbsp;{{$editmenu.edit.3}}</a>
-				<ul class="dropdown-menu dropdown-menu-right" role="menu">
+				<div class="dropdown-menu dropdown-menu-right">
 					{{foreach $editmenu.menu.entries as $e}}
-					<li>
-						<a href="profiles/{{$e.id}}"><img class="dropdown-menu-img-xs" src='{{$e.photo}}'>{{$e.profile_name}}<div class='clear'></div></a>
-					</li>
+					<a class="dropdown-item" href="profiles/{{$e.id}}"><img class="dropdown-menu-img-xs" src='{{$e.photo}}'> {{$e.profile_name}}</a>
 					{{/foreach}}
-					<li><a href="profile_photo" >{{$editmenu.menu.chg_photo}}</a></li>
-					{{if $editmenu.menu.cr_new}}<li><a href="profiles/new" id="profile-listing-new-link">{{$editmenu.menu.cr_new}}</a></li>{{/if}}
-				</ul>
+					<a class="dropdown-item" href="profile_photo" >{{$editmenu.menu.chg_photo}}</a>
+					{{if $editmenu.menu.cr_new}}
+					<a class="dropdown-item" href="profiles/new" id="profile-listing-new-link">{{$editmenu.menu.cr_new}}</a>
+					{{/if}}
+				</div>
 			</div>
 			{{elseif $editmenu}}
 			<div class="btn-group">
diff --git a/view/tpl/profile_edit.tpl b/view/tpl/profile_edit.tpl
index 28510d0a1..05137479f 100755
--- a/view/tpl/profile_edit.tpl
+++ b/view/tpl/profile_edit.tpl
@@ -1,53 +1,34 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		<div class="dropdown pull-right" id="profile-edit-links">
+		<div class="dropdown float-right" id="profile-edit-links">
 			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 			</button>
-			<ul class="dropdown-menu">
-				<li class="nav-item">
-					<a class="nav-link" href="profile_photo" id="profile-photo_upload-link" title="{{$profpic}}"><i class="fa fa-user"></i>&nbsp;{{$profpic}}</a>
-				</li>
+			<div class="dropdown-menu">
+				<a class="dropdown-item" href="profile_photo" id="profile-photo_upload-link" title="{{$profpic}}"><i class="fa fa-fw fa-user"></i>&nbsp;{{$profpic}}</a>
 				{{if $is_default}}
-				<li class="nav-item">
-					<a href="cover_photo" id="cover-photo_upload-link" title="{{$coverpic}}"><i class="fa fa-picture-o"></i>&nbsp;{{$coverpic}}</a>
-				</li>
+				<a class="dropdown-item" href="cover_photo" id="cover-photo_upload-link" title="{{$coverpic}}"><i class="fa fa-fw fa-picture-o"></i>&nbsp;{{$coverpic}}</a>
 				{{/if}}
 				{{if ! $is_default}}
-				<li class="nav-item">
-					<a href="profperm/{{$profile_id}}" id="profile-edit-visibility-link" title="{{$editvis}}"><i class="fa fa-pencil"></i>&nbsp;{{$editvis}}</a>
-				</li>
+				<a class="dropdown-item" href="profperm/{{$profile_id}}" id="profile-edit-visibility-link" title="{{$editvis}}"><i class="fa fa-fw fa-pencil"></i>&nbsp;{{$editvis}}</a>
 				{{/if}}
-				<li class="nav-item">
-					<a href="thing" id="profile-edit-thing-link" title="{{$addthing}}"><i class="fa fa-plus-circle"></i>&nbsp;{{$addthing}}</a>
-				</li>
-				<li class="divider"></li>
-				<li class="nav-item">
-					<a href="profile/{{$profile_id}}/view" id="profile-edit-view-link" title="{{$viewprof}}">{{$viewprof}}</a>
-				</li>
-
+				<a class="dropdown-item" href="thing" id="profile-edit-thing-link" title="{{$addthing}}"><i class="fa fa-fw fa-plus-circle"></i>&nbsp;{{$addthing}}</a>
+				<div class="dropdown-divider"></div>
+				<a class="dropdown-item" href="profile/{{$profile_id}}/view" id="profile-edit-view-link" title="{{$viewprof}}">{{$viewprof}}</a>
 				{{if $profile_clone_link}}
-				<li class="divider"></li>
-				<li class="nav-item">
-					<a href="{{$profile_clone_link}}" id="profile-edit-clone-link" title="{{$cr_prof}}">{{$cl_prof}}</a>
-				</li>
+				<div class="dropdown-divider"></div>
+				<a class="dropdown-item" href="{{$profile_clone_link}}" id="profile-edit-clone-link" title="{{$cr_prof}}">{{$cl_prof}}</a>
 				{{/if}}
 				{{if $exportable}}
-				<li class="divider"></li>
-				<li class="nav-item">
-					<a href="profiles/export/{{$profile_id}}">{{$lbl_export}}</a>
-				</li>
-				<li class="nav-item">
-					<a href="#" onClick="openClose('profile-upload-form'); return false;">{{$lbl_import}}</a>
-				</li>
+				<div class="dropdown-divider"></div>
+				<a class="dropdown-item" href="profiles/export/{{$profile_id}}">{{$lbl_export}}</a>
+				<a class="dropdown-item" href="#" onClick="openClose('profile-upload-form'); return false;">{{$lbl_import}}</a>
 				{{/if}}
 				{{if ! $is_default}}
-				<li class="divider"></li>
-				<li class="nav-item">
-					<a href="{{$profile_drop_link}}" id="profile-edit-drop-link" title="{{$del_prof}}" onclick="return confirmDelete();"><i class="fa fa-trash-o"></i>&nbsp;{{$del_prof}}</a>
-				</li>
+				<div class="dropdown-divider"></div>
+				<a class="dropdown-item" href="{{$profile_drop_link}}" id="profile-edit-drop-link" title="{{$del_prof}}" onclick="return confirmDelete();"><i class="fa fa-trash-o"></i>&nbsp;{{$del_prof}}</a>
 				{{/if}}
-			<ul>
+			</div>
 		</div>
 		<h2>{{$banner}}</h2>
 		<div class="clear"></div>
diff --git a/view/tpl/usermenu.tpl b/view/tpl/usermenu.tpl
index 547c5f308..c51728c34 100644
--- a/view/tpl/usermenu.tpl
+++ b/view/tpl/usermenu.tpl
@@ -5,10 +5,10 @@
 	<h3 class="pmenu-title">{{$menu.menu_desc}}{{if $edit}} <a href="mitem/{{$menu.menu_id}}" title="{{$edit}}"><i class="fa fa-pencil fakelink" title="{{$edit}}"></i></a>{{/if}}</h3>
 	{{/if}}
 	{{if $items}}
-	<ul class="pmenu-body{{if $wrap || !$class}} nav nav-pills nav-stacked{{elseif !$wrap || $class}} {{$class}}{{/if}}">
+	<ul class="pmenu-body{{if $wrap || !$class}} nav nav-pills flex-column{{elseif !$wrap || $class}} {{$class}}{{/if}}">
 		{{foreach $items as $mitem }}
-		<li id="pmenu-item-{{$mitem.mitem_id}}" class="pmenu-item{{if $mitem.submenu}} dropdown{{/if}}">
-			<a href="{{if $mitem.submenu}}#{{else}}{{$mitem.mitem_link}}{{/if}}"{{if $mitem.submenu}} class="dropdown-toggle" data-toggle="dropdown"{{/if}}{{if $mitem.newwin}}target="_blank"{{/if}}>{{$mitem.mitem_desc}}{{if $mitem.submenu}}<span class="caret"></span>{{/if}}</a>
+		<li id="pmenu-item-{{$mitem.mitem_id}}" class="nav-item pmenu-item{{if $mitem.submenu}} dropdown{{/if}}">
+			<a href="{{if $mitem.submenu}}#{{else}}{{$mitem.mitem_link}}{{/if}}" class="nav-link {{if $mitem.submenu}} dropdown-toggle{{/if}}"{{if $mitem.submenu}} data-toggle="dropdown"{{/if}}{{if $mitem.newwin}}target="_blank"{{/if}}>{{$mitem.mitem_desc}}{{if $mitem.submenu}}<span class="caret"></span>{{/if}}</a>
 			{{if $mitem.submenu}}{{$mitem.submenu}}{{/if}}
 		</li>
 		{{/foreach }}
diff --git a/view/tpl/wiki.tpl b/view/tpl/wiki.tpl
index 50ccdf4cd..c5778a644 100644
--- a/view/tpl/wiki.tpl
+++ b/view/tpl/wiki.tpl
@@ -6,16 +6,12 @@
 				<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
 					<i class="fa fa-cog"></i>&nbsp;{{$tools_label}}
 				</button>
-				<ul class="dropdown-menu dropdown-menu-right">
+				<div class="dropdown-menu dropdown-menu-right">
 					{{if $renamePage}}
-					<li class="nav-item">
-						<a class="nav-link rename-page" href="#"><i class="fa fa-edit"></i>&nbsp;{{$renamePage}}</a>
-					</li>
+					<a class="dropdown-item rename-page" href="#"><i class="fa fa-fw fa-edit"></i>&nbsp;{{$renamePage}}</a>
 					{{/if}}
-					<li class="nav-item">
-						<a id="embed-image" class="nav-link" href="#"><i class="fa fa-picture-o"></i>&nbsp;Embed Image</a>
-					</li>
-				</ul>
+					<a id="embed-image" class="dropdown-item" href="#"><i class="fa fa-fw fa-picture-o"></i>&nbsp;Embed Image</a>
+				</div>
 			</div>	
 			{{/if}}
 			<button id="fullscreen-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen(); adjustFullscreenEditorHeight();"><i class="fa fa-expand"></i></button>
@@ -43,12 +39,12 @@
 	</div>
 	<div id="wiki-content-container" class="section-content-wrapper">
 		<ul class="nav nav-tabs" id="wiki-nav-tabs">
-			<li id="edit-pane-tab"><a data-toggle="tab" href="#edit-pane">{{$editOrSourceLabel}}</a></li>
-			<li class="active"><a data-toggle="tab" href="#preview-pane" id="wiki-get-preview">View</a></li>
-			<li><a data-toggle="tab" href="#page-history-pane" id="wiki-get-history">History</a></li>
+			<li class="nav-item" id="edit-pane-tab"><a class="nav-link" data-toggle="tab" href="#edit-pane">{{$editOrSourceLabel}}</a></li>
+			<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#preview-pane" id="wiki-get-preview">View</a></li>
+			<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page-history-pane" id="wiki-get-history">History</a></li>
 		</ul>
 		<div class="tab-content" id="wiki-page-tabs">
-			<div id="edit-pane" class="tab-pane fade">
+			<div id="edit-pane" class="tab-pane">
 				{{if !$mimeType || $mimeType == 'text/markdown'}}
 				<div id="ace-editor"></div>
 				{{else}}
@@ -62,19 +58,19 @@
 						<div class="input-group">
 							<input class="widget-input" name="{{$commitMsg.0}}" id="id_{{$commitMsg.0}}" type="text" value="{{$commitMsg.2}}"{{if $commitMsg.5}} {{$commitMsg.5}}{{/if}}>
 							<div class="input-group-btn">
-								<button id="save-page" type="button" class="btn btn-primary btn-sm disabled">Save</button>
+								<button id="save-page" type="button" class="btn btn-primary disabled">Save</button>
 							</div>
 						</div>
 					</div>
 				</div>
 				{{/if}}
 			</div>
-			<div id="preview-pane" class="tab-pane fade in active">
+			<div id="preview-pane" class="tab-pane active">
 				<div id="wiki-preview">
 					{{$renderedContent}}
 				</div>
 			</div>
-			<div id="page-history-pane" class="tab-pane fade">
+			<div id="page-history-pane" class="tab-pane">
 				<div id="page-history-list"></div>
 			</div>
 		</div>
diff --git a/view/tpl/wiki_page_list.tpl b/view/tpl/wiki_page_list.tpl
index 78657ec10..44fba15cc 100644
--- a/view/tpl/wiki_page_list.tpl
+++ b/view/tpl/wiki_page_list.tpl
@@ -1,19 +1,19 @@
 {{if $not_refresh}}<div id="wiki_page_list_container" {{if $hide}} style="display: none;" {{/if}}>{{/if}}
 <div id="wiki_page_list" class="widget" >
 	<h3>{{$header}}</h3>
-	<ul class="nav nav-pills nav-stacked">
+	<ul class="nav nav-pills flex-column">
 		{{if $pages}}
 		{{foreach $pages as $page}}
-		<li id="{{$page.link_id}}">
+		<li class="nav-item nav-item-hack" id="{{$page.link_id}}">
 			{{if $page.resource_id && $candel}}
-			<i class="widget-nav-pills-icons fa fa-trash-o drop-icons" onclick="wiki_delete_page('{{$page.title}}', '{{$page.url}}', '{{$page.resource_id}}', '{{$page.link_id}}')"></i>
+			<i class="nav-link widget-nav-pills-icons fa fa-trash-o drop-icons" onclick="wiki_delete_page('{{$page.title}}', '{{$page.url}}', '{{$page.resource_id}}', '{{$page.link_id}}')"></i>
 			{{/if}}
-			<a href="/wiki/{{$channel}}/{{$wikiname}}/{{$page.url}}">{{$page.title}}</a>
+			<a class="nav-link" href="/wiki/{{$channel}}/{{$wikiname}}/{{$page.url}}">{{$page.title}}</a>
 		</li>
 		{{/foreach}}
 		{{/if}}
 		{{if $canadd}}
-		<li><a href="#" onclick="wiki_show_new_page_form(); return false;"><i class="fa fa-plus-circle"></i>&nbsp;{{$addnew}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="#" onclick="wiki_show_new_page_form(); return false;"><i class="fa fa-plus-circle"></i>&nbsp;{{$addnew}}</a></li>
 		{{/if}}
 	</ul>
 	{{if $canadd}}
diff --git a/view/tpl/wikilist_widget.tpl b/view/tpl/wikilist_widget.tpl
index 1f92b5807..9853f9850 100644
--- a/view/tpl/wikilist_widget.tpl
+++ b/view/tpl/wikilist_widget.tpl
@@ -1,8 +1,8 @@
 <div id="wiki_list" class="widget">
 	<h3>{{$header}}</h3>
-	<ul class="nav nav-pills nav-stacked">
+	<ul class="nav nav-pills flex-column">
 		{{foreach $wikis as $wiki}}
-		<li><a href="/wiki/{{$channel}}/{{$wiki.urlName}}/Home" title="{{$view}}">{{$wiki.title}}</a></li> 
+		<li class="nav-item"><a class="nav-link" href="/wiki/{{$channel}}/{{$wiki.urlName}}/Home" title="{{$view}}">{{$wiki.title}}</a></li> 
 		{{/foreach}}
 	</ul>
 </div>