From 31f35ad902314f5a8a988d2bcd461a2b238fa3cf Mon Sep 17 00:00:00 2001
From: Leigh <Leigh.Pointer@outlook.com>
Date: Sun, 11 Jul 2021 14:16:33 +0200
Subject: [PATCH] Modifications for Bootstrap 5

replace tables in markup with responsive approach
---
 Oqtane.Client/Modules/Admin/Jobs/Edit.razor   | 101 ++++------
 Oqtane.Client/Modules/Admin/Pages/Add.razor   |  12 +-
 Oqtane.Client/Modules/Admin/Pages/Edit.razor  |  24 +--
 Oqtane.Client/Modules/Admin/Themes/Add.razor  |  10 -
 .../Modules/Admin/UserProfile/Add.razor       |  47 ++---
 .../Modules/Admin/UserProfile/Index.razor     | 185 ++++++++----------
 .../Modules/Admin/UserProfile/View.razor      |  82 ++++----
 Oqtane.Client/Modules/Admin/Users/Edit.razor  |  33 ----
 Oqtane.Client/Modules/HtmlText/Settings.razor |  70 ++++---
 .../Themes/Controls/Theme/ControlPanel.razor  |   8 +-
 .../Containers/ContainerSettings.razor        | 116 +++++------
 .../OqtaneTheme/Themes/ThemeSettings.razor    |  71 ++++---
 12 files changed, 334 insertions(+), 425 deletions(-)

diff --git a/Oqtane.Client/Modules/Admin/Jobs/Edit.razor b/Oqtane.Client/Modules/Admin/Jobs/Edit.razor
index 31d982c3..f5f04239 100644
--- a/Oqtane.Client/Modules/Admin/Jobs/Edit.razor
+++ b/Oqtane.Client/Modules/Admin/Jobs/Edit.razor
@@ -5,39 +5,31 @@
 @inject IStringLocalizer<Edit> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="name" HelpText="Enter the job name" ResourceKey="Name">Name: </Label>
-        </td>
-        <td>
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="name" HelpText="Enter the job name" ResourceKey="Name">Name: </Label>
+        <div class="col-sm-9">
             <input id="name" class="form-control" @bind="@_name" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="type" HelpText="The fully qualified job type name" ResourceKey="Type">Type: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="type" HelpText="The fully qualified job type name" ResourceKey="Type">Type: </Label>
+        <div class="col-sm-9">
             <input id="type" class="form-control" @bind="@_jobType" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="enabled" HelpText="Select whether you want the job enabled or not" ResourceKey="Enabled">Enabled? </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="enabled" HelpText="Select whether you want the job enabled or not" ResourceKey="Enabled">Enabled? </Label>
+        <div class="col-sm-9">
             <select id="enabled" class="form-select" @bind="@_isEnabled">
                 <option value="True">@SharedLocalizer["Yes"]</option>
                 <option value="False">@SharedLocalizer["No"]</option>
             </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="runs-every" HelpText="Select how often you want the job to run" ResourceKey="RunsEvery">Runs Every: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="runs-every" HelpText="Select how often you want the job to run" ResourceKey="RunsEvery">Runs Every: </Label>
+        <div class="col-sm-9">
             <input id="runs-every" class="form-control" @bind="@_interval" />
             <select id="runs-every" class="form-select" @bind="@_frequency">
                 <option value="m">@Localizer["Minute(s)"]</option>
@@ -45,41 +37,34 @@
                 <option value="d">@Localizer["Day(s)"]</option>
                 <option value="M">@Localizer["Month(s)"]</option>
             </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="starting" HelpText="What time do you want the job to start" ResourceKey="Starting">Starting: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="starting" HelpText="What time do you want the job to start" ResourceKey="Starting">Starting: </Label>
+        <div class="col-sm-9">
             <input id="starting" class="form-control" @bind="@_startDate" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="ending" HelpText="When do you want the job to end" ResourceKey="Ending">Ending: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="ending" HelpText="When do you want the job to end" ResourceKey="Ending">Ending: </Label>
+        <div class="col-sm-9">
             <input id="ending" class="form-control" @bind="@_endDate" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="retention" HelpText="Number of log entries to retain for this job" ResourceKey="RetentionLog">Retention Log (Items): </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="retention" HelpText="Number of log entries to retain for this job" ResourceKey="RetentionLog">Retention Log (Items): </Label>
+        <div class="col-sm-9">
             <input id="retention" class="form-control" @bind="@_retentionHistory" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="next" HelpText="Next execution for this job." ResourceKey="NextExecution">Next Execution: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="next" HelpText="Next execution for this job." ResourceKey="NextExecution">Next Execution: </Label>
+        <div class="col-sm-9">
             <input id="next" class="form-control" @bind="@_nextExecution" />
-        </td>
-    </tr>
-</table>
+        </div>
+    </div>
+</div>
+<br />
 <button type="button" class="btn btn-success" @onclick="SaveJob">@SharedLocalizer["Save"]</button>
 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 <br />
diff --git a/Oqtane.Client/Modules/Admin/Pages/Add.razor b/Oqtane.Client/Modules/Admin/Pages/Add.razor
index b474a619..7190ea8f 100644
--- a/Oqtane.Client/Modules/Admin/Pages/Add.razor
+++ b/Oqtane.Client/Modules/Admin/Pages/Add.razor
@@ -136,13 +136,11 @@
         }
     </TabPanel>
     <TabPanel Name="Permissions" ResourceKey="Permissions">
-        <table class="table table-borderless">
-            <tr>
-                <td>
-                    <PermissionGrid EntityName="@EntityNames.Page" Permissions="@_permissions" @ref="_permissionGrid" />
-                </td>
-            </tr>
-        </table>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <PermissionGrid EntityName="@EntityNames.Page" Permissions="@_permissions" @ref="_permissionGrid" />
+            </div>
+        </div>
     </TabPanel>
     @if (_themeSettingsType != null)
     {
diff --git a/Oqtane.Client/Modules/Admin/Pages/Edit.razor b/Oqtane.Client/Modules/Admin/Pages/Edit.razor
index a189a539..5b55f62c 100644
--- a/Oqtane.Client/Modules/Admin/Pages/Edit.razor
+++ b/Oqtane.Client/Modules/Admin/Pages/Edit.razor
@@ -13,13 +13,13 @@
         {
             <div class="container">
                 <div class="row mb-1 align-items-center">
-                    <Label For="Name" HelpText="Enter the page name" ResourceKey="Name">Name: </Label>
+                    <Label Class="col-sm-3" For="Name" HelpText="Enter the page name" ResourceKey="Name">Name: </Label>
                     <div class="col-sm-9">
                         <input id="Name" class="form-control" @bind="@_name" />
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
-                    <Label For="Parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label>
+                    <Label Class="col-sm-3" For="Parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label>
                     <div class="col-sm-9">
                         <select id="Parent" class="form-select" value="@_parentid" @onchange="(e => ParentChanged(e))">
                             <option value="-1">&lt;@Localizer["SiteRoot"]&gt;</option>
@@ -34,7 +34,7 @@
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
-                    <Label For="Move" HelpText="Select the location where you would like the page to be moved in relation to other pages" ResourceKey="Move">Move: </Label>
+                    <Label Class="col-sm-3" For="Move" HelpText="Select the location where you would like the page to be moved in relation to other pages" ResourceKey="Move">Move: </Label>
                     <div class="col-sm-9">
                         <select id="Move" class="form-select" @bind="@_insert">
                             @if (_parentid == _currentparentid)
@@ -62,7 +62,7 @@
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
-                    <Label For="Navigation" HelpText="Select whether the page is part of the site navigation or hidden" ResourceKey="Navigation">Navigation? </Label>
+                    <Label Class="col-sm-3" For="Navigation" HelpText="Select whether the page is part of the site navigation or hidden" ResourceKey="Navigation">Navigation? </Label>
                     <div class="col-sm-9">
                         <select id="Navigation" class="form-select" @bind="@_isnavigation">
                             <option value="True">@SharedLocalizer["Yes"]</option>
@@ -71,7 +71,7 @@
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
-                    <Label For="Clickablen" HelpText="Select whether the link in the site navigation is enabled or disabled" ResourceKey="Clickable">Clickable? </Label>
+                    <Label Class="col-sm-3" For="Clickablen" HelpText="Select whether the link in the site navigation is enabled or disabled" ResourceKey="Clickable">Clickable? </Label>
                     <div class="col-sm-9">
                         <select id="Navigation" class="form-select" @bind="@_isclickable">
                             <option value="True">@SharedLocalizer["Yes"]</option>
@@ -80,13 +80,13 @@
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
-                    <Label For="Path" HelpText="Optionally enter a url path for this page (ie. home ). If you do not provide a url path, the page name will be used." ResourceKey="UrlPath">Url Path: </Label>
+                    <Label Class="col-sm-3" For="Path" HelpText="Optionally enter a url path for this page (ie. home ). If you do not provide a url path, the page name will be used." ResourceKey="UrlPath">Url Path: </Label>
                     <div class="col-sm-9">
                         <input id="Path" class="form-control" @bind="@_path" />
                     </div>
                 </div>
                 <div class="row mb-1 align-items-center">
-                    <Label For="Url" HelpText="Optionally enter a url which this page should redirect to when a user navigates to it" ResourceKey="Redirect">Redirect: </Label>
+                    <Label Class="col-sm-3" For="Url" HelpText="Optionally enter a url which this page should redirect to when a user navigates to it" ResourceKey="Redirect">Redirect: </Label>
                     <div class="col-sm-9">
                         <input id="Url" class="form-control" @bind="@_url" />
                     </div>
@@ -95,13 +95,13 @@
             <Section Name="Appearance" ResourceKey="Appearance">
                 <div class="container">
                     <div class="row mb-1 align-items-center">
-                        <Label For="Title" HelpText="Optionally enter the page title. If you do not provide a page title, the page name will be used." ResourceKey="Title">Title: </Label>
+                        <Label Class="col-sm-3" For="Title" HelpText="Optionally enter the page title. If you do not provide a page title, the page name will be used." ResourceKey="Title">Title: </Label>
                         <div class="col-sm-9">
                             <input id="Title" class="form-control" @bind="@_title" />
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
-                        <Label For="Theme" HelpText="Select the theme for this page" ResourceKey="Theme">Theme: </Label>
+                        <Label Class="col-sm-3" For="Theme" HelpText="Select the theme for this page" ResourceKey="Theme">Theme: </Label>
                         <div class="col-sm-9">
                             <select id="Theme" class="form-select" value="@_themetype" @onchange="(e => ThemeChanged(e))">
                                 @foreach (var theme in _themes)
@@ -112,7 +112,7 @@
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
-                        <Label For="defaultContainer" HelpText="Select the default container for the page" ResourceKey="DefaultContainer">Default Container: </Label>
+                        <Label Class="col-sm-3" For="defaultContainer" HelpText="Select the default container for the page" ResourceKey="DefaultContainer">Default Container: </Label>
                         <div class="col-sm-9">
                             <select id="defaultContainer" class="form-select" @bind="@_containertype">
                                 <option value="-">&lt;@Localizer["Container.Select"]&gt;</option>
@@ -124,13 +124,13 @@
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
-                        <Label For="Icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
+                        <Label Class="col-sm-3" For="Icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
                         <div class="col-sm-9">
                             <input id="Icon" class="form-control" @bind="@_icon" />
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
-                        <Label For="Personalizable" HelpText="Select whether you would like users to be able to personalize this page with their own content" ResourceKey="Personalizable">Personalizable? </Label>
+                        <Label Class="col-sm-3" For="Personalizable" HelpText="Select whether you would like users to be able to personalize this page with their own content" ResourceKey="Personalizable">Personalizable? </Label>
                         <div class="col-sm-9">
                             <select id="Personalizable" class="form-select" @bind="@_ispersonalizable">
                                 <option value="True">@SharedLocalizer["Yes"]</option>
diff --git a/Oqtane.Client/Modules/Admin/Themes/Add.razor b/Oqtane.Client/Modules/Admin/Themes/Add.razor
index 3699a4f5..726f8833 100644
--- a/Oqtane.Client/Modules/Admin/Themes/Add.razor
+++ b/Oqtane.Client/Modules/Admin/Themes/Add.razor
@@ -65,16 +65,6 @@
                 </div>
             </div>
         </div>
-        <table class="table table-borderless">
-            <tr>
-                <td>
-                   
-                </td>
-                <td>
-                   
-                </td>
-            </tr>
-        </table>
     </TabPanel>
 </TabStrip>
 
diff --git a/Oqtane.Client/Modules/Admin/UserProfile/Add.razor b/Oqtane.Client/Modules/Admin/UserProfile/Add.razor
index a10e0c3a..356be354 100644
--- a/Oqtane.Client/Modules/Admin/UserProfile/Add.razor
+++ b/Oqtane.Client/Modules/Admin/UserProfile/Add.razor
@@ -8,32 +8,27 @@
 
 @if (PageState.User != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="to" HelpText="Enter the username you wish to send a message to" ResourceKey="To">To: </Label>
-            </td>
-            <td>
-                <input id="to" class="form-control" @bind="@username" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="subject" HelpText="Enter the subject of the message" ResourceKey="Subject">Subject: </Label>
-            </td>
-            <td>
-                <input id="subject" class="form-control" @bind="@subject" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="message" HelpText="Enter the message" ResourceKey="Message">Message: </Label>
-            </td>
-            <td>
-                <textarea id="message" class="form-control" @bind="@body" rows="5" />
-            </td>
-        </tr>
-    </table>
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="to" HelpText="Enter the username you wish to send a message to" ResourceKey="To">To: </Label>
+        <div class="col-sm-9">
+            <input id="to" class="form-control" @bind="@username" />
+        </div> >
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="subject" HelpText="Enter the subject of the message" ResourceKey="Subject">Subject: </Label>
+        <div class="col-sm-9">
+            <input id="subject" class="form-control" @bind="@subject" />
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="message" HelpText="Enter the message" ResourceKey="Message">Message: </Label>
+        <div class="col-sm-9">
+            <textarea id="message" class="form-control" @bind="@body" rows="5" />
+        </div>
+    </div>
+</div>
+<br/>
     <button type="button" class="btn btn-primary" @onclick="Send">@SharedLocalizer["Send"]</button>
     <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 }
diff --git a/Oqtane.Client/Modules/Admin/UserProfile/Index.razor b/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
index 54e2d398..d6c7f38c 100644
--- a/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
+++ b/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
@@ -21,56 +21,45 @@ else
     <TabPanel Name="Identity" ResourceKey="Identity">
         @if (PageState.User != null)
         {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="username" HelpText="Your username. Note that this field can not be modified." ResourceKey="Username"></Label>
-                    </td>
-                    <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="Your username. Note that this field can not be modified." ResourceKey="Username"></Label>
+                    <div class="col-sm-9">
                         <input id="username" class="form-control" @bind="@username" readonly />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
-                    </td>
-                    <td>
-                        <input id ="password" type="password" class="form-control" @bind="@password" autocomplete="new-password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="confirm" HelpText="If you are changing your password you must enter it again to confirm it matches" ResourceKey="Confirm"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
+                    <div class="col-sm-9">
+                        <input id="password" type="password" class="form-control" @bind="@password" autocomplete="new-password" />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="If you are changing your password you must enter it again to confirm it matches" ResourceKey="Confirm"></Label>
+                    <div class="col-sm-9">
                         <input id="confirm" type="password" class="form-control" @bind="@confirm" autocomplete="new-password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="email" HelpText="Your email address where you wish to receive notifications" ResourceKey="Email"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="email" HelpText="Your email address where you wish to receive notifications" ResourceKey="Email"></Label>
+                    <div class="col-sm-9">
                         <input id="email" class="form-control" @bind="@email" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="displayname" HelpText="Your full name" ResourceKey="DisplayName"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="displayname" HelpText="Your full name" ResourceKey="DisplayName"></Label>
+                    <div class="col-sm-9">
                         <input id="displayname" class="form-control" @bind="@displayname" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="@photofileid.ToString()" HelpText="A photo of yourself" ResourceKey="Photo"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="@photofileid.ToString()" HelpText="A photo of yourself" ResourceKey="Photo"></Label>
+                    <div class="col-sm-9">
                         <FileManager FileId="@photofileid" @ref="filemanager" />
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
+            <br />
             <button type="button" class="btn btn-success" @onclick="Save">@SharedLocalizer["Save"]</button>
             <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
         }
@@ -78,58 +67,58 @@ else
     <TabPanel Name="Profile" ResourceKey="Profile">
         @if (profiles != null && settings != null)
         {
-            <table class="table table-borderless">
-                @foreach (Profile profile in profiles)
-                {
-                    var p = profile;
-                    if (!p.IsPrivate || UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
+
+
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    @foreach (Profile profile in profiles)
                     {
-                        if (p.Category != category)
+                        var p = profile;
+                        if (!p.IsPrivate || UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
                         {
-                            <tr>
-                                <th colspan="2" style="text-align: center;">
+                            if (p.Category != category)
+                            {
+                                <div class="col text-center pb-2">
                                     @p.Category
-                                </th>
-                            </tr>
-                            category = p.Category;
-                        }
-                        <tr>
-                            <td width="30%">
-                                <Label For="@p.Name" HelpText="@p.Description">@p.Title</Label>
-                            </td>
-                            <td>
-                                @if (!string.IsNullOrEmpty(p.Options))
-                                {
-                                    <select id="@p.Name" class="form-select" @onchange="@(e => ProfileChanged(e, p.Name))">
-                                        @foreach (var option in p.Options.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
-                                        {
-                                            @if (GetProfileValue(p.Name, "") == option || (GetProfileValue(p.Name, "") == "" && p.DefaultValue == option))
-                                            {
-                                                <option value="@option" selected>@option</option>
-                                            }
-                                            else
-                                            {
-                                                <option value="@option">@option</option>
-                                            }
-                                        }
-                                    </select>
-                                }
-                                else
-                                {
-                                    @if (p.IsRequired)
+                                </div>
+                                category = p.Category;
+                            }
+                            <div class="row mb-1 align-items-center">
+                                <Label Class="col-sm-3" For="@p.Name" HelpText="@p.Description">@p.Title</Label>
+                                <div class="col-sm-9">
+                                    @if (!string.IsNullOrEmpty(p.Options))
                                     {
-                                        <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                        <select id="@p.Name" class="form-select" @onchange="@(e => ProfileChanged(e, p.Name))">
+                                            @foreach (var option in p.Options.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
+                                            {
+                                                @if (GetProfileValue(p.Name, "") == option || (GetProfileValue(p.Name, "") == "" && p.DefaultValue == option))
+                                                {
+                                                    <option value="@option" selected>@option</option>
+                                                }
+                                                else
+                                                {
+                                                    <option value="@option">@option</option>
+                                                }
+                                            }
+                                        </select>
                                     }
                                     else
                                     {
-                                        <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                        @if (p.IsRequired)
+                                        {
+                                            <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                        }
+                                        else
+                                        {
+                                            <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                        }
                                     }
-                                }
-                            </td>
-                        </tr>
+                                </div>
+                            </div>
+                        }
                     }
-                }
-            </table>
+                </div>
+            </div>
             <button type="button" class="btn btn-success" @onclick="Save">@SharedLocalizer["Save"]</button>
             <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
         }
@@ -143,11 +132,11 @@ else
             {
                 <Pager Items="@notifications">
                     <Header>
-                        <th style="width: 1px;">&nbsp;</th>
-                        <th style="width: 1px;">&nbsp;</th>
-                        <th>@Localizer["From"]</th>
-                        <th>@Localizer["Subject"]</th>
-                        <th>@Localizer["Received"]</th>
+                    <th style="width: 1px;">&nbsp;</th>
+                    <th style="width: 1px;">&nbsp;</th>
+                    <th>@Localizer["From"]</th>
+                    <th>@Localizer["Subject"]</th>
+                    <th>@Localizer["Received"]</th>
                     </Header>
                     <Row>
                         <td><ActionLink Action="View" Parameters="@($"id=" + context.NotificationId.ToString())" Security="SecurityAccessLevel.View" EditMode="false" ResourceKey="ViewNotification" /></td>
@@ -176,11 +165,11 @@ else
             {
                 <Pager Items="@notifications">
                     <Header>
-                        <th>&nbsp;</th>
-                        <th>&nbsp;</th>
-                        <th>@Localizer["To"]</th>
-                        <th>@Localizer["Subject"]</th>
-                        <th>@Localizer["Sent"]</th>
+                    <th>&nbsp;</th>
+                    <th>&nbsp;</th>
+                    <th>@Localizer["To"]</th>
+                    <th>@Localizer["Subject"]</th>
+                    <th>@Localizer["Sent"]</th>
                     </Header>
                     <Row>
                         <td><ActionLink Action="View" Parameters="@($"id=" + context.NotificationId.ToString())" Security="SecurityAccessLevel.View" EditMode="false" ResourceKey="ViewNotification" /></td>
diff --git a/Oqtane.Client/Modules/Admin/UserProfile/View.razor b/Oqtane.Client/Modules/Admin/UserProfile/View.razor
index 555190c1..947a6c7b 100644
--- a/Oqtane.Client/Modules/Admin/UserProfile/View.razor
+++ b/Oqtane.Client/Modules/Admin/UserProfile/View.razor
@@ -8,75 +8,71 @@
 
 @if (PageState.User != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <label class="control-label">@Localizer["Title"] </label>
-            </td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <label Class="col-sm-3">@Localizer["Title"] </label>
             @if (title == "From")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@username" readonly />
-                </td>
+                </div>
             }
             @if (title == "To")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@username" />
-                </td>
+                </div>
             }
-        </tr>
-        <tr>
-            <td>
-                <label class="control-label">@Localizer["Subject"] </label>
-            </td>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <label Class="col-sm-3">@Localizer["Subject"] </label>
             @if (title == "From")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@subject" readonly />
-                </td>
+                </div>
             }
             @if (title == "To")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@subject" />
-                </td>
+                </div>
             }
-        </tr>
+        </div>
+    </div>
+    <div class="container">
         @if (title == "From")
         {
-            <tr>
-                <td>
-                    <label class="control-label">@Localizer["Date"] </label>
-                </td>
-                <td>
+            <div class="row mb-1 align-items-center">
+                <label class="col-sm-3">@Localizer["Date"] </label>
+                <div class="col-sm-9">
                     <input class="form-control" @bind="@createdon" readonly />
-                </td>
-            </tr>
+                </div>
+            </div>
         }
         @if (title == "From")
         {
-            <tr>
-                <td>
-                    <label class="control-label">@Localizer["Message"] </label>
-                </td>
-                <td>
-                    <textarea class="form-control" @bind="@body" rows="5" readonly />
-                </td>
-            </tr>
+                <div class="row mb-1 align-items-center">
+                    <label class="col-sm-3">@Localizer["Message"] </label>
+                    <div class="col-sm-9">
+                        <textarea class="form-control" @bind="@body" rows="5" readonly />
+                    </div>
+                </div>
+
         }
         @if (title == "To")
         {
-            <tr>
-                <td>
-                    <label class="control-label">@Localizer["Message"] </label>
-                </td>
-                <td>
-                    <textarea class="form-control" @bind="@body" rows="5" />
-                </td>
-            </tr>
+
+                <div class="row mb-1 align-items-center">
+                    <label class="col-sm-3">@Localizer["Message"] </label>
+                    <div class="col-sm-9">
+                        <textarea class="form-control" @bind="@body" rows="5" readonly />
+                    </div>
+                </div>
+
         }
-    </table>
+
+    </div>
 
 
     @if (reply != string.Empty)
diff --git a/Oqtane.Client/Modules/Admin/Users/Edit.razor b/Oqtane.Client/Modules/Admin/Users/Edit.razor
index b95ea66b..aac65f2c 100644
--- a/Oqtane.Client/Modules/Admin/Users/Edit.razor
+++ b/Oqtane.Client/Modules/Admin/Users/Edit.razor
@@ -99,41 +99,8 @@ else
                             </div>
                         </div>
                     }
-
                 </div>
             </div>
-
-
-            @*<table class="table table-borderless">
-                @foreach (Profile profile in profiles)
-                {
-                    var p = profile;
-                    if (p.Category != category)
-                    {
-                        <tr>
-                            <th colspan="2" style="text-align: center;">
-                                @p.Category
-                            </th>
-                        </tr>
-                        category = p.Category;
-                    }
-                    <tr>
-                        <td width="30%">
-                            <Label For="@p.Name" HelpText="@p.Description">@p.Title</Label>
-                        </td>
-                        <td>
-                            @if (p.IsRequired)
-                            {
-                                <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
-                            }
-                            else
-                            {
-                                <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
-                            }
-                        </td>
-                    </tr>
-                }
-            </table>*@
         }
     </TabPanel>
 </TabStrip>
diff --git a/Oqtane.Client/Modules/HtmlText/Settings.razor b/Oqtane.Client/Modules/HtmlText/Settings.razor
index cf903c0e..8aab9c77 100644
--- a/Oqtane.Client/Modules/HtmlText/Settings.razor
+++ b/Oqtane.Client/Modules/HtmlText/Settings.razor
@@ -5,46 +5,44 @@
 @inject IStringLocalizer<Settings> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="files" ResourceKey="Allow File Management" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
-        </td>
-        <td>
-            <select id="files" class="form-select" @bind="@_allowfilemanagement">
-                <option value="true">@SharedLocalizer["Yes"]</option>
-                <option value="false">@SharedLocalizer["No"]</option>
-            </select>
-        </td>
-    </tr>
-</table>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="files" ResourceKey="Allow File Management" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
+            <div class="col-sm-9">
+                <select id="files" class="form-select" @bind="@_allowfilemanagement">
+                    <option value="true">@SharedLocalizer["Yes"]</option>
+                    <option value="false">@SharedLocalizer["No"]</option>
+                </select>
+            </div>
+        </div>
+    </div>
 
-@code {
-    private string _allowfilemanagement;
+    @code {
+        private string _allowfilemanagement;
 
-    protected override void OnInitialized()
-    {
-        try
+        protected override void OnInitialized()
         {
-            _allowfilemanagement = SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true");
+            try
+            {
+                _allowfilemanagement = SettingService.GetSetting(ModuleState.Settings, "AllowFileManagement", "true");
+            }
+            catch (Exception ex)
+            {
+                ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            }
         }
-        catch (Exception ex)
+
+        public async Task UpdateSettings()
         {
-            ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            try
+            {
+                var settings = ModuleState.Settings;
+                settings = SettingService.SetSetting(settings, "AllowFileManagement", _allowfilemanagement);
+                await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
+            }
+            catch (Exception ex)
+            {
+                ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            }
         }
     }
-
-    public async Task UpdateSettings()
-    {
-        try
-        {
-            var settings = ModuleState.Settings;
-            settings = SettingService.SetSetting(settings, "AllowFileManagement", _allowfilemanagement);
-            await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
-        }
-        catch (Exception ex)
-        {
-            ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
-        }
-    }
-}
diff --git a/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor b/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
index 6cf9d0b8..2589647f 100644
--- a/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
+++ b/Oqtane.Client/Themes/Controls/Theme/ControlPanel.razor
@@ -86,7 +86,7 @@
                 <hr class="app-rule" />
                 <div class="row">
                     <div class="col text-center">
-                        <label for="Module" class="control-label">@Localizer["Module.Manage"] </label>
+                        <label Class="col-sm-3" For="Module" >@Localizer["Module.Manage"] </label>
                         <select class="form-select" @bind="@ModuleType">
                             <option value="new">@Localizer["Module.AddNew"]</option>
                             <option value="existing">@Localizer["Module.AddExisting"]</option>
@@ -152,7 +152,7 @@
                 </div>
                 <div class="row">
                     <div class="col text-center">
-                        <label for="Title" class="control-label">@Localizer["Title"] </label>
+                        <label Class="col-sm-3" For="Title">@Localizer["Title"] </label>
                         <input type="text" name="Title" class="form-control" @bind="@Title" />
                     </div>
                 </div>
@@ -160,7 +160,7 @@
                 {
                     <div class="row">
                         <div class="col text-center">
-                            <label for="Pane" class="control-label">@Localizer["Pane"] </label>
+                            <label Class="col-sm-3" For="Pane">@Localizer["Pane"] </label>
                             <select class="form-select" @bind="@Pane">
                                 @foreach (string pane in PageState.Page.Panes)
                                 {
@@ -172,7 +172,7 @@
                 }
                 <div class="row">
                     <div class="col text-center">
-                        <label for="Container" class="control-label">@Localizer["Container"] </label>
+                        <label Class="col-sm-3" For="Container">@Localizer["Container"] </label>
                         <select class="form-select" @bind="@ContainerType">
                             @foreach (var container in _containers)
                             {
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Containers/ContainerSettings.razor b/Oqtane.Client/Themes/OqtaneTheme/Containers/ContainerSettings.razor
index 95d23dff..44e41bbd 100644
--- a/Oqtane.Client/Themes/OqtaneTheme/Containers/ContainerSettings.razor
+++ b/Oqtane.Client/Themes/OqtaneTheme/Containers/ContainerSettings.razor
@@ -4,23 +4,19 @@
 @inject ISettingService SettingService
 @attribute [OqtaneIgnore]
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="title" ResourceKey="Title" HelpText="Specify If The Module Title Should Be Displayed">Display Title?</Label>
-        </td>
-        <td>
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="title" ResourceKey="Title" HelpText="Specify If The Module Title Should Be Displayed">Display Title?</Label>
+        <div class="col-sm-9">
             <select id="title" class="form-select" @bind="@_title">
                 <option value="true">Yes</option>
                 <option value="false">No</option>
             </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="background\" ResourceKey="Background" HelpText="Optionally Specify A Background Color For The Container">Background Color:</Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="background\" ResourceKey="Background" HelpText="Optionally Specify A Background Color For The Container">Background Color:</Label>
+        <div class="col-sm-9">
             <select id="background" class="form-select" @bind="@_background">
                 <option value="">None</option>
                 <option value="bg-primary">Primary</option>
@@ -32,13 +28,11 @@
                 <option value="bg-light">Light</option>
                 <option value="bg-dark">Dark</option>
             </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="text" ResourceKey="Text" HelpText="Optionally Specify A Text Color For The Container">Text Color:</Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="text" ResourceKey="Text" HelpText="Optionally Specify A Text Color For The Container">Text Color:</Label>
+        <div class="col-sm-9">
             <select id="text" class="form-select" @bind="@_text">
                 <option value="">None</option>
                 <option value="text-primary">Primary</option>
@@ -50,13 +44,11 @@
                 <option value="text-light">Light</option>
                 <option value="text-dark">Dark</option>
             </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="border" ResourceKey="Border" HelpText="Optionally Specify A Border For The Container">Border Color:</Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="border" ResourceKey="Border" HelpText="Optionally Specify A Border For The Container">Border Color:</Label>
+        <div class="col-sm-9">
             <select id="border" class="form-select" @bind="@_border">
                 <option value="">None</option>
                 <option value="border">Default</option>
@@ -69,45 +61,45 @@
                 <option value="border border-light">Light</option>
                 <option value="border border-dark">Dark</option>
             </select>
-        </td>
-    </tr>
-</table>
+        </div>
+    </div>
+</div>
 
-@code {
-    private string _title = "true";
-    private string _background = "";
-    private string _text = "";
-    private string _border = "";
+    @code {
+        private string _title = "true";
+        private string _background = "";
+        private string _text = "";
+        private string _border = "";
 
-    protected override void OnInitialized()
-    {
-        try
+        protected override void OnInitialized()
         {
-            _title = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Title", "true");
-            _background = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Background", "");
-            _text = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Text", "");
-            _border = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Border", "");
+            try
+            {
+                _title = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Title", "true");
+                _background = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Background", "");
+                _text = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Text", "");
+                _border = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Border", "");
+            }
+            catch (Exception ex)
+            {
+                ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            }
         }
-        catch (Exception ex)
+
+        public async Task UpdateSettings()
         {
-            ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            try
+            {
+                var settings = ModuleState.Settings;
+                settings = SettingService.SetSetting(settings, GetType().Namespace + ":Title", _title);
+                settings = SettingService.SetSetting(settings, GetType().Namespace + ":Background", _background);
+                settings = SettingService.SetSetting(settings, GetType().Namespace + ":Text", _text);
+                settings = SettingService.SetSetting(settings, GetType().Namespace + ":Border", _border);
+                await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
+            }
+            catch (Exception ex)
+            {
+                ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            }
         }
     }
-
-    public async Task UpdateSettings()
-    {
-        try
-        {
-            var settings = ModuleState.Settings;
-            settings = SettingService.SetSetting(settings, GetType().Namespace + ":Title", _title);
-            settings = SettingService.SetSetting(settings, GetType().Namespace + ":Background", _background);
-            settings = SettingService.SetSetting(settings, GetType().Namespace + ":Text", _text);
-            settings = SettingService.SetSetting(settings, GetType().Namespace + ":Border", _border);
-            await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
-        }
-        catch (Exception ex)
-        {
-            ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
-        }
-    }
-}
diff --git a/Oqtane.Client/Themes/OqtaneTheme/Themes/ThemeSettings.razor b/Oqtane.Client/Themes/OqtaneTheme/Themes/ThemeSettings.razor
index 2b5d56b6..407a5c99 100644
--- a/Oqtane.Client/Themes/OqtaneTheme/Themes/ThemeSettings.razor
+++ b/Oqtane.Client/Themes/OqtaneTheme/Themes/ThemeSettings.razor
@@ -4,46 +4,45 @@
 @inject ISettingService SettingService
 @attribute [OqtaneIgnore]
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="footer" ResourceKey="Footer" HelpText="Specify If A Footer Should Always Be Displayed In A Fixed Location At The Bottom Of The Browser Window">Display Fixed Footer?</Label>
-        </td>
-        <td>
-            <select id="footer" class="form-select" @bind="@_footer">
-                <option value="true">Yes</option>
-                <option value="false">No</option>
-            </select>
-        </td>
-    </tr>
-</table>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="footer" ResourceKey="Footer" HelpText="Specify If A Footer Should Always Be Displayed In A Fixed Location At The Bottom Of The Browser Window">Display Fixed Footer?</Label>
+            <div class="col-sm-9">
+                <select id="footer" class="form-select" @bind="@_footer">
+                    <option value="true">Yes</option>
+                    <option value="false">No</option>
+                </select>
+            </div>
+        </div>
+    </div>
 
-@code {
-    private string _footer = "false";
 
-    protected override void OnInitialized()
-    {
-        try
+    @code {
+        private string _footer = "false";
+
+        protected override void OnInitialized()
         {
-            _footer = SettingService.GetSetting(PageState.Page.Settings, GetType().Namespace + ":Footer", "false");
+            try
+            {
+                _footer = SettingService.GetSetting(PageState.Page.Settings, GetType().Namespace + ":Footer", "false");
+            }
+            catch (Exception ex)
+            {
+                ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            }
         }
-        catch (Exception ex)
+
+        public async Task UpdateSettings()
         {
-            ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            try
+            {
+                var settings = PageState.Page.Settings;
+                settings = SettingService.SetSetting(settings, GetType().Namespace + ":Footer", _footer);
+                await SettingService.UpdatePageSettingsAsync(settings, PageState.Page.PageId);
+            }
+            catch (Exception ex)
+            {
+                ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
+            }
         }
     }
-
-    public async Task UpdateSettings()
-    {
-        try
-        {
-            var settings = PageState.Page.Settings;
-            settings = SettingService.SetSetting(settings, GetType().Namespace + ":Footer", _footer);
-            await SettingService.UpdatePageSettingsAsync(settings, PageState.Page.PageId);
-        }
-        catch (Exception ex)
-        {
-            ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
-        }
-    }
-}