bootstrap v5.3.3 upgrade + demos + docs update (#729)

* Blazor 5.3.3 upgrade + Modal close "X" button with bootstrap 5.3.3 #714

* Demos and Docs update

Author: gvreddy04

BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml

@@ -13,7 +13,7 @@
     <base href="~/" />
     <link href="images/logo/128X128.png" rel="icon" type="image/png" />
     <!-- CSS only -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected].3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vs.min.css" integrity="sha512-Jn4HzkCnzA7Bc+lbSQHAMeen0EhSTy71o9yJbXZtQx9VvozKVBV/2zfR3VyuDFIxGvHgbOMMNvb80l+jxFBC1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
@@ -48,7 +48,7 @@
     <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
 
     <script src="_framework/blazor.webassembly.js" autostart="false" asp-append-version="true"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <!-- Add chart.js reference if chart components are used in your application. -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->

BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor

@@ -16,7 +16,7 @@
     The <code>Accordion</code> component uses the <code>Collapse</code> component internally to make it collapsible.
 </div>
 
-<Callout Type="CalloutType.Info">
+<Callout Color="CalloutColor.Info">
     The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. <br />
     See the <a href="https://getbootstrap.com/docs/5.3/getting-started/accessibility/#reduced-motion" target="_blank">reduced motion section of our accessibility documentation</a>.
 </Callout>
@@ -41,7 +41,7 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Set default active accordion item" PageUrl="@pageUrl" HashTagName="set-default-active-accordion-item" />
 <div class="mb-3">
-    Set the <code>IsActive</code> parameter to <code>true</code> to keep the accordion item open by default.
+    Set the <code>Active</code> parameter to <code>true</code> to keep the accordion item open by default.
 </div>
 <Demo Type="typeof(Accordion_Demo_04_Set_Default_Active)" Tabs="true" />
 
@@ -97,7 +97,7 @@
             </tr>
         </tbody>
     </table>
-    <Callout Type="CalloutType.Info">
+    <Callout Type="CalloutColor.Info">
         If no accordion item is active, then the <code>OnHiding</code> and <code>OnHidden</code> events will not be fired.
     </Callout>
 </div>

BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_04_Set_Default_Active.razor

@@ -4,7 +4,7 @@
             <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
         </Content>
     </AccordionItem>
-    <AccordionItem Title="Accordion Item #2" IsActive="true">
+    <AccordionItem Title="Accordion Item #2" Active="true">
         <Content>
             <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
         </Content>

BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor

@@ -13,28 +13,32 @@
 <div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
 <Demo Type="typeof(Alert_Demo_01_Examples)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Link color" PageUrl="@pageUrl" HashTagName="link-color" />
+<div class="mb-3">Use the <code>alert-link</code> css class to quickly provide matching colored links within any alert.</div>
+<Demo Type="typeof(Alert_Demo_02_Link_Color)" Tabs="true" />
+
 <SectionHeading Size="HeadingSize.H2" Text="Additional Content" PageUrl="@pageUrl" HashTagName="additional-content" />
 <div class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</div>
-<Demo Type="typeof(Alert_Demo_02_Additional_Content)" Tabs="false" />
+<Demo Type="typeof(Alert_Demo_03_Additional_Content)" Tabs="false" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Icons" PageUrl="@pageUrl" HashTagName="icons" />
 <div class="mb-3">Similarly, you can use Bootstrap Icons to create alerts with icons.</div>
-<Demo Type="typeof(Alert_Demo_03_Icons)" Tabs="true" />
+<Demo Type="typeof(Alert_Demo_04_Icons)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Dismissing" PageUrl="@pageUrl" HashTagName="dismissing" />
 <div class="mb-3">1. Using the <code>Dismissable="true"</code>, it’s possible to dismiss any alert inline.</div>
-<Demo Type="typeof(Alert_Demo_04_Dismissing_A)" Tabs="true" />
+<Demo Type="typeof(Alert_Demo_05_Dismissing_A)" Tabs="true" />
 
 <div class="my-3">2. Manually we can close an alert with button click.</div>
-<Demo Type="typeof(Alert_Demo_04_Dismissing_B)" Tabs="true" />
+<Demo Type="typeof(Alert_Demo_05_Dismissing_B)" Tabs="true" />
 
-<Callout Color="CalloutType.Warning">
+<Callout Color="CalloutColor.Warning">
     When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document.
     For this reason, we recommend subscribing to the <code>OnClosed</code> callback event and programmatically sets focus to the most appropriate location on the page.
 </Callout>
 
 <SectionHeading Size="HeadingSize.H2" Text="Switch alert type dynamically" PageUrl="@pageUrl" HashTagName="switch-alert-type-dynamically" />
-<Demo Type="typeof(Alert_Demo_05_Switch_Alert_Type_Dynamically)" Tabs="true" />
+<Demo Type="typeof(Alert_Demo_06_Switch_Alert_Type_Dynamically)" Tabs="true" />
 
 @code{
     private string pageUrl = "/alerts";

BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_01_Examples.razor

@@ -5,4 +5,4 @@
 <Alert Color="AlertColor.Warning"> A simple warning alert - check it out! </Alert>
 <Alert Color="AlertColor.Info"> A simple info alert - check it out! </Alert>
 <Alert Color="AlertColor.Light"> A simple light alert - check it out! </Alert>
-<Alert Color="AlertColor.Dark"> A simple dark alert - check it out! </Alert>
+<Alert Color="AlertColor.Dark"> A simple dark alert - check it out! </Alert>

BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_02_Link_Color.razor

@@ -0,0 +1,31 @@
+<Alert Color="AlertColor.Primary">
+    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>
+
+<Alert Color="AlertColor.Secondary">
+    A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>
+
+<Alert Color="AlertColor.Success">
+    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>
+
+<Alert Color="AlertColor.Danger">
+    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>
+
+<Alert Color="AlertColor.Warning">
+    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>
+
+<Alert Color="AlertColor.Info">
+    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>
+
+<Alert Color="AlertColor.Light">
+    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>
+
+<Alert Color="AlertColor.Dark">
+    A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</Alert>