diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 91033c22fce2..5792a2242bbb 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -10,6 +10,7 @@ import { useActivityStore } from "@/stores/activityStore";
 import type { Activity } from "@/stores/activityStoreTypes";
 import { useUnprivilegedToolStore } from "@/stores/unprivilegedToolStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 
 const props = defineProps<{
@@ -143,7 +144,7 @@ function executeActivity(activity: Activity) {
             </button>
         </div>
         <div v-else>
-            <b-alert v-localize class="py-1 px-2" show> No matching activities found. </b-alert>
+            <GAlert v-localize class="py-1 px-2" show> No matching activities found. </GAlert>
         </div>
     </div>
 </template>
diff --git a/client/src/components/Alert.vue b/client/src/components/Alert.vue
index 232e1d54f67e..ebe2588b3cdf 100644
--- a/client/src/components/Alert.vue
+++ b/client/src/components/Alert.vue
@@ -1,12 +1,15 @@
 <template>
-    <b-alert :variant="galaxyKwdToBootstrap" :show="showP" v-bind="$props">
+    <GAlert :variant="galaxyKwdToBootstrap" :show="showP" v-bind="$props">
         <!-- @slot Message to display in alert -->
         <slot> {{ message }} </slot>
-    </b-alert>
+    </GAlert>
 </template>
 
 <script>
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 export default {
+    components: { GAlert },
     props: {
         /**
          * Message to display in the alert
diff --git a/client/src/components/BaseComponents/GAlert.test.ts b/client/src/components/BaseComponents/GAlert.test.ts
new file mode 100644
index 000000000000..d1e46c84b4c7
--- /dev/null
+++ b/client/src/components/BaseComponents/GAlert.test.ts
@@ -0,0 +1,78 @@
+import { getLocalVue } from "@tests/vitest/helpers";
+import { mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import GAlert from "./GAlert.vue";
+
+const localVue = getLocalVue();
+
+describe("GAlert", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it("self-dismisses when closed", async () => {
+        const wrapper = mount(GAlert as object, {
+            localVue,
+            propsData: {
+                dismissible: true,
+            },
+            slots: {
+                default: "Dismiss me",
+            },
+        });
+
+        expect(wrapper.find(".alert").exists()).toBe(true);
+
+        await wrapper.find("button.close").trigger("click");
+
+        expect(wrapper.find(".alert").exists()).toBe(false);
+        expect(wrapper.emitted("dismissed")).toHaveLength(1);
+        expect(wrapper.emitted("input")?.[0]).toEqual([false]);
+        expect(wrapper.emitted("update:show")?.[0]).toEqual([false]);
+    });
+
+    it("uses default v-model value before the show default", async () => {
+        const wrapper = mount(GAlert as object, {
+            localVue,
+            propsData: {
+                value: false,
+            },
+        });
+
+        expect(wrapper.find(".alert").exists()).toBe(false);
+
+        await wrapper.setProps({ value: true });
+
+        expect(wrapper.find(".alert").exists()).toBe(true);
+    });
+
+    it("counts down numeric show values", async () => {
+        const wrapper = mount(GAlert as object, {
+            localVue,
+            propsData: {
+                show: 2,
+            },
+        });
+
+        expect(wrapper.find(".alert").exists()).toBe(true);
+        expect(wrapper.emitted("dismiss-count-down")?.map(([count]) => count)).toEqual([2]);
+
+        vi.advanceTimersByTime(1000);
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.find(".alert").exists()).toBe(true);
+        expect(wrapper.emitted("dismiss-count-down")?.map(([count]) => count)).toEqual([2, 1]);
+
+        vi.advanceTimersByTime(1000);
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.find(".alert").exists()).toBe(false);
+        expect(wrapper.emitted("dismiss-count-down")?.map(([count]) => count)).toEqual([2, 1, 0]);
+        expect(wrapper.emitted("dismissed")).toHaveLength(1);
+    });
+});
diff --git a/client/src/components/BaseComponents/GAlert.vue b/client/src/components/BaseComponents/GAlert.vue
index ed05016b4965..e0181d4894fd 100644
--- a/client/src/components/BaseComponents/GAlert.vue
+++ b/client/src/components/BaseComponents/GAlert.vue
@@ -5,15 +5,24 @@
  * `<div class="alert alert-{variant}">` markup the existing bootstrap CSS expects.
  */
 
-import { computed, ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 
 type AlertVariant = "info" | "warning" | "danger" | "success" | "primary" | "secondary" | "light" | "dark";
+// `string & {}` keeps IDE autocomplete for the recommended variants while still accepting arbitrary
+// strings (and null) -- mirrors BAlert's permissive prop typing so existing call sites don't have
+// to cast. Null/empty variants fall back to the default `info` style.
+type AlertVariantProp = AlertVariant | (string & {}) | null;
+type AlertShow = boolean | number | string | null;
 
 interface Props {
     /** Controls alert visibility */
-    show?: boolean;
+    show?: AlertShow;
+    /** Vue 2 default v-model value */
+    value?: AlertShow;
+    /** Vue 3 default v-model value */
+    modelValue?: AlertShow;
     /** Bootstrap contextual variant */
-    variant?: AlertVariant;
+    variant?: AlertVariantProp;
     /** Render a close button */
     dismissible?: boolean;
     /** Aria label for the dismiss button */
@@ -24,6 +33,8 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     show: true,
+    value: undefined,
+    modelValue: undefined,
     variant: "info",
     dismissible: false,
     dismissLabel: "Close",
@@ -32,28 +43,138 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
     (e: "dismissed"): void;
-    (e: "update:show", show: boolean): void;
+    (e: "dismiss-count-down", count: number): void;
+    (e: "input", show: AlertShow): void;
+    (e: "update:modelValue", show: AlertShow): void;
+    (e: "update:show", show: AlertShow): void;
 }>();
 
-const variantClass = computed(() => `alert-${props.variant}`);
+const variantClass = computed(() => `alert-${props.variant || "info"}`);
 
-// Mirror BAlert's localShow behavior so `dismissible` works without a parent
-// handler -- the close button hides the alert locally, and a subsequent
-// `show` prop change re-syncs.
-const localShow = ref<boolean>(props.show);
+const boundShow = computed<AlertShow>(() => {
+    if (props.value !== undefined) {
+        return props.value;
+    }
+    if (props.modelValue !== undefined) {
+        return props.modelValue;
+    }
+    return props.show;
+});
+
+const countDown = ref(0);
+const localShow = ref(parseShow(boundShow.value));
+let countDownTimeout: ReturnType<typeof setTimeout> | undefined;
+
+function parseCountDown(show: AlertShow | undefined) {
+    if (show === "" || show === null || show === undefined || typeof show === "boolean") {
+        return 0;
+    }
+
+    const count = Number.parseInt(String(show), 10);
+    return count > 0 ? count : 0;
+}
+
+function parseShow(show: AlertShow | undefined) {
+    if (show === "" || show === true) {
+        return true;
+    }
+
+    if (show === null || show === undefined || show === false) {
+        return false;
+    }
+
+    const count = Number.parseInt(String(show), 10);
+    if (!Number.isFinite(count) || count < 1) {
+        return false;
+    }
+
+    return Boolean(show);
+}
+
+function hasNumericShow(show: AlertShow | undefined) {
+    if (show === "" || show === null || show === undefined || typeof show === "boolean") {
+        return false;
+    }
+    return Number.isFinite(Number(show));
+}
+
+function emitModel(show: AlertShow) {
+    emit("input", show);
+    emit("update:modelValue", show);
+    emit("update:show", show);
+}
+
+function clearCountDownTimeout() {
+    if (countDownTimeout) {
+        clearTimeout(countDownTimeout);
+        countDownTimeout = undefined;
+    }
+}
+
+function setLocalShow(show: boolean) {
+    const wasShown = localShow.value;
+    localShow.value = show;
+
+    if (!show && wasShown && (props.dismissible || hasNumericShow(boundShow.value))) {
+        emit("dismissed");
+    }
+}
 
 watch(
-    () => props.show,
+    boundShow,
     (next) => {
-        localShow.value = next;
+        const nextCountDown = parseCountDown(next);
+        countDown.value = nextCountDown;
+        setLocalShow(parseShow(next));
+
+        if (!hasNumericShow(next)) {
+            clearCountDownTimeout();
+        }
     },
+    { immediate: true },
+);
+
+watch(
+    countDown,
+    (next) => {
+        clearCountDownTimeout();
+
+        if (!hasNumericShow(boundShow.value)) {
+            return;
+        }
+
+        emit("dismiss-count-down", next);
+        emitModel(next);
+
+        if (next > 0) {
+            setLocalShow(true);
+            countDownTimeout = setTimeout(() => {
+                countDown.value -= 1;
+            }, 1000);
+        } else {
+            setLocalShow(false);
+        }
+    },
+    { immediate: true },
 );
 
 function onDismiss() {
-    localShow.value = false;
-    emit("update:show", false);
-    emit("dismissed");
+    clearCountDownTimeout();
+    if (hasNumericShow(boundShow.value)) {
+        countDown.value = 0;
+    } else {
+        emitModel(false);
+    }
+    setLocalShow(false);
 }
+
+onBeforeUnmount(clearCountDownTimeout);
+</script>
+
+<script lang="ts">
+export default {
+    name: "GAlert",
+};
 </script>
 
 <template>
diff --git a/client/src/components/Collections/BuildFileSetWizard.vue b/client/src/components/Collections/BuildFileSetWizard.vue
index 23a7df4b5288..911f05b0e7f2 100644
--- a/client/src/components/Collections/BuildFileSetWizard.vue
+++ b/client/src/components/Collections/BuildFileSetWizard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCardGroup } from "bootstrap-vue";
+import { BCardGroup } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -36,6 +36,7 @@ import SourceFromPastedData from "./wizard/SourceFromPastedData.vue";
 import SourceFromRemoteFiles from "./wizard/SourceFromRemoteFiles.vue";
 import SourceFromWorkbook from "./wizard/SourceFromWorkbook.vue";
 import UploadFetchWorkbook from "./wizard/UploadFetchWorkbook.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
 import RuleCollectionBuilder from "@/components/RuleCollectionBuilder.vue";
 
@@ -265,14 +266,14 @@ const {
         class="rule-based-import-wizard"
         @submit="submit">
         <template v-slot:header>
-            <BAlert
+            <GAlert
                 :show="!!uploadErrorMessage"
                 variant="danger"
                 class="my-2"
                 dismissible
                 @dismissed="uploadErrorMessage = ''">
                 {{ uploadErrorMessage }}
-            </BAlert>
+            </GAlert>
             <h2 data-galaxy-file-drop-target>
                 {{ title }}
                 <a v-g-tooltip.hover aria-label="Upload Completed Workbook" :title="dropWorkbookTitle" href="#">
diff --git a/client/src/components/Collections/CollectionCreatorIndex.vue b/client/src/components/Collections/CollectionCreatorIndex.vue
index b77a5a54697f..6c22ed1fefb5 100644
--- a/client/src/components/Collections/CollectionCreatorIndex.vue
+++ b/client/src/components/Collections/CollectionCreatorIndex.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faCheckCircle, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BLink } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { type CreateNewCollectionPayload, type HDCASummary, type HistoryItemSummary, isHDCA } from "@/api";
@@ -21,6 +21,7 @@ import ListCollectionCreator from "./ListCollectionCreator.vue";
 import PairCollectionCreator from "./PairCollectionCreator.vue";
 import PairedOrUnpairedListCollectionCreator from "./PairedOrUnpairedListCollectionCreator.vue";
 import SampleSheetCollectionCreator from "./SampleSheetCollectionCreator.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 import GenericItem from "@/components/History/Content/GenericItem.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -222,28 +223,28 @@ defineExpose({ redrawCreator });
             </Heading>
         </template>
 
-        <BAlert v-if="isFetchingItems && !initialFetch" variant="info" show>
+        <GAlert v-if="isFetchingItems && !initialFetch" variant="info" show>
             <LoadingSpan :message="localize('Loading items')" />
-        </BAlert>
-        <BAlert v-else-if="!fromSelection && historyItemsError" variant="danger" show>
+        </GAlert>
+        <GAlert v-else-if="!fromSelection && historyItemsError" variant="danger" show>
             {{ historyItemsError }}
-        </BAlert>
-        <BAlert v-else-if="creatingCollection" variant="info" show>
+        </GAlert>
+        <GAlert v-else-if="creatingCollection" variant="info" show>
             <LoadingSpan :message="localize('Creating collection')" />
-        </BAlert>
-        <BAlert v-else-if="createCollectionError" variant="danger" show>
+        </GAlert>
+        <GAlert v-else-if="createCollectionError" variant="danger" show>
             {{ createCollectionError }}
             <BLink class="text-decoration-none" @click.stop.prevent="resetCreator">
                 <FontAwesomeIcon :icon="faUndo" fixed-width />
                 {{ localize("Try again") }}
             </BLink>
-        </BAlert>
+        </GAlert>
         <div v-else-if="createdCollection">
-            <BAlert v-if="!createdCollectionInReadyState" variant="info" show>
+            <GAlert v-if="!createdCollectionInReadyState" variant="info" show>
                 <LoadingSpan :message="localize('Waiting for collection to be ready')" />
-            </BAlert>
+            </GAlert>
             <template v-else>
-                <BAlert variant="success" show>
+                <GAlert variant="success" show>
                     <FontAwesomeIcon :icon="faCheckCircle" class="text-success" fixed-width />
                     {{ localize("Collection created successfully.") }}
                     {{ localize("It might still not be a valid input based on individual element properties.") }}
@@ -252,7 +253,7 @@ defineExpose({ redrawCreator });
                         <FontAwesomeIcon :icon="faUndo" fixed-width />
                         {{ localize("Create another collection") }}
                     </BLink>
-                </BAlert>
+                </GAlert>
 
                 <GenericItem
                     v-if="createdCollection.history_content_type === 'dataset_collection'"
diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index 002f501970a8..6653c37fb7cf 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -2,7 +2,6 @@
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faMinus, faSortAlphaDown, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 import draggable from "vuedraggable";
 
@@ -18,6 +17,7 @@ import GButton from "../BaseComponents/GButton.vue";
 import GButtonGroup from "../BaseComponents/GButtonGroup.vue";
 import FormSelectMany from "../Form/Elements/FormSelectMany/FormSelectMany.vue";
 import HelpText from "../Help/HelpText.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 import DatasetCollectionElementView from "@/components/Collections/ListDatasetCollectionElementView.vue";
 
@@ -374,24 +374,24 @@ function selectionAsHdaSummary(value: any): HDASummary {
 <template>
     <div class="list-collection-creator">
         <div v-if="!showDuplicateError && state == 'error'">
-            <BAlert show variant="danger">
+            <GAlert show variant="danger">
                 {{ localize("There was a problem creating the collection.") }}
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else>
             <div v-if="fromSelection && returnInvalidElementsLength">
-                <BAlert show variant="warning" dismissible>
+                <GAlert show variant="warning" dismissible>
                     {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
                         <li v-for="problem in returnInvalidElements" :key="problem">
                             {{ problem }}
                         </li>
                     </ul>
-                </BAlert>
+                </GAlert>
             </div>
 
             <div v-if="!atLeastOneElement">
-                <BAlert show variant="warning" dismissible @dismissed="atLeastOneElement = true">
+                <GAlert show variant="warning" dismissible @dismissed="atLeastOneElement = true">
                     {{ localize("At least one element is needed for the list.") }}
                     <span v-if="fromSelection">
                         <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
@@ -399,11 +399,11 @@ function selectionAsHdaSummary(value: any): HDASummary {
                         </a>
                         {{ localize("and reselect new elements.") }}
                     </span>
-                </BAlert>
+                </GAlert>
             </div>
 
             <div v-if="showDuplicateError">
-                <BAlert show variant="danger">
+                <GAlert show variant="danger">
                     {{
                         localize("Collections cannot have duplicated names. The following list names are duplicated: ")
                     }}
@@ -411,7 +411,7 @@ function selectionAsHdaSummary(value: any): HDASummary {
                         <li v-for="name in duplicateNames" :key="name">{{ name }}</li>
                     </ol>
                     {{ localize("Please fix these duplicates and try again.") }}
-                </BAlert>
+                </GAlert>
             </div>
 
             <CollectionCreator
@@ -538,26 +538,26 @@ function selectionAsHdaSummary(value: any): HDASummary {
                 </template>
 
                 <template v-slot:middle-content>
-                    <BAlert v-if="listHasMixedExtensions" show variant="warning" dismissible>
+                    <GAlert v-if="listHasMixedExtensions" show variant="warning" dismissible>
                         {{ localize("The selected datasets have mixed formats.") }}
                         {{ localize("You can still create the list but generally") }}
                         {{ localize("dataset lists should contain datasets of the same type.") }}
                         <HelpText
                             uri="galaxy.collections.collectionBuilder.whyHomogenousCollections"
                             :text="localize('Why?')" />
-                    </BAlert>
+                    </GAlert>
                     <div v-if="noInitialElements">
-                        <BAlert show variant="warning" dismissible>
+                        <GAlert show variant="warning" dismissible>
                             {{ localize("No datasets were selected") }}
                             {{ localize("At least one element is needed for the collection. You may need to") }}
                             <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                                 {{ localize("cancel") }}
                             </a>
                             {{ localize("and reselect new elements, or upload datasets.") }}
-                        </BAlert>
+                        </GAlert>
                     </div>
                     <div v-else-if="allElementsAreInvalid">
-                        <BAlert v-if="!fromSelection" show variant="warning">
+                        <GAlert v-if="!fromSelection" show variant="warning">
                             {{
                                 localize(
                                     "No elements in your history are valid for this list. \
@@ -572,8 +572,8 @@ function selectionAsHdaSummary(value: any): HDASummary {
                                     </li>
                                 </ul>
                             </div>
-                        </BAlert>
-                        <BAlert v-else show variant="warning" dismissible>
+                        </GAlert>
+                        <GAlert v-else show variant="warning" dismissible>
                             {{ localize("The following selections could not be included due to problems:") }}
                             <ul>
                                 <li v-for="problem in returnInvalidElements" :key="problem">
@@ -585,7 +585,7 @@ function selectionAsHdaSummary(value: any): HDASummary {
                                 {{ localize("cancel") }}
                             </a>
                             {{ localize("and reselect new elements, or upload valid datasets.") }}
-                        </BAlert>
+                        </GAlert>
                     </div>
                     <div v-else-if="fromSelection">
                         <div class="collection-elements-controls">
@@ -649,13 +649,13 @@ function selectionAsHdaSummary(value: any): HDASummary {
                         </div>
 
                         <div v-if="noMoreValidDatasets">
-                            <BAlert show variant="warning">
+                            <GAlert show variant="warning">
                                 {{ localize("No elements left. Would you like to") }}
                                 <a class="reset-text" href="javascript:void(0)" role="button" @click="reset">
                                     {{ localize("start over") }}
                                 </a>
                                 ?
-                            </BAlert>
+                            </GAlert>
                         </div>
 
                         <draggable
diff --git a/client/src/components/Collections/ListWizard.vue b/client/src/components/Collections/ListWizard.vue
index 69f396121b21..8a1e23632724 100644
--- a/client/src/components/Collections/ListWizard.vue
+++ b/client/src/components/Collections/ListWizard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref, watch } from "vue";
 
@@ -25,6 +24,7 @@ import LoadingSpan from "../LoadingSpan.vue";
 import ListCollectionCreator from "./ListCollectionCreator.vue";
 import WhichBuilder from "./ListWizard/WhichBuilder.vue";
 import PairedOrUnpairedListCollectionCreator from "./PairedOrUnpairedListCollectionCreator.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
 import RuleCollectionBuilder from "@/components/RuleCollectionBuilder.vue";
 
@@ -213,22 +213,22 @@ function onRuleState(newRuleState: boolean) {
             <i class="d-flex align-items-center"> {{ selectedItems.length }} datasets selected </i>
         </BreadcrumbHeading>
         <div v-if="creationError">
-            <BAlert variant="danger" show>
+            <GAlert variant="danger" show>
                 {{ creationError }}
-            </BAlert>
+            </GAlert>
         </div>
         <div v-if="collectionCreated">
-            <BAlert variant="success" show> Collection created and it has been added to your history. </BAlert>
+            <GAlert variant="success" show> Collection created and it has been added to your history. </GAlert>
         </div>
         <div v-else-if="!selectedItems">
-            <BAlert variant="info" show>
+            <GAlert variant="info" show>
                 <LoadingSpan />
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else-if="selectedItems.length == 0">
-            <BAlert variant="info" show>
+            <GAlert variant="info" show>
                 Select datasets from the history panel to use the Galaxy list building wizard.
-            </BAlert>
+            </GAlert>
         </div>
         <GenericWizard v-else :use="wizard" :is-busy="isBusy" :submit-button-label="buildButtonLabel" @submit="submit">
             <div v-if="wizard.isCurrent('which-builder')">
@@ -288,6 +288,6 @@ function onRuleState(newRuleState: boolean) {
         </GenericWizard>
     </div>
     <div v-else>
-        <BAlert show> Select datasets from the history panel to use the Galaxy list building wizard. </BAlert>
+        <GAlert show> Select datasets from the history panel to use the Galaxy list building wizard. </GAlert>
     </div>
 </template>
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 22593d92c3c7..69b71d887258 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faArrowsAltV } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import type { CollectionElementIdentifiers, CreateNewCollectionPayload, HDASummary, HistoryItemSummary } from "@/api";
@@ -18,6 +17,7 @@ import DelayedInput from "../Common/DelayedInput.vue";
 import HelpText from "../Help/HelpText.vue";
 import FixedIdentifierDatasetCollectionElementView from "./FixedIdentifierDatasetCollectionElementView.vue";
 import DatasetCollectionElementView from "./ListDatasetCollectionElementView.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
 const NOT_VALID_ELEMENT_MSG: string = localize("is not a valid element for this collection");
@@ -299,20 +299,20 @@ function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: b
 <template>
     <div class="pair-collection-creator">
         <div v-if="state == 'error'">
-            <BAlert show variant="danger">
+            <GAlert show variant="danger">
                 {{ localize("Galaxy could not be reached and may be updating.  Try again in a few minutes.") }}
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else>
             <div v-if="fromSelection && invalidElements.length">
-                <BAlert show variant="warning" dismissible>
+                <GAlert show variant="warning" dismissible>
                     {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
                         <li v-for="problem in invalidElements" :key="problem">
                             {{ problem }}
                         </li>
                     </ul>
-                </BAlert>
+                </GAlert>
             </div>
 
             <CollectionCreator
@@ -385,17 +385,17 @@ function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: b
 
                 <template v-slot:middle-content>
                     <div v-if="noElementsSelected">
-                        <BAlert show variant="warning" dismissible>
+                        <GAlert show variant="warning" dismissible>
                             {{ localize("No datasets were selected.") }}
                             {{ localize("Exactly two elements needed for the collection. You may need to") }}
                             <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                                 {{ localize("cancel") }}
                             </a>
                             {{ localize("and reselect new elements, or upload datasets.") }}
-                        </BAlert>
+                        </GAlert>
                     </div>
                     <div v-else-if="allElementsAreInvalid">
-                        <BAlert v-if="!fromSelection" show variant="warning">
+                        <GAlert v-if="!fromSelection" show variant="warning">
                             {{
                                 localize(
                                     "No elements in your history are valid for this pair. \
@@ -410,8 +410,8 @@ function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: b
                                     </li>
                                 </ul>
                             </div>
-                        </BAlert>
-                        <BAlert v-else show variant="warning" dismissible>
+                        </GAlert>
+                        <GAlert v-else show variant="warning" dismissible>
                             {{ localize("The following selections could not be included due to problems:") }}
                             <ul>
                                 <li v-for="problem in invalidElements" :key="problem">
@@ -423,7 +423,7 @@ function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: b
                                 {{ localize("cancel") }}
                             </a>
                             {{ localize("and reselect new elements, or upload datasets.") }}
-                        </BAlert>
+                        </GAlert>
                     </div>
                     <div v-else>
                         <div class="collection-elements-controls flex-gapx-1">
@@ -439,7 +439,7 @@ function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: b
                                 </GButton>
                             </div>
                             <div class="flex-grow-1">
-                                <BAlert v-if="!exactlyTwoValidElements" show variant="warning">
+                                <GAlert v-if="!exactlyTwoValidElements" show variant="warning">
                                     {{ localize("Exactly two elements are needed for the pair.") }}
                                     <span v-if="fromSelection">
                                         <a
@@ -451,19 +451,19 @@ function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: b
                                         </a>
                                         {{ localize("and reselect new elements.") }}
                                     </span>
-                                </BAlert>
-                                <BAlert v-else-if="pairHasMixedExtensions" show variant="warning">
+                                </GAlert>
+                                <GAlert v-else-if="pairHasMixedExtensions" show variant="warning">
                                     {{ localize("The selected datasets have mixed formats.") }}
                                     {{ localize("You can still create the pair but generally") }}
                                     {{ localize("dataset pairs should contain datasets of the same type.") }}
                                     <HelpText
                                         uri="galaxy.collections.collectionBuilder.whyHomogenousCollections"
                                         :text="localize('Why?')" />
-                                </BAlert>
-                                <BAlert v-else show variant="success">
+                                </GAlert>
+                                <GAlert v-else show variant="success">
                                     {{ localize("The Dataset Pair is ready to be created.") }}
                                     {{ localize("Provide a name and click the button below to create the pair.") }}
-                                </BAlert>
+                                </GAlert>
                             </div>
                         </div>
 
@@ -507,9 +507,9 @@ function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: b
                                         @onRename="(name) => (element.name = name)" />
                                 </div>
                             </div>
-                            <BAlert v-else show variant="info">
+                            <GAlert v-else show variant="info">
                                 {{ localize(`No datasets found${filterText ? " matching '" + filterText + "'" : ""}`) }}
-                            </BAlert>
+                            </GAlert>
                         </div>
                     </div>
                 </template>
diff --git a/client/src/components/Collections/PairedOrUnpairedListCollectionCreator.vue b/client/src/components/Collections/PairedOrUnpairedListCollectionCreator.vue
index 6fa8fda34d69..f4426c4ec315 100644
--- a/client/src/components/Collections/PairedOrUnpairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedOrUnpairedListCollectionCreator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColDef, GetRowIdParams, IRowDragItem, NewValueParams } from "ag-grid-community";
-import { BAlert, BCol, BLink, BRow } from "bootstrap-vue";
+import { BCol, BLink, BRow } from "bootstrap-vue";
 import { getActivePinia } from "pinia";
 import { computed, nextTick, ref } from "vue";
 
@@ -23,6 +23,7 @@ import { type AutoPairingResult, autoPairWithCommonFilters, guessNameForPair } f
 
 import AutoPairing from "./common/AutoPairing.vue";
 import PairedOrUnpairedListCreatorHelp from "./PairedOrUnpairedListCreatorHelp.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
 type CollectionElementIdentifier = components["schemas"]["CollectionElementIdentifier"];
@@ -754,17 +755,17 @@ export default {
                 <div>
                     <BRow v-if="!flatLists">
                         <BCol>
-                            <BAlert show variant="info" dismissible>
+                            <GAlert show variant="info" dismissible>
                                 {{ summaryText }}
                                 If this isn't correct,
                                 <BLink style="font-weight: bold" @click="goToAutoPairing">configure auto-pairing</BLink
                                 >.
-                            </BAlert>
+                            </GAlert>
                         </BCol>
                     </BRow>
                     <BRow v-if="unpairedProblemDatasetCount > 0">
                         <BCol>
-                            <BAlert show variant="warning" dismissible>
+                            <GAlert show variant="warning" dismissible>
                                 {{ unpairedProblemDatasetCount }} unmatched datasets, these should be either dismissed
                                 or paired off.
                                 <BLink
@@ -773,7 +774,7 @@ export default {
                                     @click="dismissUnmatchedDatasets"
                                     >Click here to discard all remaining unpaired datasets.</BLink
                                 >
-                            </BAlert>
+                            </GAlert>
                         </BCol>
                     </BRow>
                     <div :style="style" :class="theme">
diff --git a/client/src/components/Collections/RulesStandalone.vue b/client/src/components/Collections/RulesStandalone.vue
index fa06e7a4f158..c18680aa6cb4 100644
--- a/client/src/components/Collections/RulesStandalone.vue
+++ b/client/src/components/Collections/RulesStandalone.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { BAlert, BContainer, BRow } from "bootstrap-vue";
+import { BContainer, BRow } from "bootstrap-vue";
 import { ref } from "vue";
 
 import { useConfig } from "@/composables/config";
 
 import BuildFileSetWizard from "./BuildFileSetWizard.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const { config, isConfigLoaded } = useConfig();
@@ -20,9 +21,9 @@ function onCreated() {
     <BContainer>
         <LoadingSpan v-if="!isConfigLoaded" />
         <BRow v-else-if="created">
-            <BAlert show variant="success" style="width: 100%">
+            <GAlert show variant="success" style="width: 100%">
                 Data imported and should be available in your history.
-            </BAlert>
+            </GAlert>
         </BRow>
         <div v-else>
             <BuildFileSetWizard
diff --git a/client/src/components/Collections/SampleSheetWizard.vue b/client/src/components/Collections/SampleSheetWizard.vue
index b8fa7622abd1..1fe4305a4f6b 100644
--- a/client/src/components/Collections/SampleSheetWizard.vue
+++ b/client/src/components/Collections/SampleSheetWizard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCardGroup, BLink } from "bootstrap-vue";
+import { BCardGroup, BLink } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, nextTick, ref, watch } from "vue";
 
@@ -40,6 +40,7 @@ import SourceFromPastedData from "./wizard/SourceFromPastedData.vue";
 import SourceFromRemoteFiles from "./wizard/SourceFromRemoteFiles.vue";
 import SourceFromWorkbook from "./wizard/SourceFromWorkbook.vue";
 import UploadSampleSheet from "./wizard/UploadSampleSheet.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -444,12 +445,12 @@ async function download() {
                 @workbookContents="handleUploadFromWizard" />
         </div>
         <div v-else-if="wizard.isCurrent('fill-grid') && currentHistoryId" style="width: 100%">
-            <BAlert v-if="collectionCreateError" show dismissible @dismissed="collectionCreateError = undefined">
+            <GAlert v-if="collectionCreateError" show dismissible @dismissed="collectionCreateError = undefined">
                 Failed to create sample sheet collection for supplied input. {{ collectionCreateError }}.
-            </BAlert>
+            </GAlert>
             <div v-if="collectionCreated">
-                <BAlert variant="success" data-description="collection created" show
-                    >Sample sheet collection successfully created!</BAlert
+                <GAlert variant="success" data-description="collection created" show
+                    >Sample sheet collection successfully created!</GAlert
                 >
             </div>
             <div v-else-if="waitingOnFetch">
diff --git a/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue b/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue
index e1fed5cae18c..426078cef2e9 100644
--- a/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue
+++ b/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import { BAlert, BLink } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 
 import localize from "@/utils/localization";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 const emit = defineEmits<{
     (e: "click-upload"): void;
 }>();
 </script>
 <template>
-    <BAlert variant="info" show>
+    <GAlert variant="info" show>
         {{ localize("No items available to create a collection.") }}
         {{ localize("Exit and change your current history, or") }}
         <BLink class="text-decoration-none" @click.stop.prevent="emit('click-upload')">
             {{ localize("Upload some datasets.") }}
         </BLink>
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue b/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue
index 14007a0ca787..c60d8a8aa33d 100644
--- a/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue
+++ b/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
-
 import localize from "@/utils/localization";
 import { orList } from "@/utils/strings";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
 interface Props {
@@ -16,7 +15,7 @@ defineProps<Props>();
 
 <template>
     <div class="d-flex align-items-center justify-content-between mt-2">
-        <BAlert
+        <GAlert
             v-if="extensions?.length"
             class="w-100 py-0 d-flex justify-content-between flex-gapx-1"
             variant="secondary"
@@ -30,6 +29,6 @@ defineProps<Props>();
                 <strong>{{ orList(extensions) }}</strong>
             </div>
             <HelpText uri="galaxy.datasets.formatVsDatatypeVsExtension" :text="localize('format?')" />
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index 5ce0188d22f6..c7798f7767f6 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -2,7 +2,6 @@
 import { faBars, faCog, faDatabase, faSave, faTable } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -17,6 +16,7 @@ import localize from "@/utils/localization";
 import { prependPath } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GTab from "@/components/BaseComponents/GTab.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
@@ -210,17 +210,17 @@ async function saveAttrs() {
             {{ localize("Edit Collection Attributes") }}
         </Heading>
 
-        <BAlert v-if="infoMessage" show variant="info" dismissible>
+        <GAlert v-if="infoMessage" show variant="info" dismissible>
             {{ localize(infoMessage) }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="errorMessage" show variant="danger">
+        <GAlert v-if="errorMessage" show variant="danger">
             {{ localize(errorMessage) }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="successMessage" show variant="success" dismissible>
+        <GAlert v-if="successMessage" show variant="success" dismissible>
             {{ localize(successMessage) }}
-        </BAlert>
+        </GAlert>
         <GTabs v-if="!errorMessage" class="mt-3">
             <GTab title-link-class="collection-edit-attributes-nav" @click="updateInfoMessage('')">
                 <template v-slot:title>
diff --git a/client/src/components/Collections/common/DisplayCollectionAsSheet.vue b/client/src/components/Collections/common/DisplayCollectionAsSheet.vue
index 491740d14479..9b3a2ebf2530 100644
--- a/client/src/components/Collections/common/DisplayCollectionAsSheet.vue
+++ b/client/src/components/Collections/common/DisplayCollectionAsSheet.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ColDef } from "ag-grid-community";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import type { SampleSheetColumnDefinitions } from "@/api";
@@ -12,6 +11,7 @@ import {
 import { useDetailedCollection } from "@/composables/datasetCollections";
 import { useAgGrid } from "@/composables/useAgGrid";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
@@ -95,9 +95,9 @@ const defaultColDef = ref<ColDef>({
 <template>
     <div>
         <LoadingSpan v-if="!collection" />
-        <BAlert v-else-if="collectionLoadError" variant="danger" show dismissible>
+        <GAlert v-else-if="collectionLoadError" variant="danger" show dismissible>
             {{ collectionLoadError }}
-        </BAlert>
+        </GAlert>
         <div v-else>
             <div :class="theme">
                 <AgGridVue
diff --git a/client/src/components/Collections/wizard/CardUploadWorkbook.vue b/client/src/components/Collections/wizard/CardUploadWorkbook.vue
index d6aebb6c138c..80623f25e26f 100644
--- a/client/src/components/Collections/wizard/CardUploadWorkbook.vue
+++ b/client/src/components/Collections/wizard/CardUploadWorkbook.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BCard, BCardTitle, BLink } from "bootstrap-vue";
+import { BCard, BCardTitle, BLink } from "bootstrap-vue";
 
 import { useWorkbookDropHandling } from "@/components/Collections/common/useWorkbooks";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 async function handleWorkbook(base64Content: string) {
     emit("workbookContents", base64Content);
 }
@@ -33,9 +35,9 @@ const emit = defineEmits(["workbookContents"]);
             <b>Step 3: Upload</b>
         </BCardTitle>
         <div v-if="uploadErrorMessage">
-            <BAlert variant="danger" show>
+            <GAlert variant="danger" show>
                 {{ uploadErrorMessage }}
-            </BAlert>
+            </GAlert>
         </div>
         <div>
             <BLink href="#" @click.prevent="browseFiles">
diff --git a/client/src/components/Collections/wizard/JaggedDataAlert.vue b/client/src/components/Collections/wizard/JaggedDataAlert.vue
index 75fa2ef95adc..81dd31c54c3c 100644
--- a/client/src/components/Collections/wizard/JaggedDataAlert.vue
+++ b/client/src/components/Collections/wizard/JaggedDataAlert.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 interface Props {
     jaggedDataWarning?: string;
@@ -10,8 +10,8 @@ defineProps<Props>();
 
 <template>
     <span>
-        <BAlert v-if="jaggedDataWarning" show variant="warning">
+        <GAlert v-if="jaggedDataWarning" show variant="warning">
             {{ jaggedDataWarning }}
-        </BAlert>
+        </GAlert>
     </span>
 </template>
diff --git a/client/src/components/Collections/wizard/SelectCollection.vue b/client/src/components/Collections/wizard/SelectCollection.vue
index cc6310b9308f..ff7bb409b7e4 100644
--- a/client/src/components/Collections/wizard/SelectCollection.vue
+++ b/client/src/components/Collections/wizard/SelectCollection.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { BAlert, BCard, BCardTitle } from "bootstrap-vue";
+import { BCard, BCardTitle } from "bootstrap-vue";
 import { onMounted, ref, watch } from "vue";
 
 import type { ExtendedCollectionType } from "@/components/Form/Elements/FormData/types";
 import type { SelectionItem } from "@/components/SelectionDialog/selectionTypes";
 import { datasetCollectionDialog } from "@/utils/dataModals";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 const emit = defineEmits(["onChange", "onError"]);
 const errorMessage = ref<string | undefined>(undefined);
 const targetCollection = ref<string | undefined>(undefined);
@@ -71,7 +73,7 @@ onMounted(() => {
             <b>Select collection</b>
         </BCardTitle>
         <div>
-            <BAlert v-if="errorMessage" show variant="danger">{{ errorMessage }}</BAlert>
+            <GAlert v-if="errorMessage" show variant="danger">{{ errorMessage }}</GAlert>
             Select a dataset collection, the contents will be loaded as tabular data and made available for supplying
             sample sheet metadata.
         </div>
diff --git a/client/src/components/Collections/wizard/SelectDataset.vue b/client/src/components/Collections/wizard/SelectDataset.vue
index ac30eabb8859..4979f662aee7 100644
--- a/client/src/components/Collections/wizard/SelectDataset.vue
+++ b/client/src/components/Collections/wizard/SelectDataset.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard, BCardTitle } from "bootstrap-vue";
+import { BCard, BCardTitle } from "bootstrap-vue";
 import { onMounted, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
@@ -8,6 +8,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import { urlData } from "@/utils/url";
 
 import JaggedDataAlert from "./JaggedDataAlert.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const emit = defineEmits(["onChange", "onError"]);
 const errorMessage = ref<string | undefined>(undefined);
@@ -57,7 +58,7 @@ watch(table, (newValue: string[][]) => {
             <b>Select dataset</b>
         </BCardTitle>
         <div>
-            <BAlert v-if="errorMessage" show variant="danger">{{ errorMessage }}</BAlert>
+            <GAlert v-if="errorMessage" show variant="danger">{{ errorMessage }}</GAlert>
             <JaggedDataAlert :jagged-data-warning="jaggedDataWarning" />
             Select a history datasets, the contents will be loaded as tabular data and made available to the rule based
             import utility.
diff --git a/client/src/components/Common/EmailReportForm.vue b/client/src/components/Common/EmailReportForm.vue
index efbfc3dc67c5..0e0288d1223e 100644
--- a/client/src/components/Common/EmailReportForm.vue
+++ b/client/src/components/Common/EmailReportForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faBug } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -14,6 +13,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import GButton from "../BaseComponents/GButton.vue";
 import GLink from "../BaseComponents/GLink.vue";
 import FormElement from "../Form/FormElement.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = defineProps<{
     submit: (message: string) => Promise<string[][] | undefined>;
@@ -58,16 +58,16 @@ async function submitEmail() {
 <template>
     <div>
         <h4 class="mb-3 h-md">Issue Report</h4>
-        <BAlert v-if="props.requireLogin && !userEmail" variant="info" show>
+        <GAlert v-if="props.requireLogin && !userEmail" variant="info" show>
             <span v-localize> You must be logged in to submit a report. </span>
             <GLink to="/login/start"> Please log in to continue. </GLink>
-        </BAlert>
+        </GAlert>
 
         <div v-else>
-            <BAlert v-for="(resultMessage, index) in resultMessages" :key="index" :variant="resultMessage[1]" show>
+            <GAlert v-for="(resultMessage, index) in resultMessages" :key="index" :variant="resultMessage[1]" show>
                 <!-- eslint-disable-next-line vue/no-v-html -->
                 <span v-html="renderMarkdown(resultMessage[0] ?? '')" />
-            </BAlert>
+            </GAlert>
 
             <div v-if="showForm" id="email-report-form">
                 <span class="mr-2 font-weight-bold">{{ localize("Your email address") }}</span>
diff --git a/client/src/components/Common/ExportRecordDetails.vue b/client/src/components/Common/ExportRecordDetails.vue
index 5b9ab02b3b51..24fb64030ed3 100644
--- a/client/src/components/Common/ExportRecordDetails.vue
+++ b/client/src/components/Common/ExportRecordDetails.vue
@@ -10,13 +10,13 @@ import {
     faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { ColorVariant } from "@/components/Common";
 import type { CardAction, CardBadge } from "@/components/Common/GCard.types";
 import type { ExportRecord } from "@/components/Common/models/exportRecordModel";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCard from "@/components/Common/GCard.vue";
 import Heading from "@/components/Common/Heading.vue";
 
@@ -152,7 +152,7 @@ function onMessageDismissed() {
                     administrator.
                 </span>
 
-                <BAlert :show="props.record.errorMessage" variant="danger">{{ props.record.errorMessage }}</BAlert>
+                <GAlert :show="props.record.errorMessage" variant="danger">{{ props.record.errorMessage }}</GAlert>
             </span>
             <span v-if="props.record.isUpToDate" title="Up to date">
                 <FontAwesomeIcon :icon="faCheckCircle" class="text-success record-up-to-date-icon" />
@@ -181,7 +181,7 @@ function onMessageDismissed() {
                 </span>
             </span>
 
-            <BAlert
+            <GAlert
                 v-if="props.actionMessage !== undefined"
                 :variant="props.actionMessageVariant"
                 show
@@ -189,7 +189,7 @@ function onMessageDismissed() {
                 dismissible
                 @dismissed="onMessageDismissed">
                 {{ props.actionMessage }}
-            </BAlert>
+            </GAlert>
         </template>
     </GCard>
 </template>
diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 4fb2851c12c7..33e6d63570a7 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { faEllipsisV, faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BDropdown, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
+import { BDropdown, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { BootstrapSize } from "@/components/Common";
@@ -18,6 +18,7 @@ import type {
     TableItemClassMeta,
 } from "./GTable.types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GOverlay from "@/components/BaseComponents/GOverlay.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -767,9 +768,9 @@ defineExpose({
                         <tr v-if="props.showEmpty && !props.items.length" class="g-table-empty-row">
                             <td :colspan="(selectable ? 1 : 0) + props.fields.length + (props.actions ? 1 : 0)">
                                 <slot name="empty">
-                                    <BAlert v-if="!loading" variant="info" show class="w-100 m-0">
+                                    <GAlert v-if="!loading" variant="info" show class="w-100 m-0">
                                         {{ props.emptyState?.message ?? "No data available" }}
-                                    </BAlert>
+                                    </GAlert>
                                 </slot>
                             </td>
                         </tr>
diff --git a/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue b/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue
index ba1ede6eacbc..7041d3cb0597 100644
--- a/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue
+++ b/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BLink } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 import { computed, watch } from "vue";
 
 import { useDownloadTracker } from "@/composables/downloadTracker";
@@ -10,6 +10,7 @@ import type { MonitoringRequest } from "@/composables/persistentProgressMonitor"
 import { usePersistentProgressTaskMonitor } from "@/composables/persistentProgressMonitor";
 import { useShortTermStorage } from "@/composables/shortTermStorage";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FileSourceNameSpan from "@/components/FileSources/FileSourceNameSpan.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
@@ -121,14 +122,14 @@ function dismissAlert() {
 
 <template>
     <div v-if="hasMonitoringData" class="progress-monitor-alert">
-        <BAlert v-if="hasExpired" variant="warning" show dismissible @dismissed="dismissAlert">
+        <GAlert v-if="hasExpired" variant="warning" show dismissible @dismissed="dismissAlert">
             The {{ monitorRequest.action }} task has <b>expired</b> and the result is no longer available.
-        </BAlert>
-        <BAlert v-else-if="isRunning" variant="info" show>
+        </GAlert>
+        <GAlert v-else-if="isRunning" variant="info" show>
             <b>{{ inProgressMessage }}</b>
             <FontAwesomeIcon :icon="faSpinner" class="mr-2" spin />
-        </BAlert>
-        <BAlert v-else-if="isCompleted" variant="success" show dismissible @dismissed="dismissAlert">
+        </GAlert>
+        <GAlert v-else-if="isCompleted" variant="success" show dismissible @dismissed="dismissAlert">
             <span>{{ completedMessage }}</span>
 
             <BLink v-if="downloadUrl" class="download-link" :href="downloadUrl">
@@ -145,15 +146,15 @@ function dismissAlert() {
             <span v-if="expirationDate">
                 This result will <b>expire <UtcDate :date="expirationDate.toISOString()" mode="elapsed" /></b>
             </span>
-        </BAlert>
-        <BAlert v-else-if="hasFailed" variant="danger" show dismissible @dismissed="dismissAlert">
+        </GAlert>
+        <GAlert v-else-if="hasFailed" variant="danger" show dismissible @dismissed="dismissAlert">
             <span>{{ failedMessage }}</span>
             <span v-if="failureReason">
                 Reason: <b>{{ failureReason }}</b>
             </span>
-        </BAlert>
-        <BAlert v-else-if="requestHasFailed" variant="danger" show dismissible @dismissed="dismissAlert">
+        </GAlert>
+        <GAlert v-else-if="requestHasFailed" variant="danger" show dismissible @dismissed="dismissAlert">
             <b>{{ requestFailedMessage }}</b>
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/Common/RDMCredentialsInfo.vue b/client/src/components/Common/RDMCredentialsInfo.vue
index 17267b4104a6..17247110da52 100644
--- a/client/src/components/Common/RDMCredentialsInfo.vue
+++ b/client/src/components/Common/RDMCredentialsInfo.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { RouterLink } from "vue-router";
 
 import type { BrowsableFilesSourcePlugin } from "@/api/remoteFiles";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface Props {
     selectedRepository?: BrowsableFilesSourcePlugin;
     isPrivateFileSource?: boolean;
@@ -18,7 +19,7 @@ const repositoryName = props.selectedRepository?.label ?? "the selected reposito
 </script>
 
 <template>
-    <BAlert show variant="info">
+    <GAlert show variant="info">
         If you haven't done it yet, you may need to setup your credentials for {{ repositoryName }}
 
         <span v-if="isPrivateFileSource && selectedRepository">
@@ -35,5 +36,5 @@ const repositoryName = props.selectedRepository?.label ?? "the selected reposito
         </span>
         to be able to export. You can also define some default options for the export in those settings, like the public
         name you want to associate with your records.
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/Common/RDMDestinationSelector.vue b/client/src/components/Common/RDMDestinationSelector.vue
index 8a4879ffbdc1..82065234c465 100644
--- a/client/src/components/Common/RDMDestinationSelector.vue
+++ b/client/src/components/Common/RDMDestinationSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard, BFormGroup, BFormInput, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
+import { BCard, BFormGroup, BFormInput, BFormRadio, BFormRadioGroup } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -9,6 +9,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import { fileSourcePluginToItem } from "../FilesDialog/utilities";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import ExternalLink from "@/components/ExternalLink.vue";
 import FilesInput from "@/components/FilesDialog/FilesInput.vue";
@@ -163,7 +164,7 @@ defineExpose({
                     You need to create the new record in a repository before exporting the {{ props.what }} to it.
                 </p>
 
-                <BAlert
+                <GAlert
                     v-if="errorCreatingRecord"
                     variant="danger"
                     show
@@ -171,7 +172,7 @@ defineExpose({
                     @dismissed="errorCreatingRecord = undefined">
                     An error occurred while creating the record:
                     {{ errorCreatingRecord }}
-                </BAlert>
+                </GAlert>
 
                 <GButton
                     id="create-record-button"
diff --git a/client/src/components/Common/VegaWrapper.vue b/client/src/components/Common/VegaWrapper.vue
index 4d9142a45e02..8142bb2f4497 100644
--- a/client/src/components/Common/VegaWrapper.vue
+++ b/client/src/components/Common/VegaWrapper.vue
@@ -1,8 +1,8 @@
 <template>
     <div ref="outerContainer" :style="fillWidth ? 'overflow: hidden' : undefined">
-        <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
+        <GAlert v-if="errorMessage" class="p-2" variant="danger" show>
             {{ errorMessage }}
-        </b-alert>
+        </GAlert>
         <div ref="chartContainer" :class="fillWidth && 'w-100'" />
     </div>
 </template>
@@ -13,6 +13,8 @@ import type { View } from "vega";
 import embed, { type VisualizationSpec } from "vega-embed";
 import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from "vue";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 export interface VisSpec {
     spec: VisualizationSpec;
     fillWidth?: boolean;
diff --git a/client/src/components/ConfigTemplates/ActionSummary.vue b/client/src/components/ConfigTemplates/ActionSummary.vue
index 6e4652a584fe..959c32f85200 100644
--- a/client/src/components/ConfigTemplates/ActionSummary.vue
+++ b/client/src/components/ConfigTemplates/ActionSummary.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { BAlert, BButton } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { ref } from "vue";
 
 import type { PluginStatus } from "@/api/configTemplates";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ConfigurationTestSummaryModal from "@/components/ConfigTemplates/ConfigurationTestSummaryModal.vue";
 
 interface Props {
@@ -19,11 +20,11 @@ defineProps<Props>();
 <template>
     <div>
         <ConfigurationTestSummaryModal v-model="showTestResults" :test-results="testResults" />
-        <BAlert v-if="error" variant="danger" class="configuration-instance-error" show>
+        <GAlert v-if="error" variant="danger" class="configuration-instance-error" show>
             <span :data-description="errorDataDescription">
                 {{ error }}
             </span>
             <BButton variant="link" @click="showTestResults = true">View configuration test status.</BButton>
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/ConfigTemplates/ConfigurationTestSummaryModal.vue b/client/src/components/ConfigTemplates/ConfigurationTestSummaryModal.vue
index ed7672b34733..7415902438ed 100644
--- a/client/src/components/ConfigTemplates/ConfigurationTestSummaryModal.vue
+++ b/client/src/components/ConfigTemplates/ConfigurationTestSummaryModal.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { BAlert } from "bootstrap-vue";
-
 import type { PluginStatus } from "@/api/configTemplates";
 
 import GModal from "../BaseComponents/GModal.vue";
 import ConfigurationTestSummary from "./ConfigurationTestSummary.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 interface Props {
     value: boolean;
@@ -21,9 +20,9 @@ const emit = defineEmits<{
 
 <template>
     <GModal :show="props.value" title="Configuration Test Summary" size="medium" @close="emit('input', false)">
-        <BAlert v-if="error" variant="danger" show dismissible>
+        <GAlert v-if="error" variant="danger" show dismissible>
             {{ error || "" }}
-        </BAlert>
+        </GAlert>
         <ConfigurationTestSummary :test-results="testResults" />
     </GModal>
 </template>
diff --git a/client/src/components/ConfigTemplates/ManageIndexHeader.vue b/client/src/components/ConfigTemplates/ManageIndexHeader.vue
index 38a036af70d8..92c06b08c0bf 100644
--- a/client/src/components/ConfigTemplates/ManageIndexHeader.vue
+++ b/client/src/components/ConfigTemplates/ManageIndexHeader.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import localize from "@/utils/localization";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 
@@ -40,8 +40,8 @@ const breadcrumbItems = computed(() => [{ title: "User Preferences", to: "/user"
             </div>
         </BreadcrumbHeading>
 
-        <BAlert v-if="message" show dismissible>
+        <GAlert v-if="message" show dismissible>
             {{ message || "" }}
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/ConfigTemplates/SourceOptionsList.vue b/client/src/components/ConfigTemplates/SourceOptionsList.vue
index d99a02755a4d..6ca83e870719 100644
--- a/client/src/components/ConfigTemplates/SourceOptionsList.vue
+++ b/client/src/components/ConfigTemplates/SourceOptionsList.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { BAlert, BFormInput } from "bootstrap-vue";
+import { BFormInput } from "bootstrap-vue";
 import type { IconDefinition } from "font-awesome-6";
 import { faNetworkWired } from "font-awesome-6";
 import { computed, ref } from "vue";
@@ -9,6 +9,7 @@ import type { ObjectStoreTemplateSummaries } from "@/api/objectStores.templates"
 import type { BreadcrumbItem } from "@/components/Common/index";
 import Filtering, { type ValidFilter } from "@/utils/filtering";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import Heading from "@/components/Common/Heading.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
@@ -72,15 +73,15 @@ function getOptionType(type: string) {
             <ListHeader :list-id="listId" show-view-toggle />
         </div>
 
-        <BAlert v-if="loading" variant="info" show>
+        <GAlert v-if="loading" variant="info" show>
             <LoadingSpan message="Loading options" />
-        </BAlert>
-        <BAlert v-else-if="!filterText && filteredTemplates.length === 0" variant="info" show>
+        </GAlert>
+        <GAlert v-else-if="!filterText && filteredTemplates.length === 0" variant="info" show>
             No options found.
-        </BAlert>
-        <BAlert v-else-if="filterText && filteredTemplates.length === 0" variant="info" show>
+        </GAlert>
+        <GAlert v-else-if="filterText && filteredTemplates.length === 0" variant="info" show>
             No options found matching <span class="font-weight-bold">{{ filterText }}</span>
-        </BAlert>
+        </GAlert>
         <div v-else class="source-options-list-cards">
             <SourceOptionCard
                 v-for="tp in filteredTemplates"
diff --git a/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue b/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
index f562f46294d6..984249c39a1a 100644
--- a/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
+++ b/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { computedAsync } from "@vueuse/core";
-import { BAlert, BImg } from "bootstrap-vue";
+import { BImg } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { type PathDestination, useDatasetPathDestination } from "@/composables/datasetPathDestination";
 import { getAppRoot } from "@/onload/loadConfig";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface Props {
     historyDatasetId: string;
     path?: string;
@@ -47,9 +49,9 @@ const toggleFluid = () => {
 
 <template>
     <div v-if="imageUrl" class="w-100">
-        <BAlert v-if="!isImage" variant="warning" show>
+        <GAlert v-if="!isImage" variant="warning" show>
             This dataset does not appear to be an image: {{ imageUrl }}.
-        </BAlert>
+        </GAlert>
         <div
             v-else
             class="image-wrapper"
@@ -61,7 +63,7 @@ const toggleFluid = () => {
             </div>
         </div>
     </div>
-    <BAlert v-else variant="warning" show>Image not found: {{ imageUrl }}.</BAlert>
+    <GAlert v-else variant="warning" show>Image not found: {{ imageUrl }}.</GAlert>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/src/components/Dataset/DatasetCopy.vue b/client/src/components/Dataset/DatasetCopy.vue
index 15ac0c83e77f..c513dfaebc52 100644
--- a/client/src/components/Dataset/DatasetCopy.vue
+++ b/client/src/components/Dataset/DatasetCopy.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faArrowRight, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormCheckbox, BFormInput } from "bootstrap-vue";
+import { BButton, BFormCheckbox, BFormInput } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 import Multiselect from "vue-multiselect";
@@ -9,6 +9,7 @@ import Multiselect from "vue-multiselect";
 import { GalaxyApi } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -160,8 +161,8 @@ defineExpose({
 <template>
     <div class="d-flex flex-column">
         <div>
-            <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
-            <BAlert v-else-if="successTargetIds.length > 0 && successTargetIds[0]" variant="success" show>
+            <GAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
+            <GAlert v-else-if="successTargetIds.length > 0 && successTargetIds[0]" variant="success" show>
                 {{ successItemCount }} item{{ successItemCount === 1 ? "" : "s" }} copied to:
                 <span v-if="successHistoryName">
                     <RouterLink
@@ -178,7 +179,7 @@ defineExpose({
                         <span v-if="targetIndex != successTargetIds.length - 1">, </span>
                     </span>
                 </span>
-            </BAlert>
+            </GAlert>
             <Heading h1 separator size="lg">Copy Datasets and Collections</Heading>
         </div>
 
diff --git a/client/src/components/Dataset/DatasetDisplay.vue b/client/src/components/Dataset/DatasetDisplay.vue
index 7c9cf21107c6..cbeaf8368159 100644
--- a/client/src/components/Dataset/DatasetDisplay.vue
+++ b/client/src/components/Dataset/DatasetDisplay.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faExclamationTriangle, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -14,6 +13,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import { bytesToString } from "@/utils/utils";
 
 import Alert from "@/components/Alert.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import TabularChunkedView from "@/components/Dataset/Tabular/TabularChunkedView.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
@@ -122,18 +122,18 @@ watch(
 </script>
 
 <template>
-    <BAlert v-if="errorMessage" variant="danger" show>
+    <GAlert v-if="errorMessage" variant="danger" show>
         {{ errorMessage }}
-    </BAlert>
+    </GAlert>
     <LoadingSpan v-else-if="isLoading || !dataset" message="Loading dataset content" />
-    <BAlert v-else-if="STATES.PENDING_STATES.includes(dataset.state)" show variant="warning">
+    <GAlert v-else-if="STATES.PENDING_STATES.includes(dataset.state)" show variant="warning">
         <FontAwesomeIcon :icon="faSpinner" spin />
         <span>Waiting for dataset to become available. Please check the history panel for details.</span>
-    </BAlert>
-    <BAlert v-else-if="!STATES.OK_STATES.includes(dataset.state)" show variant="danger">
+    </GAlert>
+    <GAlert v-else-if="!STATES.OK_STATES.includes(dataset.state)" show variant="danger">
         <FontAwesomeIcon :icon="faExclamationTriangle" />
         <span>Dataset is unavailable. Please check the history panel for details.</span>
-    </BAlert>
+    </GAlert>
     <LoadingSpan v-else-if="!previewLoaded" message="Loading dataset content" />
     <div v-else class="dataset-display h-100">
         <Alert v-if="sanitizedMessage" :dismissible="true" variant="warning" data-description="sanitization warning">
diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index e55ce1916f5d..cdf4bc7c0feb 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -17,6 +17,7 @@ import localize from "@/utils/localization";
 
 import { useDatasetTableActions } from "./useDatasetTableActions";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
index 81758c160372..76165bd38c46 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.vue
+++ b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -2,7 +2,6 @@
 import { faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { AxiosError } from "axios";
-import { BAlert } from "bootstrap-vue";
 import { onMounted, ref } from "vue";
 
 import { fetchDatasetAttributes } from "@/api/datasets";
@@ -11,6 +10,7 @@ import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
 import Heading from "../Common/Heading.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GTab from "@/components/BaseComponents/GTab.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
@@ -95,13 +95,13 @@ onMounted(async () => {
             {{ localize("Edit Dataset Attributes") }}
         </Heading>
 
-        <BAlert v-if="messageText" class="dataset-attributes-alert" :variant="messageVariant" show>
+        <GAlert v-if="messageText" class="dataset-attributes-alert" :variant="messageVariant" show>
             {{ localize(messageText) }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="loading" variant="info" show>
+        <GAlert v-if="loading" variant="info" show>
             <LoadingSpan message="Loading dataset attributes..." />
-        </BAlert>
+        </GAlert>
         <div v-else-if="!loadingFailed" class="mt-3">
             <GTabs>
                 <GTab v-if="!datasetAttributes['attribute_disable']">
diff --git a/client/src/components/DatasetInformation/DatasetDetails.vue b/client/src/components/DatasetInformation/DatasetDetails.vue
index a8c61ebd5adf..2094d13fec27 100644
--- a/client/src/components/DatasetInformation/DatasetDetails.vue
+++ b/client/src/components/DatasetInformation/DatasetDetails.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { onMounted, onUnmounted, ref } from "vue";
 
@@ -12,6 +11,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import { stateIsTerminal } from "@/utils/utils";
 
 import Heading from "../Common/Heading.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import DatasetStorage from "@/components/Dataset/DatasetStorage/DatasetStorage.vue";
 import DatasetInformation from "@/components/DatasetInformation/DatasetInformation.vue";
 import InheritanceChain from "@/components/InheritanceChain//InheritanceChain.vue";
@@ -92,12 +92,12 @@ onUnmounted(() => {
     <div aria-labelledby="dataset-details-heading">
         <h1 id="dataset-details-heading" class="sr-only">Dataset Details</h1>
 
-        <BAlert v-if="loading" variant="info" show>
+        <GAlert v-if="loading" variant="info" show>
             <LoadingSpan message="Loading dataset details..." />
-        </BAlert>
-        <BAlert v-else-if="datasetLoadingError" variant="error">
+        </GAlert>
+        <GAlert v-else-if="datasetLoadingError" variant="error">
             {{ datasetLoadingError }}
-        </BAlert>
+        </GAlert>
         <div v-else-if="dataset">
             <div v-if="dataset.creating_job" class="details">
                 <DatasetInformation :dataset="dataset" />
diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index 946e255c8152..c8bbf6014646 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard } from "bootstrap-vue";
+import { BCard } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
@@ -13,6 +13,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import EmailReportForm from "../Common/EmailReportForm.vue";
 import LoadingSpan from "../LoadingSpan.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import DatasetErrorDetails from "@/components/DatasetInformation/DatasetErrorDetails.vue";
 import GalaxyWizard from "@/components/GalaxyWizard.vue";
 
@@ -126,14 +127,14 @@ onMounted(async () => {
 
 <template>
     <div>
-        <BAlert v-if="errorMessage" variant="danger" show>
+        <GAlert v-if="errorMessage" variant="danger" show>
             <h2 class="alert-heading h-sm">Failed to access Dataset details.</h2>
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="datasetLoading || jobLoading" variant="info" show>
+        <GAlert v-if="datasetLoading || jobLoading" variant="info" show>
             <LoadingSpan :message="localize('Loading dataset error details')" />
-        </BAlert>
+        </GAlert>
 
         <div v-else-if="!datasetLoading && !jobLoading && dataset && jobDetails">
             <div class="page-container edit-attr">
diff --git a/client/src/components/Downloads/DownloadItemCard.vue b/client/src/components/Downloads/DownloadItemCard.vue
index baf13306e8b0..3841fb032915 100644
--- a/client/src/components/Downloads/DownloadItemCard.vue
+++ b/client/src/components/Downloads/DownloadItemCard.vue
@@ -8,7 +8,6 @@ import {
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { formatDistanceToNow } from "date-fns";
 import { computed, onUnmounted, watch } from "vue";
 
@@ -22,6 +21,7 @@ import { copy } from "@/utils/clipboard";
 import { absPath } from "@/utils/redirect";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCard from "@/components/Common/GCard.vue";
 
 const { getDownloadObjectUrl } = useShortTermStorage();
@@ -278,19 +278,19 @@ checkStatus({ enableFetch: false });
             <p v-if="monitoringData.request.description">
                 {{ monitoringData.request.description }}
             </p>
-            <BAlert v-if="isRunning" variant="info" show>
+            <GAlert v-if="isRunning" variant="info" show>
                 <FontAwesomeIcon :icon="faSpinner" spin />
                 <span>Preparing {{ prettyObjectType }} for download...</span>
-            </BAlert>
-            <BAlert v-if="hasFailed" variant="danger" show>
+            </GAlert>
+            <GAlert v-if="hasFailed" variant="danger" show>
                 The download request for {{ prettyObjectType }} has failed. Failure Reason:
                 <strong>{{ failureReason }}</strong>
-            </BAlert>
-            <BAlert v-else-if="hasExpired" variant="warning" show>
+            </GAlert>
+            <GAlert v-else-if="hasExpired" variant="warning" show>
                 The download request has expired and the result is no longer available. You can go to the
                 <strong>{{ prettyObjectType }}</strong> {{ monitoringData.request.action }} page and try again. This
                 download record can now be removed from the list of recent downloads.
-            </BAlert>
+            </GAlert>
         </template>
     </GCard>
 </template>
diff --git a/client/src/components/Downloads/RemoteExportCard.vue b/client/src/components/Downloads/RemoteExportCard.vue
index 38d9cbddb8c4..da44d6db6286 100644
--- a/client/src/components/Downloads/RemoteExportCard.vue
+++ b/client/src/components/Downloads/RemoteExportCard.vue
@@ -7,12 +7,12 @@ import {
     faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { CardAction, CardBadge } from "@/components/Common/GCard.types";
 import type { ExportRecord } from "@/components/Common/models/exportRecordModel";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCard from "@/components/Common/GCard.vue";
 
 interface Props {
@@ -139,19 +139,19 @@ function onGoToObject() {
             <p v-if="exportRecord.modelStoreFormat" class="text-muted mb-2">
                 <strong>Format:</strong> {{ exportRecord.modelStoreFormat }}
             </p>
-            <BAlert v-if="exportRecord.isPreparing" variant="info" show>
+            <GAlert v-if="exportRecord.isPreparing" variant="info" show>
                 <FontAwesomeIcon :icon="faSpinner" spin />
                 <span>Exporting to remote file source...</span>
-            </BAlert>
-            <BAlert v-if="exportRecord.isReady" variant="success" show>
+            </GAlert>
+            <GAlert v-if="exportRecord.isReady" variant="success" show>
                 <FontAwesomeIcon :icon="faCheckCircle" />
                 <span>Export completed successfully</span>
-            </BAlert>
-            <BAlert v-if="exportRecord.hasFailed" variant="danger" show>
+            </GAlert>
+            <GAlert v-if="exportRecord.hasFailed" variant="danger" show>
                 <FontAwesomeIcon :icon="faExclamationTriangle" />
                 <span>Export failed.</span>
                 <span v-if="exportRecord.errorMessage"> <strong>Error:</strong> {{ exportRecord.errorMessage }} </span>
-            </BAlert>
+            </GAlert>
         </template>
     </GCard>
 </template>
diff --git a/client/src/components/FileBrowser/RemoteFileBrowserContent.vue b/client/src/components/FileBrowser/RemoteFileBrowserContent.vue
index 8e343a7c6b86..331026e6a65a 100644
--- a/client/src/components/FileBrowser/RemoteFileBrowserContent.vue
+++ b/client/src/components/FileBrowser/RemoteFileBrowserContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faFolder, faGlobe, faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BFormCheckbox, BPagination } from "bootstrap-vue";
+import { BFormCheckbox, BPagination } from "bootstrap-vue";
 import { watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -12,6 +12,7 @@ import type { RemoteFileBrowserMode } from "@/composables/useRemoteFileBrowser";
 import { useRemoteFileBrowser } from "@/composables/useRemoteFileBrowser";
 import { USER_FILE_PREFIX } from "@/utils/url";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import BreadcrumbNavigation from "@/components/Common/BreadcrumbNavigation.vue";
 import GTable from "@/components/Common/GTable.vue";
@@ -202,12 +203,12 @@ defineExpose({
         </div>
 
         <!-- Error message -->
-        <BAlert v-if="errorMessage" variant="danger" show dismissible @dismissed="errorMessage = undefined">
+        <GAlert v-if="errorMessage" variant="danger" show dismissible @dismissed="errorMessage = undefined">
             <div class="d-flex justify-content-between align-items-center">
                 <span>{{ errorMessage }}</span>
                 <GButton color="red" class="ml-2" @click="onErrorRetry">Retry</GButton>
             </div>
-        </BAlert>
+        </GAlert>
 
         <!-- Browser table -->
         <div class="browser-table-container">
diff --git a/client/src/components/FileSources/Instances/CreateForm.vue b/client/src/components/FileSources/Instances/CreateForm.vue
index 8f2921c80e9a..ecb4ada172e7 100644
--- a/client/src/components/FileSources/Instances/CreateForm.vue
+++ b/client/src/components/FileSources/Instances/CreateForm.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, toRef } from "vue";
 
 import type { FileSourceTemplateSummary, UserFileSourceModel } from "@/api/fileSources";
@@ -7,6 +6,7 @@ import { useConfigurationTemplateCreation } from "@/components/ConfigTemplates/u
 
 import { useTemplateFormData } from "./useTemplateFormData";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ConfigurationMarkdown from "@/components/ObjectStore/ConfigurationMarkdown.vue";
 
 const createUrl = "/api/file_source_instances";
@@ -45,9 +45,9 @@ const { ActionSummary, error, inputs, InstanceForm, onSubmit, submitTitle, loadi
 <template>
     <div id="create-file-source-landing">
         <ActionSummary error-data-description="file-source-creation-error" :test-results="testResults" :error="error" />
-        <BAlert v-for="message in messages" :key="message.content" show :variant="message.variant">
+        <GAlert v-for="message in messages" :key="message.content" show :variant="message.variant">
             <ConfigurationMarkdown :markdown="message.content" :admin="true" />
-        </BAlert>
+        </GAlert>
         <InstanceForm
             :inputs="inputs"
             :title="title"
diff --git a/client/src/components/FileSources/Instances/CreateInstance.vue b/client/src/components/FileSources/Instances/CreateInstance.vue
index 0071ae85c274..103c3ac12fbc 100644
--- a/client/src/components/FileSources/Instances/CreateInstance.vue
+++ b/client/src/components/FileSources/Instances/CreateInstance.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -9,6 +8,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import { useInstanceRouting } from "./routing";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import CreateForm from "@/components/FileSources/Instances/CreateForm.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -90,14 +90,14 @@ watch(
             <BreadcrumbHeading :items="breadcrumbItems" />
         </div>
 
-        <BAlert v-if="loading" show variant="info">
+        <GAlert v-if="loading" show variant="info">
             <LoadingSpan v-if="!template" message="Loading file source templates" />
             <LoadingSpan v-else-if="requiresOAuth2AuthorizeRedirect && !errorMessage" :message="redirectMessage" />
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="errorMessage" show variant="danger">
+        <GAlert v-if="errorMessage" show variant="danger">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
         <CreateForm v-if="!loading && template" :uuid="uuid" :template="template" @created="onCreated" />
     </div>
 </template>
diff --git a/client/src/components/FileSources/Instances/ManageIndex.vue b/client/src/components/FileSources/Instances/ManageIndex.vue
index dacc13227f1b..4df22fe2134a 100644
--- a/client/src/components/FileSources/Instances/ManageIndex.vue
+++ b/client/src/components/FileSources/Instances/ManageIndex.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { TableField } from "@/components/Common/GTable.types";
@@ -8,6 +7,7 @@ import { useInstanceTesting } from "@/components/ConfigTemplates/useConfiguratio
 import { useFiltering } from "@/components/ConfigTemplates/useInstanceFiltering";
 import { useFileSourceInstancesStore } from "@/stores/fileSourceInstancesStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTable from "@/components/Common/GTable.vue";
 import ManageIndexHeader from "@/components/ConfigTemplates/ManageIndexHeader.vue";
 import FileSourceTypeSpan from "@/components/FileSources/FileSourceTypeSpan.vue";
@@ -57,9 +57,9 @@ const { ConfigurationTestSummaryModal, showTestResults, testResults, test, testi
             :items="activeInstances">
             <template v-slot:empty>
                 <LoadingSpan v-if="loading" message="Loading your user's file source instances" />
-                <BAlert v-else id="no-file-source-instances" variant="info" show>
+                <GAlert v-else id="no-file-source-instances" variant="info" show>
                     No file source instances found for your users, click the create button to configure a new one.
-                </BAlert>
+                </GAlert>
             </template>
 
             <template v-slot:cell(name)="{ item }">
diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index 4632406fcfef..7cda1070c001 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import Vue, { computed, onMounted, ref, watch } from "vue";
 
 import {
@@ -30,6 +29,7 @@ import { USER_FILE_PREFIX } from "@/utils/url";
 import { Model } from "./model";
 
 import GButton from "../BaseComponents/GButton.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import SelectionDialog from "@/components/SelectionDialog/SelectionDialog.vue";
 
 const filesSources = useFileSources();
@@ -490,7 +490,7 @@ onMounted(() => {
         @onSelectAll="onSelectAll"
         @onUndo="onGoBack">
         <template v-slot:helper>
-            <BAlert v-if="showFTPHelper && isConfigLoaded" id="helper" variant="info" show>
+            <GAlert v-if="showFTPHelper && isConfigLoaded" id="helper" variant="info" show>
                 This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at
                 <strong>{{ config.ftp_upload_site }}</strong> using your Galaxy credentials. For help visit the
                 <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.
@@ -499,7 +499,7 @@ onMounted(() => {
                     <strong>do not have a Galaxy password</strong> please use the reset password option in the login
                     form with your email to create a password for your account.</span
                 >
-            </BAlert>
+            </GAlert>
         </template>
         <template v-slot:buttons>
             <GButton
diff --git a/client/src/components/Form/Elements/FormCheck.vue b/client/src/components/Form/Elements/FormCheck.vue
index 879b4411dd2a..5c499db032b2 100644
--- a/client/src/components/Form/Elements/FormCheck.vue
+++ b/client/src/components/Form/Elements/FormCheck.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface CheckOption {
     label: string;
     value: string;
@@ -61,5 +63,5 @@ function onSelectAll(selected: boolean): void {
             </b-form-checkbox>
         </b-form-checkbox-group>
     </div>
-    <b-alert v-else v-localize variant="warning" show> No options available. </b-alert>
+    <GAlert v-else v-localize variant="warning" show> No options available. </GAlert>
 </template>
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index f112929bbf93..28007a3666db 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -2,7 +2,7 @@
 import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useIntersectionObserver } from "@vueuse/core";
-import { BAlert, BFormCheckbox } from "bootstrap-vue";
+import { BFormCheckbox } from "bootstrap-vue";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import {
@@ -37,6 +37,7 @@ import FormSelectionPreference from "../FormSelectionPreference.vue";
 import FormDataContextButtons from "./FormDataContextButtons.vue";
 import FormDataExtensions from "./FormDataExtensions.vue";
 import FormDataWorkflowRunTabs from "./FormDataWorkflowRunTabs.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
@@ -1162,9 +1163,9 @@ const noOptionsWarningMessage = computed(() => {
                     :placeholder="`Select a ${placeholder}`"
                     @search-change="onSearchChange">
                     <template v-slot:no-options>
-                        <BAlert class="form-data-no-options-alert" variant="warning" show>
+                        <GAlert class="form-data-no-options-alert" variant="warning" show>
                             {{ noOptionsWarningMessage }}
-                        </BAlert>
+                        </GAlert>
                     </template>
                     <template v-if="hasMoreInCurrentSource" v-slot:after-list>
                         <div ref="loadMoreSentinel" class="form-data-load-more-sentinel text-muted text-center py-2">
@@ -1188,9 +1189,9 @@ const noOptionsWarningMessage = computed(() => {
                     @preference-change="onPreferenceChange"
                     @search-change="onSearchChange">
                     <template v-slot:no-options>
-                        <BAlert class="form-data-no-options-alert" variant="warning" show>
+                        <GAlert class="form-data-no-options-alert" variant="warning" show>
                             {{ noOptionsWarningMessage }}
-                        </BAlert>
+                        </GAlert>
                     </template>
                     <template v-if="hasMoreInCurrentSource" v-slot:after-list>
                         <div ref="loadMoreSentinel" class="form-data-load-more-sentinel text-muted text-center py-2">
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index 211597a20853..3c81cd4efbd9 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { BAlert, BFormCheckbox } from "bootstrap-vue";
+import { BFormCheckbox } from "bootstrap-vue";
 import { computed, type ComputedRef } from "vue";
 
 import { findDescendants, flattenValues, getAllValues, type Option, type Value } from "./utilities";
 
 import FormDrilldownList from "./FormDrilldownList.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = withDefaults(
     defineProps<{
@@ -114,7 +115,7 @@ function setElementValues(oldArray: string[], newArray: string[], value: string)
                 :handle-click="handleClick" />
         </div>
         <div v-else>
-            <BAlert show variant="info" class="mt-2"> No options available. </BAlert>
+            <GAlert show variant="info" class="mt-2"> No options available. </GAlert>
         </div>
     </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormError.vue b/client/src/components/Form/Elements/FormError.vue
index b4630f7da768..2b81c6e7a842 100644
--- a/client/src/components/Form/Elements/FormError.vue
+++ b/client/src/components/Form/Elements/FormError.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { faExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
+
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = defineProps<{
     alerts: string[];
@@ -10,7 +11,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <component :is="props.hasAlertClass ? BAlert : 'span'" show variant="info">
+    <component :is="props.hasAlertClass ? GAlert : 'span'" show variant="info">
         <div v-for="(alert, index) in props.alerts" :key="index" class="ui-form-error">
             <FontAwesomeIcon class="mr-1" :icon="faExclamation" />
             <span class="ui-form-error-text">{{ alert }}</span>
diff --git a/client/src/components/Form/Elements/FormNumber.vue b/client/src/components/Form/Elements/FormNumber.vue
index 814ed55c3e1b..c67a8522e8c2 100644
--- a/client/src/components/Form/Elements/FormNumber.vue
+++ b/client/src/components/Form/Elements/FormNumber.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-alert
+        <GAlert
             v-if="errorMessage"
             class="mt-2"
             :show="dismissCountDown"
@@ -12,7 +12,7 @@
             <b-progress :max="dismissSecs" :value="dismissCountDown" height="4px" class="mt-1">
                 <b-progress-bar :value="dismissCountDown" variant="info" />
             </b-progress>
-        </b-alert>
+        </GAlert>
         <b-row align-v="center">
             <b-col :sm="isRangeValid ? defaultInputSizeWithSlider : false">
                 <!-- regular dot and dot on numpad have different codes -->
@@ -37,7 +37,10 @@
 <script>
 import { isDefined } from "@/utils/validation";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 export default {
+    components: { GAlert },
     props: {
         value: {
             required: true,
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 2067f3509664..d05c9c879e82 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -11,6 +11,7 @@ import { uid } from "@/utils/utils";
 
 import { type DataOption, isDataOption, itemUniqueKey } from "./FormData/types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
@@ -283,7 +284,7 @@ function isSelected(item: SelectValue): boolean {
             </template>
         </Multiselect>
         <slot v-else name="no-options">
-            <b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
+            <GAlert v-localize class="w-100" variant="warning" show> No options available. </GAlert>
         </slot>
     </div>
 </template>
diff --git a/client/src/components/Form/FormGeneric.vue b/client/src/components/Form/FormGeneric.vue
index eb58892e8c86..69d82bb13bf7 100644
--- a/client/src/components/Form/FormGeneric.vue
+++ b/client/src/components/Form/FormGeneric.vue
@@ -1,12 +1,12 @@
 <template>
     <UrlDataProvider v-slot="{ result: config, loading }" :url="url" @error="onError">
         <div v-if="!loading" :id="id">
-            <b-alert v-if="config.message" :variant="configMessageVariant(config)" show>
+            <GAlert v-if="config.message" :variant="configMessageVariant(config)" show>
                 {{ config.message }}
-            </b-alert>
-            <b-alert v-if="messageText" :variant="messageVariant" show dismissible @dismissed="messageText = null">
+            </GAlert>
+            <GAlert v-if="messageText" :variant="messageVariant" show dismissible @dismissed="messageText = null">
                 {{ messageText }}
-            </b-alert>
+            </GAlert>
             <FormCard :title="configTitle(config)" :icon="configIcon(config)">
                 <template v-slot:body>
                     <FormDisplay :inputs="config.inputs" :replace-params="replaceParams" @onChange="onChange" />
@@ -31,12 +31,14 @@ import { withPrefix } from "@/utils/redirect";
 
 import { submitData } from "./services";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import FormCard from "@/components/Form/FormCard.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
 
 export default {
     components: {
+        GAlert,
         FormCard,
         FormDisplay,
         UrlDataProvider,
diff --git a/client/src/components/Form/FormMessage.vue b/client/src/components/Form/FormMessage.vue
index 8ab3d1395267..cf375a7936dc 100644
--- a/client/src/components/Form/FormMessage.vue
+++ b/client/src/components/Form/FormMessage.vue
@@ -1,10 +1,13 @@
 <template>
-    <b-alert class="mt-2" :variant="variant" :show="showAlert">
+    <GAlert class="mt-2" :variant="variant" :show="showAlert">
         {{ message | l }}
-    </b-alert>
+    </GAlert>
 </template>
 <script>
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 export default {
+    components: { GAlert },
     props: {
         message: {
             type: String,
diff --git a/client/src/components/Grid/GridList.test.ts b/client/src/components/Grid/GridList.test.ts
index d3dd578acd10..0f134a54c806 100644
--- a/client/src/components/Grid/GridList.test.ts
+++ b/client/src/components/Grid/GridList.test.ts
@@ -175,8 +175,8 @@ describe("GridList", () => {
         await flushPromises();
         const alert = wrapper.find(".alert");
         expect(alert.text()).toBe("Operation-3 has been executed.");
-        vi.runAllTimers();
-        await wrapper.vm.$nextTick();
+        await vi.runAllTimersAsync();
+        await flushPromises();
         expect(wrapper.find(".alert").exists()).toBeFalsy();
     });
 
diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
index f620dc42f745..4ea2ba9c432d 100644
--- a/client/src/components/Grid/GridList.vue
+++ b/client/src/components/Grid/GridList.vue
@@ -2,7 +2,7 @@
 import { faCaretDown, faCaretUp, faShieldAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounceFn, useEventBus } from "@vueuse/core";
-import { BAlert, BButton, BCard, BFormCheckbox, BPagination } from "bootstrap-vue";
+import { BButton, BCard, BFormCheckbox, BPagination } from "bootstrap-vue";
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -16,6 +16,7 @@ import GridExpand from "./GridElements/GridExpand.vue";
 import GridLink from "./GridElements/GridLink.vue";
 import GridOperations from "./GridElements/GridOperations.vue";
 import GridText from "./GridElements/GridText.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -322,8 +323,8 @@ watch(operationMessage, () => {
 
 <template>
     <div :id="gridConfig.id" class="d-flex flex-column overflow-auto">
-        <BAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
-        <BAlert v-if="!!operationMessage" :variant="operationStatus" fade show>{{ operationMessage }}</BAlert>
+        <GAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
+        <GAlert v-if="!!operationMessage" :variant="operationStatus" fade show>{{ operationMessage }}</GAlert>
         <div v-if="!embedded || filterClass" class="grid-header d-flex justify-content-between pb-2 flex-column">
             <div v-if="!embedded" class="d-flex">
                 <Heading h1 separator inline size="lg" class="flex-grow-1 m-0" data-description="grid title">
@@ -359,14 +360,14 @@ watch(operationMessage, () => {
             <LoadingOverlay />
         </div>
         <span v-else-if="!isAvailable || hasInvalidFilters">
-            <BAlert v-if="!hasInvalidFilters" variant="info" show>
+            <GAlert v-if="!hasInvalidFilters" variant="info" show>
                 <span v-if="filterText">
                     <span v-localize>Nothing found with:</span>
                     <b>{{ filterText }}</b>
                 </span>
                 <span v-else v-localize>{{ noDataMessage }}</span>
-            </BAlert>
-            <BAlert v-else-if="invalidFilters" variant="danger" show>
+            </GAlert>
+            <GAlert v-else-if="invalidFilters" variant="danger" show>
                 <Heading h4 inline size="sm" class="flex-grow-1 mb-2">Invalid filters in query:</Heading>
                 <ul>
                     <li v-for="[invalidKey, value] in Object.entries(invalidFilters)" :key="invalidKey">
@@ -386,7 +387,7 @@ watch(operationMessage, () => {
                     @click="filterText = `'${filterText}'`">
                     Match the exact query provided
                 </a>
-            </BAlert>
+            </GAlert>
         </span>
         <template v-else>
             <div class="position-relative">
diff --git a/client/src/components/Help/HelpTerm.vue b/client/src/components/Help/HelpTerm.vue
index d838bbcfb41e..bbe62edf089d 100644
--- a/client/src/components/Help/HelpTerm.vue
+++ b/client/src/components/Help/HelpTerm.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { toRef } from "vue";
 
 import { useHelpForTerm } from "@/stores/helpTermsStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import ConfigurationMarkdown from "@/components/ObjectStore/ConfigurationMarkdown.vue";
 
@@ -25,7 +25,7 @@ const { loading, hasHelp, help } = useHelpForTerm(toRef(props, "term"));
             <ConfigurationMarkdown :markdown="help" :admin="true" />
         </div>
         <div v-else>
-            <BAlert variant="error"> Something went wrong, no Galaxy help found for term or URI {{ term }}. </BAlert>
+            <GAlert variant="error"> Something went wrong, no Galaxy help found for term or URI {{ term }}. </GAlert>
         </div>
     </div>
 </template>
diff --git a/client/src/components/History/Archiving/HistoryArchiveExportSelector.vue b/client/src/components/History/Archiving/HistoryArchiveExportSelector.vue
index fe22905b53b9..952a7266a41f 100644
--- a/client/src/components/History/Archiving/HistoryArchiveExportSelector.vue
+++ b/client/src/components/History/Archiving/HistoryArchiveExportSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BFormCheckbox } from "bootstrap-vue";
+import { BFormCheckbox } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 
 import type { HistorySummary } from "@/api";
@@ -9,6 +9,7 @@ import { DEFAULT_EXPORT_PARAMS } from "@/composables/shortTermStorage";
 import { useTaskMonitor } from "@/composables/taskMonitor";
 
 import ExportRecordCard from "./ExportRecordCard.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
@@ -146,17 +147,17 @@ function onArchiveHistoryWithExport() {
             To be able to recreate your archived history later, you need to export it first to a permanent remote
             location. Then you will be able to import it back to Galaxy from the remote source, as a new copy.
         </p>
-        <BAlert v-if="isLoading" show variant="info">
+        <GAlert v-if="isLoading" show variant="info">
             <LoadingSpan message="Retrieving export records..." />
-        </BAlert>
-        <BAlert v-else-if="exportErrorMessage" show variant="danger">
+        </GAlert>
+        <GAlert v-else-if="exportErrorMessage" show variant="danger">
             <p>
                 <b>Something went wrong</b>
             </p>
             <p>{{ exportErrorMessage }}</p>
-        </BAlert>
+        </GAlert>
         <div v-else-if="mostUpToDateExport && mostUpToDateExportIsReady">
-            <BAlert show variant="success">
+            <GAlert show variant="success">
                 <p>
                     <b>There is an up-to-date export record of this history ready.</b>
                 </p>
@@ -165,13 +166,13 @@ function onArchiveHistoryWithExport() {
                     importing it.
                 </p>
                 <ExportRecordCard id="export-record-ready" class="mt-3" :export-record="mostUpToDateExport" />
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else>
-            <BAlert v-if="isExportingRecord" id="generating-export-record-alert" show variant="info">
+            <GAlert v-if="isExportingRecord" id="generating-export-record-alert" show variant="info">
                 <LoadingSpan message="Generating export record. This may take a while..." />
-            </BAlert>
-            <BAlert v-else show variant="info">
+            </GAlert>
+            <GAlert v-else show variant="info">
                 <p>
                     <b>
                         There is no up-to-date export record of this history. You need to create a new export record to
@@ -186,7 +187,7 @@ function onArchiveHistoryWithExport() {
                     @click="onCreateExportRecord">
                     Create export record
                 </GButton>
-            </BAlert>
+            </GAlert>
         </div>
         <p v-if="!isDeleteContentsConfirmed" class="mt-3 mb-0">
             To continue, you need to confirm that you want to delete the contents of the original history before you can
@@ -196,10 +197,10 @@ function onArchiveHistoryWithExport() {
         <BFormCheckbox id="confirm-delete-checkbox" v-model="isDeleteContentsConfirmed" class="my-3">
             <b>I am aware that the contents of the original history will be permanently deleted.</b>
         </BFormCheckbox>
-        <BAlert show variant="warning">
+        <GAlert show variant="warning">
             Remember that you cannot undo this action. Once you archive and delete the history, you can only recover it
             by importing it as a new copy from the export record.
-        </BAlert>
+        </GAlert>
         <GButton
             id="archive-history-btn"
             class="mt-3"
diff --git a/client/src/components/History/Archiving/HistoryArchiveWizard.vue b/client/src/components/History/Archiving/HistoryArchiveWizard.vue
index 40ce80bac5fd..ab24204226c2 100644
--- a/client/src/components/History/Archiving/HistoryArchiveWizard.vue
+++ b/client/src/components/History/Archiving/HistoryArchiveWizard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { faArchive } from "@fortawesome/free-solid-svg-icons";
-import { BAlert, BCard } from "bootstrap-vue";
+import { BCard } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 import { RouterLink } from "vue-router";
 
@@ -12,6 +12,7 @@ import { useHistoryStore } from "@/stores/historyStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import Alert from "@/components/Alert.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTab from "@/components/BaseComponents/GTab.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
@@ -92,19 +93,19 @@ const breadcrumbItems = computed(() => [
         <BreadcrumbHeading :items="breadcrumbItems" />
 
         <Alert v-if="loadError" :message="loadError" variant="error" />
-        <BAlert v-else-if="!history" show>
+        <GAlert v-else-if="!history" show>
             <LoadingSpan spinner-only />
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="isHistoryAlreadyArchived" id="history-archived-alert" show variant="success">
+        <GAlert v-if="isHistoryAlreadyArchived" id="history-archived-alert" show variant="success">
             This history has been archived. You can access it from the
             <RouterLink :to="archivedHistoriesRoute">Archived Histories</RouterLink> section.
-        </BAlert>
+        </GAlert>
         <div v-else-if="history">
-            <BAlert show variant="info">
+            <GAlert show variant="info">
                 Archiving a history will remove it from your <i>active histories</i>. You can still access it from the
                 <RouterLink :to="archivedHistoriesRoute">Archived Histories</RouterLink> section.
-            </BAlert>
+            </GAlert>
 
             <div v-if="canFreeStorage">
                 <h2 class="h-md">How do you want to archive this history?</h2>
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index ae8ae6a464e4..a35547eabf6f 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -23,6 +23,7 @@ import CollectionDetails from "./CollectionDetails.vue";
 import CollectionNavigation from "./CollectionNavigation.vue";
 import CollectionOperations from "./CollectionOperations.vue";
 import Alert from "@/components/Alert.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ContentItem from "@/components/History/Content/ContentItem.vue";
 import ListingLayout from "@/components/History/Layout/ListingLayout.vue";
 
@@ -146,13 +147,13 @@ watch(
             </section>
             <section class="position-relative flex-grow-1 scroller">
                 <div>
-                    <b-alert
+                    <GAlert
                         v-if="collectionElements.length === 0"
                         class="m-2"
                         :variant="populatedStateMsg ? 'danger' : 'info'"
                         show>
                         {{ populatedStateMsg || "This is an empty collection." }}
-                    </b-alert>
+                    </GAlert>
                     <ListingLayout
                         v-else
                         data-key="element_index"
diff --git a/client/src/components/History/CurrentHistory/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
index 76ce21e6ca20..935a561f3f08 100644
--- a/client/src/components/History/CurrentHistory/HistoryEmpty.vue
+++ b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
@@ -2,11 +2,12 @@
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
-import { BAlert } from "bootstrap-vue";
 
 import { useUploadMethodModal } from "@/composables/upload/useUploadMethodModal";
 import localize from "@/utils/localization";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 const { emit } = useEventBus<string>("open-tool-section");
 
 const props = withDefaults(
@@ -32,7 +33,7 @@ function clickDataLink() {
 </script>
 
 <template>
-    <BAlert show>
+    <GAlert show>
         <h4 id="empty-history-message" class="mb-1">
             <FontAwesomeIcon :icon="faInfoCircle" />
             <span>{{ localize(message) }}</span>
@@ -43,5 +44,5 @@ function clickDataLink() {
             <span v-localize>or</span>
             <a v-localize href="#" @click.prevent="clickDataLink">get data from an external source</a>.
         </p>
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryMessages.vue b/client/src/components/History/CurrentHistory/HistoryMessages.vue
index 7c3990ffc684..1544eec71036 100644
--- a/client/src/components/History/CurrentHistory/HistoryMessages.vue
+++ b/client/src/components/History/CurrentHistory/HistoryMessages.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { type AnyUser, type HistorySummary, userOwnsHistory } from "@/api";
 import localize from "@/utils/localization";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface Props {
     history: HistorySummary;
     currentUser: AnyUser;
@@ -27,26 +28,26 @@ const currentUserOwnsHistory = computed(() => {
 
 <template>
     <div v-if="hasMessages" class="mx-3 mt-2" data-description="history messages">
-        <BAlert v-if="history.purged" :show="history.purged" variant="warning">
+        <GAlert v-if="history.purged" :show="history.purged" variant="warning">
             <FontAwesomeIcon :icon="faBurn" fixed-width />
             {{ localize("History has been permanently deleted") }}
-        </BAlert>
-        <BAlert v-else-if="history.deleted" :show="history.deleted" variant="warning">
+        </GAlert>
+        <GAlert v-else-if="history.deleted" :show="history.deleted" variant="warning">
             <FontAwesomeIcon :icon="faTrash" fixed-width />
             {{ localize("History has been deleted") }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert :show="history.archived && currentUserOwnsHistory" variant="warning">
+        <GAlert :show="history.archived && currentUserOwnsHistory" variant="warning">
             <FontAwesomeIcon :icon="faArchive" fixed-width />
             {{ localize("History has been archived") }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert :show="userOverQuota" variant="warning">
+        <GAlert :show="userOverQuota" variant="warning">
             {{
                 localize(
                     "You are over your disk quota. Tool execution is on hold until your disk usage drops below your allocated quota.",
                 )
             }}
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/OperationErrorDialog.vue b/client/src/components/History/CurrentHistory/HistoryOperations/OperationErrorDialog.vue
index 4c95d959dd2f..62f35e660dda 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/OperationErrorDialog.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/OperationErrorDialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { AxiosError } from "axios";
-import { BAlert } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
 
 import type { components } from "@/api/schema";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 
 type HistoryContentBulkOperationResult = components["schemas"]["HistoryContentBulkOperationResult"];
@@ -66,11 +66,11 @@ function onHide() {
 
 <template>
     <GModal :show="show" :title="title" @close="onHide">
-        <BAlert v-if="isPartialSuccess" show variant="warning">
+        <GAlert v-if="isPartialSuccess" show variant="warning">
             <strong>{{ success_count }}</strong> items were processed successfully, unfortunately,
             <strong>{{ error_count }}</strong> items failed because of the following reasons:
-        </BAlert>
-        <BAlert v-else show variant="danger">The operation failed for the following reasons:</BAlert>
+        </GAlert>
+        <GAlert v-else show variant="danger">The operation failed for the following reasons:</GAlert>
 
         <div>
             <ul v-if="errorMessage">
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionChangeWarning.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionChangeWarning.vue
index 1295fbcdafbc..34acfe7e3458 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionChangeWarning.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionChangeWarning.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { BAlert, BLink, BProgress } from "bootstrap-vue";
+import { BLink, BProgress } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { ref, watch } from "vue";
 
 import { useUserFlagsStore } from "@/stores/userFlagsStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface Props {
     querySelectionBreak: boolean;
 }
@@ -37,7 +39,7 @@ watch(
 </script>
 
 <template>
-    <BAlert
+    <GAlert
         class="m-2"
         variant="info"
         :show="dismissCountDown"
@@ -49,5 +51,5 @@ watch(
         `select all` status.
         <BProgress variant="info" :max="dismissSecs" :value="dismissCountDown" height="4px" />
         <BLink @click="onDoNotShowAgain">Do not show again</BLink>
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationPreviewReport.vue b/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationPreviewReport.vue
index 1bc3a69e00b5..92a5e3ca1936 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationPreviewReport.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationPreviewReport.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BBadge, BListGroup, BListGroupItem } from "bootstrap-vue";
+import { BBadge, BListGroup, BListGroupItem } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -11,6 +11,7 @@ import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
 import { getIneligibleReasonDescription } from "@/utils/storageOperations";
 import { bytesToString } from "@/utils/utils";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import StorageQuotaImpactBar from "@/components/History/StorageOperations/StorageQuotaImpactBar.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
@@ -287,7 +288,7 @@ function getObjectStoreLabel(storeId: string) {
         </div>
 
         <!-- Warnings -->
-        <BAlert v-if="hasWarnings" show variant="warning" class="mb-0 py-2">
+        <GAlert v-if="hasWarnings" show variant="warning" class="mb-0 py-2">
             <div class="font-weight-bold small mb-1">Warnings</div>
             <div v-for="(warning, index) in preview.warnings" :key="index" class="small py-1">
                 {{ warning }}
@@ -296,6 +297,6 @@ function getObjectStoreLabel(storeId: string) {
                 All selected datasets are ineligible for transfer. Please review the reasons above and adjust your
                 selection or target storage location.
             </div>
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationWizardModal.vue b/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationWizardModal.vue
index 36df63d7663b..48478aa53f3b 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationWizardModal.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/StorageOperationWizardModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BButton } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import Multiselect from "vue-multiselect";
@@ -17,6 +17,7 @@ import { useStorageOperationsStore } from "@/stores/storageOperationsStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 import { toTrackedStorageRun } from "@/utils/storageOperations";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
 import StorageOperationPreviewReport from "@/components/History/CurrentHistory/HistoryOperations/StorageOperationPreviewReport.vue";
@@ -234,13 +235,13 @@ function getExplicitlySelectedItems(): HistoryContentItemBase[] {
 
 <template>
     <GModal :show.sync="showProxy" title="Move Datasets to New Storage Location" size="medium" overflow-visible>
-        <BAlert v-if="previewError" show variant="danger" dismissible class="mb-2" @dismissed="previewError = null">
+        <GAlert v-if="previewError" show variant="danger" dismissible class="mb-2" @dismissed="previewError = null">
             {{ previewError }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="executionError" show variant="danger" dismissible class="mb-2" @dismissed="executionError = null">
+        <GAlert v-if="executionError" show variant="danger" dismissible class="mb-2" @dismissed="executionError = null">
             {{ executionError }}
-        </BAlert>
+        </GAlert>
 
         <GenericWizard
             :use="wizard"
@@ -258,9 +259,9 @@ function getExplicitlySelectedItems(): HistoryContentItemBase[] {
                         Target storage location
                     </label>
                     <LoadingSpan v-if="objectStoresLoading" message="Loading Galaxy storage information" />
-                    <BAlert v-else-if="loadErrorMessage" show variant="danger" class="mb-2">
+                    <GAlert v-else-if="loadErrorMessage" show variant="danger" class="mb-2">
                         {{ loadErrorMessage }}
-                    </BAlert>
+                    </GAlert>
                     <Multiselect
                         v-else
                         id="storage-target-select"
@@ -315,10 +316,10 @@ function getExplicitlySelectedItems(): HistoryContentItemBase[] {
                     v-if="storagePreviewLoading"
                     class="text-center text-muted py-3"
                     message="Loading preview information for the selected items. This may take a few moments. Please do not close this dialog while the preview is loading." />
-                <BAlert v-else-if="!storagePreview" show variant="info">
+                <GAlert v-else-if="!storagePreview" show variant="info">
                     No preview information is available. Please go back and ensure you have selected a target storage
                     location.
-                </BAlert>
+                </GAlert>
 
                 <StorageOperationPreviewReport
                     v-else-if="storagePreview"
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index c614295bcf5b..e620e4fe5d98 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref, set as VueSet, unref, watch } from "vue";
 
@@ -29,6 +28,7 @@ import OperationErrorDialog from "./HistoryOperations/OperationErrorDialog.vue";
 import SelectionChangeWarning from "./HistoryOperations/SelectionChangeWarning.vue";
 import HistorySelectionOperations from "./HistoryOperations/SelectionOperations.vue";
 import HistorySelectionStatus from "./HistoryOperations/SelectionStatus.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import ContentItem from "@/components/History/Content/ContentItem.vue";
 import ListingLayout from "@/components/History/Layout/ListingLayout.vue";
@@ -501,23 +501,23 @@ const {
                 <HistoryDropZone v-if="showDropZone" />
                 <div class="h-100">
                     <div v-if="isLoading && historyItems && historyItems.length === 0">
-                        <BAlert class="m-2" variant="info" show>
+                        <GAlert class="m-2" variant="info" show>
                             <LoadingSpan message="Loading History" />
-                        </BAlert>
+                        </GAlert>
                     </div>
-                    <BAlert v-else-if="isProcessing" class="m-2" variant="info" show>
+                    <GAlert v-else-if="isProcessing" class="m-2" variant="info" show>
                         <LoadingSpan message="Processing operation" />
-                    </BAlert>
+                    </GAlert>
                     <div v-else-if="historyItems.length === 0">
                         <HistoryEmpty v-if="queryDefault" :writable="canEditHistory" class="m-2" />
 
-                        <BAlert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
+                        <GAlert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
                             Error in filter:
                             <a href="javascript:void(0)" @click="showAdvanced = true">
                                 {{ formattedSearchError.filter }}'{{ formattedSearchError.value }}'
                             </a>
-                        </BAlert>
-                        <BAlert v-else class="m-2" variant="info" show> No data found for selected filter. </BAlert>
+                        </GAlert>
+                        <GAlert v-else class="m-2" variant="info" show> No data found for selected filter. </GAlert>
                     </div>
                     <ListingLayout
                         v-else
diff --git a/client/src/components/History/Export/HistoryExport.vue b/client/src/components/History/Export/HistoryExport.vue
index 8d45a172697f..b8f9f7c84aca 100644
--- a/client/src/components/History/Export/HistoryExport.vue
+++ b/client/src/components/History/Export/HistoryExport.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faFileExport, faList } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import type { AnyHistory } from "@/api";
@@ -24,6 +23,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import type { HistoryExportData } from "./types";
 
 import HistoryExportWizard from "./HistoryExportWizard.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
@@ -254,9 +254,9 @@ const breadcrumbItems = computed(() => [
             </GButton>
         </BreadcrumbHeading>
 
-        <BAlert v-if="isFatalError" id="fatal-error-alert" variant="danger" class="mt-3" show>
+        <GAlert v-if="isFatalError" id="fatal-error-alert" variant="danger" class="mt-3" show>
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
         <div v-if="history">
             <div v-if="latestExportRecord">
@@ -280,9 +280,9 @@ const breadcrumbItems = computed(() => [
                 :is-busy="isBusy"
                 @onExport="onExportHistory" />
 
-            <BAlert v-if="errorMessage" id="last-export-record-error-alert" variant="danger" class="mt-3" show>
+            <GAlert v-if="errorMessage" id="last-export-record-error-alert" variant="danger" class="mt-3" show>
                 {{ errorMessage }}
-            </BAlert>
+            </GAlert>
         </div>
 
         <GModal
diff --git a/client/src/components/History/Export/HistoryExportWizard.vue b/client/src/components/History/Export/HistoryExportWizard.vue
index c3ccd8a9cc59..6eb8a1d72b97 100644
--- a/client/src/components/History/Export/HistoryExportWizard.vue
+++ b/client/src/components/History/Export/HistoryExportWizard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard, BCardGroup, BFormGroup, BFormInput } from "bootstrap-vue";
+import { BCard, BCardGroup, BFormGroup, BFormInput } from "bootstrap-vue";
 import { computed, reactive, ref, watch } from "vue";
 
 import type { ModelStoreFormat } from "@/api";
@@ -12,6 +12,7 @@ import { DEFAULT_EXPORT_PARAMS } from "@/composables/shortTermStorage";
 
 import type { HistoryExportData, HistoryExportDestination } from "./types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ExportFormatSelector from "@/components/Common/ExportFormatSelector.vue";
 import ExportIncludeOptions from "@/components/Common/ExportIncludeOptions.vue";
 import ExportRemoteSourceSelector from "@/components/Common/ExportRemoteSourceSelector.vue";
@@ -260,9 +261,9 @@ function resetWizard() {
 
 <template>
     <div>
-        <BAlert v-if="errorMessage" show dismissible fade variant="danger" @dismissed="errorMessage = undefined">
+        <GAlert v-if="errorMessage" show dismissible fade variant="danger" @dismissed="errorMessage = undefined">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
         <GenericWizard
             class="history-export-wizard"
             :use="wizard"
diff --git a/client/src/components/History/Graph/HistoryGraphNodeBody.vue b/client/src/components/History/Graph/HistoryGraphNodeBody.vue
index 61ac36e2b3f9..2b00b00ff2cc 100644
--- a/client/src/components/History/Graph/HistoryGraphNodeBody.vue
+++ b/client/src/components/History/Graph/HistoryGraphNodeBody.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { useCreatingJob } from "@/composables/useCreatingJob";
@@ -9,6 +8,7 @@ import type { HistoryGraphNode } from "./historyGraphMapper";
 
 import JobDetailsTabs from "./JobDetailsTabs.vue";
 import ToolExecutionJobs from "./ToolExecutionJobs.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
 import RerunJobButton from "@/components/JobInformation/RerunJobButton.vue";
 import JobState from "@/components/JobStates/JobState.vue";
@@ -43,7 +43,7 @@ const { job } = useJobBasic(creatingJobId);
         :info-icon="infoIcon" />
     <div v-else>
         <LoadingSpan v-if="isDatasetLike && lookupLoading" message="Loading job details" />
-        <BAlert v-else-if="isDatasetLike && lookupError" variant="info" show class="mb-0">{{ lookupError }}</BAlert>
+        <GAlert v-else-if="isDatasetLike && lookupError" variant="info" show class="mb-0">{{ lookupError }}</GAlert>
         <GTabs v-else-if="isDatasetLike && creatingJobId">
             <template v-slot:nav-end>
                 <JobState v-if="job" :job="job" class="mr-2" />
@@ -55,6 +55,6 @@ const { job } = useJobBasic(creatingJobId);
                 :info-title="infoTitle"
                 :info-icon="infoIcon" />
         </GTabs>
-        <BAlert v-else show variant="info" class="mb-0">No details available for this node.</BAlert>
+        <GAlert v-else show variant="info" class="mb-0">No details available for this node.</GAlert>
     </div>
 </template>
diff --git a/client/src/components/History/Graph/HistoryGraphNodeDetails.vue b/client/src/components/History/Graph/HistoryGraphNodeDetails.vue
index 7329917ee8a1..ed914c57a7e1 100644
--- a/client/src/components/History/Graph/HistoryGraphNodeDetails.vue
+++ b/client/src/components/History/Graph/HistoryGraphNodeDetails.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
-
 import type { HistoryGraphNode } from "./historyGraphMapper";
 
 import HistoryGraphNodeBody from "./HistoryGraphNodeBody.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 interface Props {
     /** The selected graph node, or null when nothing is selected. */
@@ -18,6 +17,6 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <BAlert v-if="!node" show variant="info" class="mb-0">{{ emptyText }}</BAlert>
+    <GAlert v-if="!node" show variant="info" class="mb-0">{{ emptyText }}</GAlert>
     <HistoryGraphNodeBody v-else :node="node" />
 </template>
diff --git a/client/src/components/History/Graph/HistoryGraphOverview.vue b/client/src/components/History/Graph/HistoryGraphOverview.vue
index 9d715515d0f6..1e73012f82ee 100644
--- a/client/src/components/History/Graph/HistoryGraphOverview.vue
+++ b/client/src/components/History/Graph/HistoryGraphOverview.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { GraphEdge } from "@/components/Graph/types";
@@ -10,6 +9,7 @@ import type { HistoryGraphNode } from "./historyGraphMapper";
 import { historyNodeColor } from "./historyNodeColor";
 
 import HistoryGraphNodeDetails from "./HistoryGraphNodeDetails.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GraphView from "@/components/Graph/GraphView.vue";
 
 interface Props {
@@ -74,10 +74,10 @@ function onNodeSelected(node: HistoryGraphNode | null) {
         <div v-if="selectedNode" class="details-pane mt-2">
             <HistoryGraphNodeDetails :node="selectedNode" />
         </div>
-        <BAlert v-else show variant="info" class="mt-2 mb-0 py-1 flex-shrink-0">
+        <GAlert v-else show variant="info" class="mt-2 mb-0 py-1 flex-shrink-0">
             <FontAwesomeIcon :icon="faInfoCircle" class="mr-1" />
             Click on a node in the graph above to view its details.
-        </BAlert>
+        </GAlert>
     </div>
 </template>
 
diff --git a/client/src/components/History/Graph/HistoryGraphReport.vue b/client/src/components/History/Graph/HistoryGraphReport.vue
index 5b2b1e02e53c..330265d0a02e 100644
--- a/client/src/components/History/Graph/HistoryGraphReport.vue
+++ b/client/src/components/History/Graph/HistoryGraphReport.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { useMarkdown } from "@/composables/markdown";
 
 import { useHistoryGraphSummary } from "./useHistoryGraphSummary";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
@@ -23,12 +23,12 @@ const summaryHtml = computed(() => (summary.value ? renderMarkdown(summary.value
 <template>
     <div class="history-graph-report p-2">
         <LoadingSpan v-if="loading" message="Generating history summary" />
-        <BAlert v-else-if="error" variant="danger" show class="mb-0">
+        <GAlert v-else-if="error" variant="danger" show class="mb-0">
             Failed to generate the AI summary: {{ error }}
-        </BAlert>
+        </GAlert>
         <!-- eslint-disable-next-line vue/no-v-html — markdown is sanitised by useMarkdown -->
         <div v-else-if="summary" class="report-text" v-html="summaryHtml" />
-        <BAlert v-else show variant="info" class="mb-0">No summary available.</BAlert>
+        <GAlert v-else show variant="info" class="mb-0">No summary available.</GAlert>
     </div>
 </template>
 
diff --git a/client/src/components/History/Graph/HistoryGraphToolExecutions.vue b/client/src/components/History/Graph/HistoryGraphToolExecutions.vue
index 6885bf228d7e..98c96b0f7515 100644
--- a/client/src/components/History/Graph/HistoryGraphToolExecutions.vue
+++ b/client/src/components/History/Graph/HistoryGraphToolExecutions.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { faBolt, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { ref } from "vue";
 
 import type { HistoryGraphNode } from "./historyGraphMapper";
 
 import ToolExecutionJobs from "./ToolExecutionJobs.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 interface Props {
     /** Tool-execution graph nodes to list, in display order. */
@@ -37,9 +37,9 @@ function isExpanded(id: string): boolean {
 
 <template>
     <div class="history-graph-tool-executions p-2">
-        <BAlert v-if="nodes.length === 0" show variant="info" class="mb-0">
+        <GAlert v-if="nodes.length === 0" show variant="info" class="mb-0">
             No tool executions to show. Galaxy started capturing tool execution data with release 26.1.
-        </BAlert>
+        </GAlert>
         <template v-else>
             <div v-for="node in nodes" :key="node.id" class="ui-portlet-section mb-2">
                 <div
diff --git a/client/src/components/History/Graph/HistoryGraphView.vue b/client/src/components/History/Graph/HistoryGraphView.vue
index 6c724b7fcb3b..7c9501a14ee8 100644
--- a/client/src/components/History/Graph/HistoryGraphView.vue
+++ b/client/src/components/History/Graph/HistoryGraphView.vue
@@ -9,7 +9,7 @@ import {
     faMap,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BNav, BNavItem } from "bootstrap-vue";
+import { BNav, BNavItem } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, toRef, watch } from "vue";
 
@@ -21,6 +21,7 @@ import { useHistoryGraph } from "./useHistoryGraph";
 import HistoryGraphOverview from "./HistoryGraphOverview.vue";
 import HistoryGraphReport from "./HistoryGraphReport.vue";
 import HistoryGraphToolExecutions from "./HistoryGraphToolExecutions.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import NavigationTitle from "@/components/Common/NavigationTitle.vue";
 import HistoryDatasetsBadge from "@/components/History/HistoryDatasetsBadge.vue";
@@ -86,15 +87,15 @@ watch(activeTab, (val) => {
 
 <template>
     <div class="history-graph-view">
-        <BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>
+        <GAlert v-if="error" variant="danger" show>{{ error }}</GAlert>
         <LoadingSpan v-else-if="loading" message="Loading history graph" />
-        <BAlert v-else-if="graphNodes.length === 0" show variant="info" class="m-3">
+        <GAlert v-else-if="graphNodes.length === 0" show variant="info" class="m-3">
             This history is empty. Add datasets or run tools to populate it.
-        </BAlert>
-        <BAlert v-else-if="toolExecutionNodes.length === 0" show variant="info" class="m-3">
+        </GAlert>
+        <GAlert v-else-if="toolExecutionNodes.length === 0" show variant="info" class="m-3">
             No History Graph available. Please ensure that the History contains tool executions, and note that Galaxy
             started capturing the required tool execution data with release 26.1.
-        </BAlert>
+        </GAlert>
         <template v-else>
             <NavigationTitle
                 :icon="faBezierCurve"
@@ -138,14 +139,14 @@ watch(activeTab, (val) => {
                 </template>
             </NavigationTitle>
 
-            <BAlert
+            <GAlert
                 v-if="isTruncated && toolExecutionNodes.length > 0"
                 show
                 variant="warning"
                 class="mt-2 mb-0 py-1 flex-shrink-0">
                 <FontAwesomeIcon :icon="faExclamationTriangle" class="mr-1" />
                 Only considering first {{ toolExecutionNodes.length }} executions.
-            </BAlert>
+            </GAlert>
 
             <BNav pills class="mb-2 mt-2 p-2 bg-light border-bottom">
                 <BNavItem
diff --git a/client/src/components/History/Graph/JobDetailsTabs.vue b/client/src/components/History/Graph/JobDetailsTabs.vue
index 62416557e9af..394d3cfec389 100644
--- a/client/src/components/History/Graph/JobDetailsTabs.vue
+++ b/client/src/components/History/Graph/JobDetailsTabs.vue
@@ -2,11 +2,11 @@
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faInfoCircle, faSignOutAlt, faSlidersH } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, watch } from "vue";
 
 import { useJobParametersStore } from "@/stores/jobParametersStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTab from "@/components/BaseComponents/GTab.vue";
 import JobInformation from "@/components/JobInformation/JobInformation.vue";
 import JobOutputs from "@/components/JobInformation/JobOutputs.vue";
@@ -68,7 +68,7 @@ watch(
                 <span>Outputs</span>
             </template>
             <JobOutputs v-if="hasOutputs" :key="jobId" :job-outputs="paramsDisplay?.outputs" paginate />
-            <BAlert v-else show variant="info" class="mb-0">No outputs.</BAlert>
+            <GAlert v-else show variant="info" class="mb-0">No outputs.</GAlert>
         </GTab>
     </div>
 </template>
diff --git a/client/src/components/History/Graph/ToolExecutionJobs.vue b/client/src/components/History/Graph/ToolExecutionJobs.vue
index 10e90a2b1438..6cc82ce613af 100644
--- a/client/src/components/History/Graph/ToolExecutionJobs.vue
+++ b/client/src/components/History/Graph/ToolExecutionJobs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { BAlert, BPagination } from "bootstrap-vue";
+import { BPagination } from "bootstrap-vue";
 import { computed, ref, toRef } from "vue";
 
 import { useJobBasic } from "@/composables/useJobBasic";
@@ -8,6 +8,7 @@ import { useJobBasic } from "@/composables/useJobBasic";
 import { useToolExecutionJobs } from "./useToolExecutionJobs";
 
 import JobDetailsTabs from "./JobDetailsTabs.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
 import RerunJobButton from "@/components/JobInformation/RerunJobButton.vue";
 import JobState from "@/components/JobStates/JobState.vue";
@@ -48,7 +49,7 @@ const paginationPage = computed<number>({
 <template>
     <div>
         <LoadingSpan v-if="loading" message="Loading job details" />
-        <BAlert v-else-if="error" variant="info" show class="mb-0">{{ error }}</BAlert>
+        <GAlert v-else-if="error" variant="info" show class="mb-0">{{ error }}</GAlert>
         <template v-else-if="currentJob">
             <GTabs>
                 <template v-slot:nav-end>
diff --git a/client/src/components/History/HistoryList.vue b/client/src/components/History/HistoryList.vue
index d2aebe68cb85..080ce295f6bd 100644
--- a/client/src/components/History/HistoryList.vue
+++ b/client/src/components/History/HistoryList.vue
@@ -21,7 +21,7 @@
 
 import { faBurn, faColumns, faPlus, faTags, faTrash, faTrashRestore } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BNav, BNavItem, BPagination } from "bootstrap-vue";
+import { BButton, BNav, BNavItem, BPagination } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -44,6 +44,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import { getHistoryListFilters } from "./historyList";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import GOverlay from "@/components/BaseComponents/GOverlay.vue";
@@ -629,21 +630,21 @@ onMounted(async () => {
         </div>
 
         <div v-if="loading" class="h-100">
-            <BAlert variant="info" show>
+            <GAlert variant="info" show>
                 <LoadingSpan message="Loading histories" />
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else-if="!loading && !overlay && noItems" class="h-100">
-            <BAlert id="history-list-empty" variant="info" show>
+            <GAlert id="history-list-empty" variant="info" show>
                 No histories found. You may create or import new histories using the buttons above.
-            </BAlert>
+            </GAlert>
         </div>
         <span v-else-if="!loading && !overlay && (noResults || hasInvalidFilters)" class="h-100">
-            <BAlert v-if="!hasInvalidFilters" id="no-history-found" variant="info" show>
+            <GAlert v-if="!hasInvalidFilters" id="no-history-found" variant="info" show>
                 No histories found matching: <span class="font-weight-bold">{{ filterText }}</span>
-            </BAlert>
+            </GAlert>
 
-            <BAlert v-else id="no-history-found-invalid" variant="danger" show>
+            <GAlert v-else id="no-history-found-invalid" variant="danger" show>
                 <Heading h4 inline size="sm" class="flex-grow-1 mb-2">Invalid filters in query:</Heading>
                 <ul>
                     <li v-for="[invalidKey, value] in Object.entries(invalidFilters)" :key="invalidKey">
@@ -659,7 +660,7 @@ onMounted(async () => {
                     @click="filterText = `'${filterText}'`">
                     Match the exact query provided
                 </GLink>
-            </BAlert>
+            </GAlert>
         </span>
         <GOverlay
             v-else
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index 489cf10f38dc..9b075d34e95c 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faListAlt } from "@fortawesome/free-regular-svg-icons";
 import { faArchive, faBurn, faColumns, faSignInAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { BAlert, BBadge } from "bootstrap-vue";
+import { BBadge } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -13,6 +13,7 @@ import { useUserStore } from "@/stores/userStore";
 
 import { HistoriesFilters } from "./HistoriesFilters";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCard from "@/components/Common/GCard.vue";
 import ScrollList from "@/components/ScrollList/ScrollList.vue";
 
@@ -300,7 +301,7 @@ function getHistoryTitleBadges(history: HistorySummary) {
             <BBadge v-if="props.filter && !validFilter" class="alert-warning w-100 mb-2">
                 Search term is too short
             </BBadge>
-            <BAlert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</BAlert>
+            <GAlert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</GAlert>
         </template>
 
         <template v-slot:item="{ item: history }">
diff --git a/client/src/components/History/HistoryView.vue b/client/src/components/History/HistoryView.vue
index ba7932527cfa..9d5b24bafd7b 100644
--- a/client/src/components/History/HistoryView.vue
+++ b/client/src/components/History/HistoryView.vue
@@ -26,9 +26,9 @@
             </div>
         </BreadcrumbHeading>
 
-        <b-alert :show="copySuccess">
+        <GAlert :show="copySuccess">
             History imported and is now your active history. <b-link :to="importedHistoryLink">View here</b-link>.
-        </b-alert>
+        </GAlert>
 
         <CollectionPanel
             v-if="selectedCollections.length && selectedCollections[0].history_id == id"
@@ -54,12 +54,14 @@ import { useUserStore } from "@/stores/userStore";
 import CollectionPanel from "./CurrentCollection/CollectionPanel.vue";
 import HistoryPanel from "./CurrentHistory/HistoryPanel.vue";
 import CopyModal from "./Modals/CopyModal.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import HistoryOptions from "@/components/History/HistoryOptions.vue";
 
 export default {
     components: {
+        GAlert,
         HistoryPanel,
         CollectionPanel,
         CopyModal,
diff --git a/client/src/components/History/Modals/CopyModal.vue b/client/src/components/History/Modals/CopyModal.vue
index 10ca25303d22..76fff5f41a14 100644
--- a/client/src/components/History/Modals/CopyModal.vue
+++ b/client/src/components/History/Modals/CopyModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BFormRadioGroup } from "bootstrap-vue";
+import { BFormRadioGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -12,6 +12,7 @@ import localize from "@/utils/localization";
 import GForm from "@/components/BaseComponents/Form/GForm.vue";
 import GFormInput from "@/components/BaseComponents/Form/GFormInput.vue";
 import GFormLabel from "@/components/BaseComponents/Form/GFormLabel.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -112,16 +113,16 @@ async function copy() {
         :close-on-ok="false"
         @ok="copy">
         <transition name="fade">
-            <BAlert v-localize :show="isAnonymous" variant="warning">
+            <GAlert v-localize :show="isAnonymous" variant="warning">
                 As an anonymous user, unless you log in or register, you will lose your current history after copying
                 this history. You can <a href="/login/start">log in or register here</a>.
-            </BAlert>
+            </GAlert>
         </transition>
 
         <transition name="fade">
-            <BAlert v-if="loading" show>
+            <GAlert v-if="loading" show>
                 <LoadingSpan message="Copying History" />
-            </BAlert>
+            </GAlert>
         </transition>
 
         <transition>
diff --git a/client/src/components/History/Multiple/MultipleView.vue b/client/src/components/History/Multiple/MultipleView.vue
index c0d96b0898af..abcfad5cc1c0 100644
--- a/client/src/components/History/Multiple/MultipleView.vue
+++ b/client/src/components/History/Multiple/MultipleView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faCheckSquare, faClock, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -13,6 +13,7 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 
 import MultipleViewList from "./MultipleViewList.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 import SelectorModal from "@/components/History/Modals/SelectorModal.vue";
@@ -156,9 +157,9 @@ function showRecent() {
                 </div>
             </div>
         </div>
-        <BAlert v-if="!initialLoaded && historiesLoading" class="m-2" variant="info" show>
+        <GAlert v-if="!initialLoaded && historiesLoading" class="m-2" variant="info" show>
             <LoadingSpan message="Loading Histories" />
-        </BAlert>
+        </GAlert>
         <div v-else-if="histories.length" class="multi-history-panel d-flex flex-column h-100">
             <FilterMenu
                 name="History Multiview"
@@ -176,9 +177,9 @@ function showRecent() {
                 :show-modal.sync="showSelectModal"
                 @load-more="loadMore" />
         </div>
-        <BAlert v-else-if="!histories.length" class="m-2" variant="danger" show>
+        <GAlert v-else-if="!histories.length" class="m-2" variant="danger" show>
             <span v-localize class="font-weight-bold">No History found.</span>
-        </BAlert>
+        </GAlert>
         <SelectorModal
             v-show="showSelectModal"
             :multiple="true"
diff --git a/client/src/components/History/StorageOperations/StorageOperationHistoryView.vue b/client/src/components/History/StorageOperations/StorageOperationHistoryView.vue
index a094e9b731f5..8e88aaa42d8b 100644
--- a/client/src/components/History/StorageOperations/StorageOperationHistoryView.vue
+++ b/client/src/components/History/StorageOperations/StorageOperationHistoryView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BFormInput } from "bootstrap-vue";
+import { BFormInput } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { useStorageHistoryRunsWatcher } from "@/composables/useStorageRunWatcher";
@@ -9,6 +9,7 @@ import localize from "@/utils/localization";
 import { isTerminalRunState } from "@/utils/storageOperations";
 
 import StorageOperationRunsTable from "./StorageOperationRunsTable.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 
 type EnrichedStorageRun = ReturnType<typeof enrichRunWithSummary>;
@@ -173,9 +174,9 @@ function onFinishedPageChange(page: number) {
             {{ localize(", such as moving or copying data across storage locations.") }}
         </p>
 
-        <BAlert v-if="!hasRuns" show variant="secondary">
+        <GAlert v-if="!hasRuns" show variant="secondary">
             {{ localize("No tracked storage operations for this history.") }}
-        </BAlert>
+        </GAlert>
 
         <template v-else>
             <div class="d-flex flex-wrap align-items-center mb-2 gap-2">
diff --git a/client/src/components/History/StorageOperations/StorageOperationRunView.vue b/client/src/components/History/StorageOperations/StorageOperationRunView.vue
index d3b14dea8846..9d31fc8178ad 100644
--- a/client/src/components/History/StorageOperations/StorageOperationRunView.vue
+++ b/client/src/components/History/StorageOperations/StorageOperationRunView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BBadge, BPagination } from "bootstrap-vue";
+import { BBadge, BPagination } from "bootstrap-vue";
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
@@ -16,6 +16,7 @@ import localize from "@/utils/localization";
 import { getIneligibleReasonDescription, toTrackedStorageRun } from "@/utils/storageOperations";
 import { bytesToString } from "@/utils/utils";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import DatasetPopoverLink from "@/components/Common/DatasetPopoverLink.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
@@ -206,7 +207,7 @@ onBeforeUnmount(() => {
         <LoadingSpan v-if="!run" :message="localize('Loading storage operation run status')" />
 
         <template v-else>
-            <BAlert show variant="secondary">
+            <GAlert show variant="secondary">
                 <div class="d-flex align-items-center flex-wrap">
                     <strong class="mr-2">{{ localize("State:") }}</strong>
                     <StorageOperationRunStateBadge
@@ -221,7 +222,7 @@ onBeforeUnmount(() => {
                         <strong>{{ localize("Target store:") }}</strong> {{ targetStoreDisplayName }}
                     </span>
                 </div>
-            </BAlert>
+            </GAlert>
 
             <div class="mb-3">
                 <strong>{{ localize("Total:") }}</strong> {{ run.total_count }}
@@ -244,9 +245,9 @@ onBeforeUnmount(() => {
                     height-class="storage-operation-progress-md" />
             </div>
 
-            <BAlert v-if="!isTerminal" show variant="info">
+            <GAlert v-if="!isTerminal" show variant="info">
                 {{ localize("This run is still in progress. Status is updated automatically.") }}
-            </BAlert>
+            </GAlert>
 
             <div class="mt-3">
                 <Heading h3 size="sm">{{ localize("Failed or Skipped Items") }}</Heading>
diff --git a/client/src/components/History/TargetHistorySelector.vue b/client/src/components/History/TargetHistorySelector.vue
index dd55926ddddc..58f4635d5c5b 100644
--- a/client/src/components/History/TargetHistorySelector.vue
+++ b/client/src/components/History/TargetHistorySelector.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -7,6 +6,7 @@ import { useTargetHistoryUploadState } from "@/composables/history/useTargetHist
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import SelectorModal from "@/components/History/Modals/SelectorModal.vue";
 import TargetHistoryLink from "@/components/History/TargetHistoryLink.vue";
 
@@ -72,9 +72,9 @@ function handleHistorySelected(history: { id: string }) {
             </a>
         </div>
 
-        <BAlert v-if="warningMessage" show variant="warning" class="mb-2 py-1">
+        <GAlert v-if="warningMessage" show variant="warning" class="mb-2 py-1">
             {{ warningMessage }}
-        </BAlert>
+        </GAlert>
 
         <SelectorModal
             v-if="canChangeHistory"
diff --git a/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue b/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue
index 76798ccd70c4..68d9c4283ef6 100644
--- a/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue
+++ b/client/src/components/History/WorkflowExtraction/WorkflowExtractionMessages.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BPopover } from "bootstrap-vue";
+import { BPopover } from "bootstrap-vue";
 import { ref } from "vue";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 
 const props = defineProps<{
@@ -47,7 +48,7 @@ const warningsContext = ref<"alert" | "popover">("alert");
                 </div>
             </BPopover>
         </div>
-        <BAlert
+        <GAlert
             v-if="props.warnings.length && warningsContext === 'alert'"
             variant="warning"
             fade
@@ -55,6 +56,6 @@ const warningsContext = ref<"alert" | "popover">("alert");
             dismissible
             @dismissed="warningsContext = 'popover'">
             <div v-for="(warning, index) in props.warnings" :key="index">{{ warning }}</div>
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/History/WorkflowExtractionForm.vue b/client/src/components/History/WorkflowExtractionForm.vue
index 80dc8ce05466..76da92049a4a 100644
--- a/client/src/components/History/WorkflowExtractionForm.vue
+++ b/client/src/components/History/WorkflowExtractionForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faCheck, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -32,6 +31,7 @@ import JobDetails from "../JobInformation/JobDetails.vue";
 import LoadingSpan from "../LoadingSpan.vue";
 import WorkflowExtractionCard from "./WorkflowExtraction/WorkflowExtractionCard.vue";
 import WorkflowExtractionMessages from "./WorkflowExtraction/WorkflowExtractionMessages.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = defineProps<{
     historyId: string;
@@ -408,10 +408,10 @@ function stepKind(job: ExtractionRow): string {
         <div class="workflow-extraction-header">
             <BreadcrumbHeading :items="breadcrumbItems" />
 
-            <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
-            <BAlert v-if="loading" variant="info" show>
+            <GAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
+            <GAlert v-if="loading" variant="info" show>
                 <LoadingSpan message="Extracting workflow from history" />
-            </BAlert>
+            </GAlert>
             <div v-if="!loading && jobsList.length" class="d-flex flex-column flex-gapy-1">
                 <div class="workflow-extraction-actions">
                     <GFormInput
@@ -435,13 +435,13 @@ function stepKind(job: ExtractionRow): string {
                 </div>
                 <WorkflowExtractionMessages :warnings="warnings" />
             </div>
-            <BAlert
+            <GAlert
                 v-if="!loading && !errorMessage && !jobsList.length"
                 data-description="no-workflow-message"
                 variant="info"
                 show>
                 No workflow could be extracted from this history.
-            </BAlert>
+            </GAlert>
         </div>
 
         <div v-if="jobsList.length" class="workflow-extraction-list">
diff --git a/client/src/components/HistoryExport/ToLink.vue b/client/src/components/HistoryExport/ToLink.vue
index 932704d7ed80..43acad8c8147 100644
--- a/client/src/components/HistoryExport/ToLink.vue
+++ b/client/src/components/HistoryExport/ToLink.vue
@@ -1,13 +1,13 @@
 <template>
     <div>
-        <b-alert v-if="errorMessage" show variant="danger" dismissible @dismissed="errorMessage = null">
+        <GAlert v-if="errorMessage" show variant="danger" dismissible @dismissed="errorMessage = null">
             {{ errorMessage }}
             <JobError
                 v-if="jobError"
                 style="margin-top: 15px"
                 header="History export job ended in error"
                 :job="jobError" />
-        </b-alert>
+        </GAlert>
         <div v-if="loadingExports">
             <LoadingSpan message="Loading history export information from Galaxy server." />
         </div>
@@ -18,10 +18,10 @@
             Link for download ready
             <ExportLink :history-export="latestExport" />
             <p>Use this link to download the archive or import it on another Galaxy server.</p>
-            <b-alert show variant="warning"
+            <GAlert show variant="warning"
                 >History archives are removed at regular intervals. For permanent storage download the archive, export
                 to a repository or import the archive on another Galaxy server.
-            </b-alert>
+            </GAlert>
         </div>
         <div v-else-if="hasReadyExport">
             <p>An out of date export is ready <ExportLink :history-export="latestReadyExport" />.</p>
@@ -56,13 +56,19 @@ import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import ExportLink from "./ExportLink.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import JobError from "@/components/JobInformation/JobError.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
-    components: { LoadingSpan, ExportLink, JobError },
+    components: {
+        GAlert,
+        LoadingSpan,
+        ExportLink,
+        JobError,
+    },
     props: {
         historyId: {
             type: String,
diff --git a/client/src/components/HistoryExport/ToRemoteFile.test.js b/client/src/components/HistoryExport/ToRemoteFile.test.js
index 4e6a3cfd2da2..d38edfe31443 100644
--- a/client/src/components/HistoryExport/ToRemoteFile.test.js
+++ b/client/src/components/HistoryExport/ToRemoteFile.test.js
@@ -49,6 +49,6 @@ describe("ToRemoteFile.vue", () => {
         await flushPromises();
         expect(lastPutRequest.directory_uri).toEqual("gxfiles://");
         expect(lastPutRequest.file_name).toEqual("export.tar.gz");
-        expect(wrapper.find("b-alert-stub").attributes("variant")).toEqual("success");
+        expect(wrapper.find("galert-stub").attributes("variant")).toEqual("success");
     });
 });
diff --git a/client/src/components/HistoryExport/ToRemoteFile.vue b/client/src/components/HistoryExport/ToRemoteFile.vue
index 3e353e74203d..a63707a595d6 100644
--- a/client/src/components/HistoryExport/ToRemoteFile.vue
+++ b/client/src/components/HistoryExport/ToRemoteFile.vue
@@ -1,21 +1,21 @@
 <template>
     <div class="export-to-remote-file">
-        <b-alert v-if="errorMessage" show variant="danger" dismissible @dismissed="errorMessage = null">
+        <GAlert v-if="errorMessage" show variant="danger" dismissible @dismissed="errorMessage = null">
             {{ errorMessage }}
             <JobError
                 v-if="jobError"
                 style="margin-top: 15px"
                 header="History export job ended in error"
                 :job="jobError" />
-        </b-alert>
+        </GAlert>
         <div v-if="waitingOnJob">
             <LoadingSpan message="Executing history export job, this will likely take a while." />
         </div>
         <div v-else-if="jobComplete">
-            <b-alert show variant="success" dismissible @dismissed="reset">
+            <GAlert show variant="success" dismissible @dismissed="reset">
                 <h2 class="h-sm">Done!</h2>
                 <p>History successfully exported.</p>
-            </b-alert>
+            </GAlert>
         </div>
         <ExportForm v-else what="history archive" @export="doExport" />
     </div>
@@ -30,6 +30,7 @@ import { waitOnJob } from "@/components/JobStates/wait";
 import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ExportForm from "@/components/Common/ExportForm.vue";
 import JobError from "@/components/JobInformation/JobError.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -38,6 +39,7 @@ Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GAlert,
         ExportForm,
         LoadingSpan,
         JobError,
diff --git a/client/src/components/ImportData/zip/ZipFileSelector.vue b/client/src/components/ImportData/zip/ZipFileSelector.vue
index 163aa212c9e0..9d74d20ba12d 100644
--- a/client/src/components/ImportData/zip/ZipFileSelector.vue
+++ b/client/src/components/ImportData/zip/ZipFileSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BPagination } from "bootstrap-vue";
+import { BPagination } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -7,6 +7,7 @@ import { usePagination } from "@/composables/pagination";
 import type { ArchiveSource, ImportableFile, ImportableZipContents } from "@/composables/zipExplorer";
 import { useUserStore } from "@/stores/userStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import Heading from "@/components/Common/Heading.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
@@ -157,7 +158,7 @@ function onSearch(value: string) {
         <div v-if="paginatedWorkflows.length > 0" class="d-flex flex-column w-100">
             <Heading h3 separator> Workflows </Heading>
 
-            <BAlert v-if="isAnonymous" variant="warning" show fade>You must be logged in to import workflows</BAlert>
+            <GAlert v-if="isAnonymous" variant="warning" show fade>You must be logged in to import workflows</GAlert>
             <p>Here you can select workflows compatible with Galaxy and import them into your account.</p>
 
             <div class="d-flex flex-wrap">
@@ -188,9 +189,9 @@ function onSearch(value: string) {
             </div>
         </div>
 
-        <BAlert v-if="searchQuery && filteredWorkflows.length === 0 && filteredFiles.length === 0" variant="info" show>
+        <GAlert v-if="searchQuery && filteredWorkflows.length === 0 && filteredFiles.length === 0" variant="info" show>
             No files found matching "{{ searchQuery }}". Try a different search term.
-        </BAlert>
+        </GAlert>
 
         <div v-if="showPagination" class="d-flex justify-content-center py-3 mt-3">
             <BPagination
diff --git a/client/src/components/ImportData/zip/ZipImportWizard.vue b/client/src/components/ImportData/zip/ZipImportWizard.vue
index 7c83e2ea9646..00aff9c996f9 100644
--- a/client/src/components/ImportData/zip/ZipImportWizard.vue
+++ b/client/src/components/ImportData/zip/ZipImportWizard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -23,6 +22,7 @@ import ZipFileSelector from "./ZipFileSelector.vue";
 import ZipImportSummary from "./ZipImportSummary.vue";
 import ZipPreview from "./ZipPreview.vue";
 import ZipSelector from "./ZipSelector.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
 
@@ -187,16 +187,16 @@ archiveExplorerEventBus.on((key, source) => {
 
 <template>
     <div>
-        <BAlert
+        <GAlert
             v-if="props.showTargetHistoryWarning && targetHistoryWarning && hasRegularFilesToImport"
             show
             variant="warning">
             {{ targetHistoryWarning }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="errorMessage" show dismissible fade variant="danger" @dismissed="errorMessage = undefined">
+        <GAlert v-if="errorMessage" show dismissible fade variant="danger" @dismissed="errorMessage = undefined">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
         <GenericWizard
             container-component="div"
diff --git a/client/src/components/ImportSuccess.vue b/client/src/components/ImportSuccess.vue
index ef0b4e9c3222..c75acf5aff27 100644
--- a/client/src/components/ImportSuccess.vue
+++ b/client/src/components/ImportSuccess.vue
@@ -3,6 +3,7 @@ import { computed, watch } from "vue";
 
 import { useJobStore } from "@/stores/jobStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 
 interface Props {
@@ -32,7 +33,7 @@ watch(() => props.jobId, init, { immediate: true });
 </script>
 
 <template>
-    <b-alert show variant="success" dismissible @dismissed="emit('dismissed')">
+    <GAlert show variant="success" dismissible @dismissed="emit('dismissed')">
         <span class="mb-1 h-sm">Done!</span>
         <p v-if="historyId">
             {{ identifierTextCapitalized }} imported into
@@ -45,5 +46,5 @@ watch(() => props.jobId, init, { immediate: true });
             {{ identifierTextCapitalized }} imported, check out
             <router-link :to="linkToList">your {{ identifierTextPlural }}</router-link>
         </p>
-    </b-alert>
+    </GAlert>
 </template>
diff --git a/client/src/components/InteractiveTools/InteractiveTools.vue b/client/src/components/InteractiveTools/InteractiveTools.vue
index edae5f88a5ed..fe0f9dce584c 100644
--- a/client/src/components/InteractiveTools/InteractiveTools.vue
+++ b/client/src/components/InteractiveTools/InteractiveTools.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faExternalLinkAlt, faStop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormInput } from "bootstrap-vue";
+import { BButton, BFormInput } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -9,6 +9,7 @@ import { useRouter } from "vue-router/composables";
 import type { TableField } from "@/components/Common/GTable.types";
 import { useInteractiveToolsStore } from "@/stores/interactiveToolsStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import GTable from "@/components/Common/GTable.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -109,9 +110,9 @@ onMounted(() => {
 
 <template>
     <div aria-labelledby="interactive-tools-heading">
-        <BAlert v-for="(message, index) in messages" :key="index" :show="3" variant="danger">
+        <GAlert v-for="(message, index) in messages" :key="index" :show="3" variant="danger">
             {{ message }}
-        </BAlert>
+        </GAlert>
 
         <Heading id="interactive-tools-heading" h1 separator inline size="lg"> Active Interactive Tools </Heading>
 
@@ -126,13 +127,13 @@ onMounted(() => {
 
         <GTable id="interactive-tool-table" show-empty striped :fields="fields" :items="filteredTools">
             <template v-slot:empty>
-                <BAlert variant="info" show class="mb-0">
+                <GAlert variant="info" show class="mb-0">
                     <div v-if="isActiveToolsListEmpty">You do not have active interactive tools yet</div>
                     <div v-else-if="showNotFound">
                         No matching entries found for:
                         <span class="font-weight-bold"> {{ filter }} </span>.
                     </div>
-                </BAlert>
+                </GAlert>
             </template>
 
             <template v-slot:cell(actions)="{ item }">
diff --git a/client/src/components/JobMetrics/JobMetrics.vue b/client/src/components/JobMetrics/JobMetrics.vue
index 7eed99a6025b..419891ce08da 100644
--- a/client/src/components/JobMetrics/JobMetrics.vue
+++ b/client/src/components/JobMetrics/JobMetrics.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, unref, watch } from "vue";
 
 import { useJobMetricsStore } from "@/stores/jobMetricsStore";
@@ -9,6 +8,7 @@ import { worldwideCarbonIntensity, worldwidePowerUsageEffectiveness } from "./Ca
 import Heading from "../Common/Heading.vue";
 import AwsEstimate from "./AwsEstimate.vue";
 import CarbonEmissions from "./CarbonEmissions/CarbonEmissions.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 interface Props {
     datasetFilesize?: number;
@@ -204,5 +204,5 @@ const estimatedServerInstance = computed(() => {
             :cores-allocated="coresAllocated"
             :memory-allocated-in-mebibyte="memoryAllocatedInMebibyte" />
     </div>
-    <BAlert v-else variant="info" show> No metrics available for this job. </BAlert>
+    <GAlert v-else variant="info" show> No metrics available for this job. </GAlert>
 </template>
diff --git a/client/src/components/JobParameters/JobParameters.vue b/client/src/components/JobParameters/JobParameters.vue
index dcda4d957337..321d3c293d08 100644
--- a/client/src/components/JobParameters/JobParameters.vue
+++ b/client/src/components/JobParameters/JobParameters.vue
@@ -32,9 +32,9 @@
                     </tr>
                 </tbody>
             </table>
-            <b-alert :show="hasParameterErrors" variant="danger">
+            <GAlert :show="hasParameterErrors" variant="danger">
                 One or more of your original parameters may no longer be valid or displayed properly.
-            </b-alert>
+            </GAlert>
         </div>
         <div v-if="isSingleParam" id="single-param">
             <div v-if="Array.isArray(singleParam)">
@@ -63,11 +63,13 @@ import Heading from "../Common/Heading.vue";
 import JobOutputs from "../JobInformation/JobOutputs.vue";
 import DataFetchRequestParameter from "./DataFetchRequestParameter.vue";
 import JobParametersArrayValue from "./JobParametersArrayValue.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GAlert,
         DataFetchRequestParameter,
         Heading,
         JobOutputs,
diff --git a/client/src/components/Landing/FetchGrid.vue b/client/src/components/Landing/FetchGrid.vue
index 8aa7daeebc3b..70e5e6cb82dd 100644
--- a/client/src/components/Landing/FetchGrid.vue
+++ b/client/src/components/Landing/FetchGrid.vue
@@ -10,6 +10,7 @@ import { useAgGrid } from "@/composables/useAgGrid";
 import { type DerivedColumn, type FetchTable, fetchTargetToTable, type RowsType, tableToRequest } from "./fetchModels";
 import { enforceColumnUniqueness, useGridHelpers } from "./gridHelpers";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCard from "@/components/Common/GCard.vue";
 import DataFetchRequestParameter from "@/components/JobParameters/DataFetchRequestParameter.vue";
 
@@ -223,25 +224,25 @@ function handleDataUpdated(event: any) {
     <GCard :title="title" :secondary-actions="secondaryActions">
         <template v-slot:description>
             <div v-if="viewMode === 'raw'">
-                <BAlert v-if="!richSupportForTarget" show dismissible variant="warning">
+                <GAlert v-if="!richSupportForTarget" show dismissible variant="warning">
                     This target is using advanced features that we don't yet support a rich tabular view for, an
                     annotated request is shown here and can still be used to import the target data. If you would like
                     this to see this kind of target supported, please
                     <a href="https://github.com/galaxyproject/galaxy/issues">create an issue on GitHub</a>
                     titled something like "Support Rich View of Data Fetch Request" and include this request as an
                     example.
-                </BAlert>
-                <BAlert v-if="modified" show dismissible variant="warning">
+                </GAlert>
+                <GAlert v-if="modified" show dismissible variant="warning">
                     This shows the initial data import request, you have modified the import data and your modifications
                     will be reflected in the final data import but not in this initial request.
-                </BAlert>
+                </GAlert>
                 <DataFetchRequestParameter :parameter-value="props.target" />
             </div>
             <div v-else-if="viewMode === 'table'" :class="[theme]">
-                <BAlert v-if="modified" show dismissible variant="info">
+                <GAlert v-if="modified" show dismissible variant="info">
                     You have modified the import data from the initial request, these modifications will be reflected in
                     the final data import.
-                </BAlert>
+                </GAlert>
                 <AgGridVue
                     :row-data="gridRowData"
                     :column-defs="gridColumns"
diff --git a/client/src/components/Landing/FetchLanding.vue b/client/src/components/Landing/FetchLanding.vue
index fd759301c4f2..4d0140a09c9e 100644
--- a/client/src/components/Landing/FetchLanding.vue
+++ b/client/src/components/Landing/FetchLanding.vue
@@ -8,6 +8,7 @@ import { useFetchJobMonitor } from "@/composables/fetch";
 import { useHistoryStore } from "@/stores/historyStore";
 
 import FetchGrids from "./FetchGrids.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ButtonSpinner from "@/components/Common/ButtonSpinner.vue";
 import FormCardSticky from "@/components/Form/FormCardSticky.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -71,11 +72,11 @@ const { fetchAndWatch, fetchComplete, fetchError, waitingOnFetch } = useFetchJob
         </template>
         <template v-slot>
             <LoadingSpan v-if="!currentHistoryId" />
-            <BAlert v-else-if="fetchComplete" variant="success" show> Data imported successfully. </BAlert>
-            <BAlert v-else-if="fetchError" variant="danger" show> Error importing data: {{ fetchError }} </BAlert>
-            <BAlert v-else-if="waitingOnFetch" variant="info" show>
+            <GAlert v-else-if="fetchComplete" variant="success" show> Data imported successfully. </GAlert>
+            <GAlert v-else-if="fetchError" variant="danger" show> Error importing data: {{ fetchError }} </GAlert>
+            <GAlert v-else-if="waitingOnFetch" variant="info" show>
                 <LoadingSpan message="Importing data" />
-            </BAlert>
+            </GAlert>
             <FetchGrids v-else ref="fetchGrids" :targets="props.targets" />
         </template>
     </FormCardSticky>
diff --git a/client/src/components/Landing/ToolLanding.vue b/client/src/components/Landing/ToolLanding.vue
index 816d2b576e41..9f60e3063a09 100644
--- a/client/src/components/Landing/ToolLanding.vue
+++ b/client/src/components/Landing/ToolLanding.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -7,6 +6,7 @@ import type { FetchTargets } from "@/api/tools";
 import { useToolLandingStore } from "@/stores/toolLandingStore";
 
 import FetchLanding from "./FetchLanding.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
@@ -49,9 +49,9 @@ const fetchTargets = computed<FetchTargets | null>(() => {
 <template>
     <div>
         <div v-if="claimState.errorMessage">
-            <BAlert variant="danger" show>
+            <GAlert variant="danger" show>
                 {{ claimState.errorMessage }}
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else-if="!claimState.toolId">
             <LoadingSpan message="Loading tool parameters" />
diff --git a/client/src/components/Landing/WorkflowLanding.vue b/client/src/components/Landing/WorkflowLanding.vue
index 9c8f61cfeaae..f5b29288363a 100644
--- a/client/src/components/Landing/WorkflowLanding.vue
+++ b/client/src/components/Landing/WorkflowLanding.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 
 import { useActivityStore } from "@/stores/activityStore";
 import { useWorkflowLandingStore } from "@/stores/workflowLandingStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowRun from "@/components/Workflow/Run/WorkflowRun.vue";
 
@@ -34,9 +34,9 @@ claimWorkflow(props.uuid, props.public, props.secret).then(() => {
 <template>
     <div>
         <div v-if="claimState.errorMessage">
-            <BAlert variant="danger" show>
+            <GAlert variant="danger" show>
                 {{ claimState.errorMessage }}
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else-if="!claimState.workflowId">
             <LoadingSpan message="Loading workflow parameters" />
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue
index 68cb3d3080ab..d94fc6a3e0c7 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue
@@ -1,19 +1,22 @@
 <template>
     <div>
         <div class="text-center">
-            <b-alert v-if="is_admin" show variant="warning">
+            <GAlert v-if="is_admin" show variant="warning">
                 You are logged in as an <strong>administrator</strong> therefore you can manage any folder on this
                 Galaxy instance.
-            </b-alert>
-            <b-alert v-else show variant="warning">
+            </GAlert>
+            <GAlert v-else show variant="warning">
                 You can assign any number of roles to any of the following permission types.
-            </b-alert>
+            </GAlert>
         </div>
     </div>
 </template>
 
 <script>
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 export default {
+    components: { GAlert },
     props: {
         is_admin: {
             type: Boolean,
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 24e9fc65e556..4daa6f504c7f 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -2,15 +2,7 @@
 import { faBook, faCaretDown, faDownload, faHome, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import {
-    BAlert,
-    BButton,
-    BDropdown,
-    BDropdownDivider,
-    BDropdownGroup,
-    BDropdownItem,
-    BFormCheckbox,
-} from "bootstrap-vue";
+import { BButton, BDropdown, BDropdownDivider, BDropdownGroup, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { computed, reactive, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -27,6 +19,7 @@ import { Toast } from "@/composables/toast";
 import { getAppRoot } from "@/onload";
 import { useUserStore } from "@/stores/userStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import CollectionCreatorIndex from "@/components/Collections/CollectionCreatorIndex.vue";
 import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
 import LibraryBreadcrumb from "@/components/Libraries/LibraryFolder/LibraryBreadcrumb.vue";
@@ -414,7 +407,7 @@ function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolea
             </div>
         </div>
 
-        <BAlert v-model="progress" :dismissible="progressStatus.runningCount === 0" variant="info" class="mb-1">
+        <GAlert v-model="progress" :dismissible="progressStatus.runningCount === 0" variant="info" class="mb-1">
             <ProgressBar
                 :loading="progressStatus.runningCount > 0"
                 :note="progressNote"
@@ -422,7 +415,7 @@ function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolea
                 :ok-count="progressStatus.okCount"
                 :error-count="progressStatus.errorCount"
                 :running-count="progressStatus.runningCount" />
-        </BAlert>
+        </GAlert>
 
         <LibraryBreadcrumb
             v-if="props.metadata && props.metadata.full_path"
diff --git a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
index 6249b5099b8a..8de7ab24c5c1 100644
--- a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
+++ b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
@@ -26,9 +26,9 @@
                 </div>
             </b-col>
             <b-col>
-                <b-alert show variant="info">
+                <GAlert show variant="info">
                     <div v-html="alert" />
-                </b-alert>
+                </GAlert>
             </b-col>
         </b-row>
     </div>
@@ -43,9 +43,12 @@ import VueObserveVisibility from "vue-observe-visibility";
 
 import { Services } from "@/components/Libraries/LibraryPermissions/services";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 Vue.use(VueObserveVisibility);
 export default {
     components: {
+        GAlert,
         Multiselect,
     },
     props: {
diff --git a/client/src/components/License/LicenseSelector.vue b/client/src/components/License/LicenseSelector.vue
index 523da6173793..2908ff5d7422 100644
--- a/client/src/components/License/LicenseSelector.vue
+++ b/client/src/components/License/LicenseSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { watchImmediate } from "@vueuse/core";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 import Multiselect from "vue-multiselect";
 
@@ -8,6 +7,7 @@ import { GalaxyApi } from "@/api";
 import type { components } from "@/api/schema";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import License from "@/components/License/License.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -80,12 +80,12 @@ watchImmediate(
 
 <template>
     <div>
-        <BAlert v-if="licensesLoading" variant="info" class="m-0" show>
+        <GAlert v-if="licensesLoading" variant="info" class="m-0" show>
             <LoadingSpan message="Loading licenses" />
-        </BAlert>
-        <BAlert v-else-if="errorMessage" variant="danger" class="m-0" show>
+        </GAlert>
+        <GAlert v-else-if="errorMessage" variant="danger" class="m-0" show>
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
         <Multiselect
             v-else
             v-model="currentLicense"
diff --git a/client/src/components/Login/ChangePassword.vue b/client/src/components/Login/ChangePassword.vue
index 8aa4f78650c7..d2953fa287c7 100644
--- a/client/src/components/Login/ChangePassword.vue
+++ b/client/src/components/Login/ChangePassword.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import axios from "axios";
-import { BAlert, BButton, BCard, BForm, BFormGroup, BFormInput } from "bootstrap-vue";
+import { BButton, BCard, BForm, BFormGroup, BFormInput } from "bootstrap-vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface Props {
     token?: string;
     expiredUser?: string;
@@ -44,9 +46,9 @@ async function submit() {
 
 <template>
     <BForm @submit.prevent="submit">
-        <BAlert v-if="!!message" :variant="variant" show>
+        <GAlert v-if="!!message" :variant="variant" show>
             {{ message }}
-        </BAlert>
+        </GAlert>
 
         <BCard header="Change your password">
             <BFormGroup v-if="expiredUser" label="Current Password">
diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue
index a59328ad69c1..34db28aff088 100644
--- a/client/src/components/Login/LoginForm.vue
+++ b/client/src/components/Login/LoginForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
 import {
-    BAlert,
     BCard,
     BCardBody,
     BCardFooter,
@@ -24,6 +23,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import GButton from "../BaseComponents/GButton.vue";
 import GLink from "../BaseComponents/GLink.vue";
 import VerticalSeparator from "../Common/VerticalSeparator.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import NewUserConfirmation from "@/components/Login/NewUserConfirmation.vue";
 import ExternalLogin from "@/components/User/ExternalIdentities/ExternalLogin.vue";
 
@@ -162,16 +162,16 @@ function returnToLogin() {
         <div class="d-flex justify-content-md-center">
             <template v-if="!confirmURL">
                 <div>
-                    <BAlert :show="!!messageText" :variant="messageVariant">
+                    <GAlert :show="!!messageText" :variant="messageVariant">
                         <!-- eslint-disable-next-line vue/no-v-html -->
                         <span v-html="messageText" />
-                    </BAlert>
+                    </GAlert>
 
-                    <BAlert :show="!!connectExternalProvider" variant="info">
+                    <GAlert :show="!!connectExternalProvider" variant="info">
                         There already exists a user with the email <i>{{ connectExternalEmail }}</i
                         >. In order to associate this account with <i>{{ connectExternalLabel }}</i
                         >, you must first login to your existing account.
-                    </BAlert>
+                    </GAlert>
 
                     <div>
                         <BCard no-body style="width: fit-content">
diff --git a/client/src/components/Login/NewUserConfirmation.vue b/client/src/components/Login/NewUserConfirmation.vue
index 60043b667cc6..9ebc337f9d78 100644
--- a/client/src/components/Login/NewUserConfirmation.vue
+++ b/client/src/components/Login/NewUserConfirmation.vue
@@ -1,22 +1,14 @@
 <script setup lang="ts">
 import axios from "axios";
-import {
-    BAlert,
-    BButton,
-    BCard,
-    BCardBody,
-    BCardFooter,
-    BEmbed,
-    BForm,
-    BFormCheckbox,
-    BFormGroup,
-} from "bootstrap-vue";
+import { BButton, BCard, BCardBody, BCardFooter, BEmbed, BForm, BFormCheckbox, BFormGroup } from "bootstrap-vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface Props {
     termsUrl?: string;
     registrationWarningMessage?: string;
@@ -69,13 +61,13 @@ async function submit() {
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col col-lg-6">
-                <BAlert :show="!!registrationWarningMessage" variant="info">
+                <GAlert :show="!!registrationWarningMessage" variant="info">
                     {{ registrationWarningMessage }}
-                </BAlert>
+                </GAlert>
 
-                <BAlert :show="!!messageText" :variant="messageVariant">
+                <GAlert :show="!!messageText" :variant="messageVariant">
                     {{ messageText }}
-                </BAlert>
+                </GAlert>
 
                 <BForm id="confirmation" @submit.prevent="submit()">
                     <BCard no-body header="Confirm new account creation">
diff --git a/client/src/components/Markdown/Editor/CellAdd.test.js b/client/src/components/Markdown/Editor/CellAdd.test.js
index 613fcee3edb7..e1daa3f9df64 100644
--- a/client/src/components/Markdown/Editor/CellAdd.test.js
+++ b/client/src/components/Markdown/Editor/CellAdd.test.js
@@ -1,5 +1,4 @@
 import { mount } from "@vue/test-utils";
-import { BAlert } from "bootstrap-vue";
 import { describe, expect, it, vi } from "vitest";
 
 import { useServerMock } from "@/api/client/__mocks__";
@@ -7,6 +6,7 @@ import { useServerMock } from "@/api/client/__mocks__";
 import CellAdd from "./CellAdd.vue";
 import CellButton from "./CellButton.vue";
 import CellOption from "./CellOption.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
@@ -33,7 +33,7 @@ const mountTarget = () => {
     return mount(CellAdd, {
         attachTo: createContainer(),
         global: {
-            components: { BAlert, CellButton, CellOption, DelayedInput, Popper },
+            components: { GAlert, CellButton, CellOption, DelayedInput, Popper },
         },
     });
 };
@@ -68,8 +68,8 @@ describe("CellAdd.vue", () => {
         await wrapper.vm.$nextTick();
         wrapper.findComponent(DelayedInput).vm.$emit("change", "nonexistent");
         await wrapper.vm.$nextTick();
-        expect(wrapper.findComponent(BAlert).exists()).toBe(true);
-        expect(wrapper.findComponent(BAlert).text()).toContain('No results found for "nonexistent".');
+        expect(wrapper.findComponent(GAlert).exists()).toBe(true);
+        expect(wrapper.findComponent(GAlert).text()).toContain('No results found for "nonexistent".');
     });
 
     it("emits a 'click' event when a cell option is selected", async () => {
diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index dd8784bace65..5b37c8462638 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -24,7 +24,7 @@
                         </div>
                     </div>
                 </div>
-                <BAlert v-else class="m-1 p-1" variant="info" show> No results found for "{{ query }}". </BAlert>
+                <GAlert v-else class="m-1 p-1" variant="info" show> No results found for "{{ query }}". </GAlert>
             </div>
         </Popper>
     </div>
@@ -32,7 +32,6 @@
 
 <script setup lang="ts">
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { BAlert } from "bootstrap-vue";
 import { computed, onMounted, type Ref, ref } from "vue";
 
 import { getVisualizations } from "./services";
@@ -41,6 +40,7 @@ import type { CellType, TemplateEntry } from "./types";
 
 import CellButton from "./CellButton.vue";
 import CellOption from "./CellOption.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
diff --git a/client/src/components/Markdown/Editor/Configurations/ConfigureGalaxy.vue b/client/src/components/Markdown/Editor/Configurations/ConfigureGalaxy.vue
index 8a22fa806d5c..d48074bb2f6f 100644
--- a/client/src/components/Markdown/Editor/Configurations/ConfigureGalaxy.vue
+++ b/client/src/components/Markdown/Editor/Configurations/ConfigureGalaxy.vue
@@ -1,16 +1,15 @@
 <template>
     <div class="p-2">
         <ConfigureHeader @cancel="$emit('cancel')" />
-        <BAlert v-if="errorMessage" variant="warning" show>{{ errorMessage }}</BAlert>
-        <BAlert v-else-if="!requiredObject || requirementFulfilled" v-localize variant="info" show>
+        <GAlert v-if="errorMessage" variant="warning" show>{{ errorMessage }}</GAlert>
+        <GAlert v-else-if="!requiredObject || requirementFulfilled" v-localize variant="info" show>
             No inputs required for <b>`{{ contentName }}`</b>.
-        </BAlert>
+        </GAlert>
         <ConfigureSelector v-else :labels="labels" :object-type="requiredObject" @change="onChange" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 
 import type { WorkflowLabel } from "@/components/Markdown/Editor/types";
@@ -20,6 +19,7 @@ import type { OptionType } from "@/components/SelectionField/types";
 
 import ConfigureHeader from "./ConfigureHeader.vue";
 import ConfigureSelector from "./ConfigureSelector.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = defineProps<{
     content: string;
diff --git a/client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue b/client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue
index f150b4d36db9..abf9c717b6fc 100644
--- a/client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue
+++ b/client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue
@@ -1,5 +1,5 @@
 <template>
-    <BAlert v-if="errorMessage" variant="warning" show>{{ errorMessage }}</BAlert>
+    <GAlert v-if="errorMessage" variant="warning" show>{{ errorMessage }}</GAlert>
     <div v-else class="p-2">
         <ConfigureHeader :has-changed="hasChanged" @ok="onOk" @cancel="$emit('cancel')" />
         <ConfigureSelector
@@ -20,7 +20,6 @@
 </template>
 
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 
 import type { DatasetLabel, WorkflowLabel } from "@/components/Markdown/Editor/types";
@@ -29,6 +28,7 @@ import type { OptionType } from "@/components/SelectionField/types";
 
 import ConfigureHeader from "./ConfigureHeader.vue";
 import ConfigureSelector from "./ConfigureSelector.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FormNumber from "@/components/Form/Elements/FormNumber.vue";
 import FormElementLabel from "@/components/Form/FormElementLabel.vue";
 
diff --git a/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.test.js b/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.test.js
index 681cb27c462c..2d7e46c18484 100644
--- a/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.test.js
+++ b/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.test.js
@@ -54,13 +54,13 @@ describe("ConfigureVitessce.vue", () => {
             },
         });
         expect(wrapper.text()).toContain("Failed to parse:");
-        expect(wrapper.findComponent({ name: "BAlert" }).exists()).toBe(true);
+        expect(wrapper.find(".alert").exists()).toBe(true);
     });
 
     it("shows warning alert if no URL-like fields are found", () => {
         const wrapper = mountComponent({});
         expect(wrapper.text()).toContain("No URL-like fields found.");
-        expect(wrapper.findComponent({ name: "BAlert" }).exists()).toBe(true);
+        expect(wrapper.find(".alert").exists()).toBe(true);
     });
 
     it("renders ConfigureHeader and ConfigureSelector for each URL field", () => {
diff --git a/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.vue b/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.vue
index 3b670c5b7d0a..048ac578240b 100644
--- a/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.vue
+++ b/client/src/components/Markdown/Editor/Configurations/ConfigureVitessce.vue
@@ -1,5 +1,5 @@
 <template>
-    <BAlert v-if="errorMessage" variant="warning" show>{{ errorMessage }}</BAlert>
+    <GAlert v-if="errorMessage" variant="warning" show>{{ errorMessage }}</GAlert>
     <div v-else class="p-2">
         <ConfigureHeader :has-changed="hasChanged" @ok="onOk" @cancel="$emit('cancel')" />
         <div v-if="urlReferences.length > 0">
@@ -11,7 +11,7 @@
                     @change="onChange(ref.keyPath, $event)" />
             </div>
         </div>
-        <BAlert v-else variant="warning" show>No URL-like fields found.</BAlert>
+        <GAlert v-else variant="warning" show>No URL-like fields found.</GAlert>
         <FormElementLabel title="Height" help="Specify the height of the view in pixels.">
             <FormNumber id="vitessce-height" v-model="height" :min="100" :max="1000" type="integer" @input="onHeight" />
         </FormElementLabel>
@@ -19,7 +19,6 @@
 </template>
 
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { type Ref, ref, watch } from "vue";
 
 import { stringify } from "@/components/Markdown/Utilities/stringify";
@@ -28,6 +27,7 @@ import { getAppRoot } from "@/onload";
 
 import ConfigureHeader from "./ConfigureHeader.vue";
 import ConfigureSelector from "./ConfigureSelector.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FormNumber from "@/components/Form/Elements/FormNumber.vue";
 import FormElementLabel from "@/components/Form/FormElementLabel.vue";
 
diff --git a/client/src/components/Markdown/LabelSelector.vue b/client/src/components/Markdown/LabelSelector.vue
index beecb30f489d..944547dfdbbf 100644
--- a/client/src/components/Markdown/LabelSelector.vue
+++ b/client/src/components/Markdown/LabelSelector.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { WorkflowLabel } from "./Editor/types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface LabelSelectorProps {
     hasLabels: boolean;
     labels: Array<WorkflowLabel>;
@@ -36,7 +38,7 @@ function update(index: number) {
                 {{ label.label }}
             </b-form-radio>
         </div>
-        <b-alert v-else show variant="info"> No labels found. Please specify labels in the Workflow Editor. </b-alert>
+        <GAlert v-else show variant="info"> No labels found. Please specify labels in the Workflow Editor. </GAlert>
         <p class="mt-3 text-muted">
             You may add new labels by selecting a step in the workflow editor and then editing the corresponding label
             field in the step form.
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 724ff427663f..01928e942502 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -6,6 +6,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import { parseMarkdown } from "./parse";
 import type { MarkdownConfig } from "./types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -133,12 +134,12 @@ onMounted(() => {
                 </div>
             </div>
             <div class="flex-grow-1 w-100 mx-auto position-relative">
-                <b-alert v-if="markdownErrors.length > 0" variant="warning" show>
+                <GAlert v-if="markdownErrors.length > 0" variant="warning" show>
                     <div v-for="(obj, index) in markdownErrors" :key="index" class="mb-1">
                         <h2 class="h-text">{{ obj.error || "Error" }}</h2>
                         {{ obj.line }}
                     </div>
-                </b-alert>
+                </GAlert>
                 <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-component">
                     <SectionWrapper :name="obj.name" :content="obj.content" />
                 </div>
diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue
index 794328c5f8e1..cbe3b9bfad3b 100644
--- a/client/src/components/Markdown/MarkdownToolBox.vue
+++ b/client/src/components/Markdown/MarkdownToolBox.vue
@@ -7,9 +7,9 @@
             </GButton>
         </template>
         <div class="toolMenuContainer">
-            <b-alert v-if="error" variant="danger" class="my-2 mx-3 px-2 py-1" show>
+            <GAlert v-if="error" variant="danger" class="my-2 mx-3 px-2 py-1" show>
                 {{ error }}
-            </b-alert>
+            </GAlert>
             <ToolSection v-if="isWorkflow" :category="historyInEditorSection" :expanded="true" @onClick="onClick" />
             <ToolSection v-else :category="historySection" :expanded="true" @onClick="onClick" />
             <ToolSection :category="jobSection" :expanded="true" @onClick="onClick" />
@@ -49,6 +49,7 @@ import { directiveEntry } from "./directives.ts";
 
 import GButton from "../BaseComponents/GButton.vue";
 import MarkdownDialog from "./MarkdownDialog.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 import ToolSection from "@/components/Panels/Common/ToolSection.vue";
 
@@ -94,6 +95,7 @@ function historySharedElements(mode) {
 
 export default {
     components: {
+        GAlert,
         GButton,
         FontAwesomeIcon,
         MarkdownDialog,
diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
index d0634ec819ba..dcbc6ec71d73 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
@@ -1,7 +1,7 @@
 <template>
-    <b-alert v-if="!!errorText" variant="warning" show>
+    <GAlert v-if="!!errorText" variant="warning" show>
         {{ errorText }}
-    </b-alert>
+    </GAlert>
     <b-card v-else body-class="p-0">
         <b-card-header>
             <span class="float-right">
@@ -37,9 +37,9 @@
         <b-card-body>
             <LoadingSpan v-if="loading" message="Loading Collection" />
             <div v-else class="content-height">
-                <b-alert v-if="!!messageText" :variant="messageVariant" show>
+                <GAlert v-if="!!messageText" :variant="messageVariant" show>
                     {{ messageText }}
-                </b-alert>
+                </GAlert>
                 <CollectionTree :node="itemContent" :skip-head="true" />
             </div>
         </b-card-body>
@@ -56,6 +56,7 @@ import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 
 import CollectionTree from "./CollectionTree.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const props = defineProps<{
diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue
index 7af646d99ece..e3a55d36166f 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue
@@ -3,7 +3,7 @@
         <span v-if="!skipHead" class="label"
             ><b>{{ name }}</b></span
         >
-        <b-alert v-if="!!error" variant="danger" show>Error: {{ error }}</b-alert>
+        <GAlert v-if="!!error" variant="danger" show>Error: {{ error }}</GAlert>
         <pre v-if="miscInfo"><code v-html="miscInfo"/></pre>
         <pre v-if="peek"><code v-html="peek"/></pre>
         <div v-if="node && node.elements && node.elements.length" :class="{ 'ml-3': !skipHead }">
@@ -13,8 +13,11 @@
 </template>
 
 <script>
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 export default {
     name: "CollectionNode",
+    components: { GAlert },
     props: {
         node: {
             type: Object,
diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
index 7a1c53ed34d0..2b19b5e7dcbf 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { useDatasetStore } from "@/stores/datasetStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 type AttributeType = "name" | "misc_blurb" | "peek" | "extension";
 
 const ATTRIBUTES: Record<string, AttributeType> = {
@@ -43,6 +44,6 @@ const getClass = computed(() => `dataset-${ATTRIBUTES[props.name || ""]}`);
 </script>
 
 <template>
-    <BAlert v-if="error" show variant="warning">{{ error }}</BAlert>
+    <GAlert v-if="error" show variant="warning">{{ error }}</GAlert>
     <pre v-else :class="getClass" class="m-0" v-html="attributeValue" />
 </template>
diff --git a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
index a06bc1b7c873..a3190548b119 100644
--- a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
@@ -6,6 +6,7 @@ import { withPrefix } from "@/utils/redirect";
 import { isEmpty } from "@/utils/utils";
 
 import WorkflowTree from "./WorkflowTree.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import ToolLinkPopover from "@/components/Tool/ToolLinkPopover.vue";
 import WorkflowStepIcon from "@/components/WorkflowInvocationState/WorkflowStepIcon.vue";
@@ -72,12 +73,12 @@ watch(
 </script>
 
 <template>
-    <b-alert v-if="!isEmpty(errorContent)" variant="warning" show>
+    <GAlert v-if="!isEmpty(errorContent)" variant="warning" show>
         <ul v-if="typeof errorContent === 'object'" class="my-2">
             <li v-for="(errorValue, errorKey) in errorContent" :key="errorKey">{{ errorKey }}: {{ errorValue }}</li>
         </ul>
         <div v-else>{{ errorContent }}</div>
-    </b-alert>
+    </GAlert>
     <b-card v-else body-class="p-0" class="workflow-display">
         <b-card-header v-if="!embedded">
             <span class="float-right">
diff --git a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
index 689608b7db21..6df2fa17eee7 100644
--- a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
+++ b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import License from "@/components/License/License.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -42,7 +43,7 @@ watch(
 
 <template>
     <LoadingSpan v-if="loading" />
-    <BAlert v-else-if="errorMessage" show variant="warning">{{ errorMessage }}</BAlert>
+    <GAlert v-else-if="errorMessage" show variant="warning">{{ errorMessage }}</GAlert>
     <License v-else-if="licenseId" :license-id="licenseId" />
     <i v-else>Workflow does not define a license.</i>
 </template>
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index ddd39d44631f..09f93ef3aebd 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { BAlert, BLink } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { getArgs } from "@/components/Markdown/parse";
@@ -33,6 +33,7 @@ import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay.vue";
 import WorkflowImage from "./Elements/Workflow/WorkflowImage.vue";
 import WorkflowLicense from "./Elements/Workflow/WorkflowLicense.vue";
 import VisualizationWrapper from "./VisualizationWrapper.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCollapse from "@/components/BaseComponents/GCollapse.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowInvocationInputs from "@/components/WorkflowInvocationState/WorkflowInvocationInputs.vue";
@@ -117,21 +118,21 @@ watch(
 </script>
 
 <template>
-    <BAlert v-if="error" v-localize variant="danger" class="m-0" show>
+    <GAlert v-if="error" v-localize variant="danger" class="m-0" show>
         {{ error }}
-    </BAlert>
-    <BAlert v-else-if="invocationLoadError" v-localize variant="danger" class="m-0" show>
+    </GAlert>
+    <GAlert v-else-if="invocationLoadError" v-localize variant="danger" class="m-0" show>
         {{ invocationLoadError }}
-    </BAlert>
-    <BAlert v-else-if="!hasValidName(name)" v-localize variant="danger" class="m-0" show>
+    </GAlert>
+    <GAlert v-else-if="!hasValidName(name)" v-localize variant="danger" class="m-0" show>
         <span v-localize>Invalid component type </span>
         <b>{{ name }}</b>
-    </BAlert>
-    <BAlert v-else-if="!hasValidLabel(name, args, labels)" v-localize variant="danger" class="m-0" show>
+    </GAlert>
+    <GAlert v-else-if="!hasValidLabel(name, args, labels)" v-localize variant="danger" class="m-0" show>
         <span v-localize>Invalid or missing label for</span>
         <b>{{ name }}</b>
-    </BAlert>
-    <BAlert
+    </GAlert>
+    <GAlert
         v-else-if="hasLabels && !invocationId && getRequiredObject(name)"
         v-localize
         variant="info"
@@ -139,14 +140,14 @@ watch(
         show>
         <span v-localize>Data for rendering not yet available for</span>
         <b>{{ name }}</b>
-    </BAlert>
+    </GAlert>
     <LoadingSpan v-else-if="isLoading" />
-    <BAlert v-else-if="!hasValidObject(name, args)" v-localize variant="warning" class="m-0" show>
+    <GAlert v-else-if="!hasValidObject(name, args)" v-localize variant="warning" class="m-0" show>
         <span v-localize>Missing</span>
         <b>{{ getRequiredObject(name) }}</b>
         <span v-localize>for</span>
         <b>{{ name }}</b>
-    </BAlert>
+    </GAlert>
     <div v-else>
         <BLink v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
             {{ args.collapse }}
diff --git a/client/src/components/Markdown/Sections/MarkdownVega.vue b/client/src/components/Markdown/Sections/MarkdownVega.vue
index 944b215a00ac..6720d56f3f78 100644
--- a/client/src/components/Markdown/Sections/MarkdownVega.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
 
 const props = defineProps<{
@@ -34,9 +36,9 @@ watch(
 
 <template>
     <div>
-        <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
+        <GAlert v-if="errorMessage" class="p-2" variant="danger" show>
             {{ errorMessage }}
-        </b-alert>
+        </GAlert>
         <VegaWrapper :spec="spec" />
     </div>
 </template>
diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index cbc16d36034a..c71a41be45e1 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 
 import type { DatasetLabel, Invocation } from "@/components/Markdown/Editor/types";
@@ -8,6 +7,7 @@ import { stringify } from "@/components/Markdown/Utilities/stringify";
 import { useInvocationStore } from "@/stores/invocationStore";
 
 import VisualizationWrapper from "./VisualizationWrapper.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const DEFAULT_HEIGHT = 400;
@@ -101,12 +101,12 @@ watch(
 
 <template>
     <div class="markdown-visualization">
-        <BAlert v-if="errorMessage" v-localize class="m-0" variant="danger" show>
+        <GAlert v-if="errorMessage" v-localize class="m-0" variant="danger" show>
             {{ errorMessage }}
-        </BAlert>
-        <BAlert v-else-if="invocationLoadError" v-localize class="m-0" variant="danger" show>
+        </GAlert>
+        <GAlert v-else-if="invocationLoadError" v-localize class="m-0" variant="danger" show>
             {{ invocationLoadError }}
-        </BAlert>
+        </GAlert>
         <LoadingSpan v-else-if="invocationLoading" />
         <VisualizationWrapper
             v-else-if="visualizationConfig"
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 4b7fc4b95c4e..3cf9a66ca804 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { ref, watch } from "vue";
 
 import type { DatasetLabel, Invocation } from "@/components/Markdown/Editor/types";
@@ -8,6 +7,7 @@ import { getAppRoot } from "@/onload";
 import { useInvocationStore } from "@/stores/invocationStore";
 
 import VisualizationWrapper from "./VisualizationWrapper.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const DEFAULT_HEIGHT = 400;
@@ -109,13 +109,13 @@ defineExpose({ visualizationConfig });
 </script>
 
 <template>
-    <BAlert v-if="missingInvocation" v-localize class="m-0" variant="info" show>
+    <GAlert v-if="missingInvocation" v-localize class="m-0" variant="info" show>
         Data for rendering this <b>Vitessce Dashboard</b> is not yet available.
-    </BAlert>
+    </GAlert>
     <div v-else class="markdown-visualization">
-        <BAlert v-if="errorMessage" v-localize class="m-0" variant="danger" show>
+        <GAlert v-if="errorMessage" v-localize class="m-0" variant="danger" show>
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
         <LoadingSpan v-else-if="loading" />
         <VisualizationWrapper
             v-else-if="visualizationConfig"
diff --git a/client/src/components/Markdown/Sections/SectionWrapper.vue b/client/src/components/Markdown/Sections/SectionWrapper.vue
index 4074ca3f5b88..739c4c4bf8d0 100644
--- a/client/src/components/Markdown/Sections/SectionWrapper.vue
+++ b/client/src/components/Markdown/Sections/SectionWrapper.vue
@@ -4,12 +4,10 @@
     <MarkdownVega v-else-if="name === 'vega'" :content="content" />
     <MarkdownVisualization v-else-if="name === 'visualization'" :content="content" @change="$emit('change', $event)" />
     <MarkdownVitessce v-else-if="name === 'vitessce'" :content="content" />
-    <BAlert v-else variant="danger" show> This cell type `{{ name }}` is not available. </BAlert>
+    <GAlert v-else variant="danger" show> This cell type `{{ name }}` is not available. </GAlert>
 </template>
 
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
-
 import type { WorkflowLabel } from "@/components/Markdown/Editor/types";
 
 import MarkdownDefault from "./MarkdownDefault.vue";
@@ -17,6 +15,7 @@ import MarkdownGalaxy from "./MarkdownGalaxy.vue";
 import MarkdownVega from "./MarkdownVega.vue";
 import MarkdownVisualization from "./MarkdownVisualization.vue";
 import MarkdownVitessce from "./MarkdownVitessce.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 defineProps<{
     content: string;
diff --git a/client/src/components/Markdown/Sections/VisualizationWrapper.vue b/client/src/components/Markdown/Sections/VisualizationWrapper.vue
index 78b7a4c68cb9..33f75500d565 100644
--- a/client/src/components/Markdown/Sections/VisualizationWrapper.vue
+++ b/client/src/components/Markdown/Sections/VisualizationWrapper.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { faExpand, faWindowMaximize } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.vue";
 
 interface Props {
@@ -33,7 +34,7 @@ const fixedHeight = computed(() =>
 
 <template>
     <div v-if="errorMessage">
-        <BAlert variant="danger" show>{{ errorMessage }}</BAlert>
+        <GAlert variant="danger" show>{{ errorMessage }}</GAlert>
     </div>
     <div v-else class="position-relative h-100">
         <div :class="`visualization-pop${expand ? 'out' : 'in'}`">
diff --git a/client/src/components/Notifications/NotificationsList.vue b/client/src/components/Notifications/NotificationsList.vue
index 67155486f15f..2b22ae36acad 100644
--- a/client/src/components/Notifications/NotificationsList.vue
+++ b/client/src/components/Notifications/NotificationsList.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { faCheck, faCog, faRetweet, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
+import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
 import type { UserNotification } from "@/api/notifications";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCollapse from "@/components/BaseComponents/GCollapse.vue";
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -95,13 +96,13 @@ function togglePreferences() {
             </div>
         </GCollapse>
 
-        <BAlert v-if="loadingNotifications" show>
+        <GAlert v-if="loadingNotifications" show>
             <LoadingSpan message="Loading notifications" />
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-else-if="notifications.length === 0" id="no-notifications" show variant="info">
+        <GAlert v-else-if="notifications.length === 0" id="no-notifications" show variant="info">
             No notifications to show.
-        </BAlert>
+        </GAlert>
 
         <div v-else class="notifications-list-body">
             <div class="notifications-list-filter card-container">
@@ -158,9 +159,9 @@ function togglePreferences() {
                 </div>
             </div>
 
-            <BAlert v-show="filteredNotifications.length === 0" show variant="info">
+            <GAlert v-show="filteredNotifications.length === 0" show variant="info">
                 No matching notifications with current filters.
-            </BAlert>
+            </GAlert>
 
             <TransitionGroup
                 v-show="filteredNotifications.length > 0"
diff --git a/client/src/components/ObjectStore/Instances/CreateInstance.vue b/client/src/components/ObjectStore/Instances/CreateInstance.vue
index 60d245d12a18..23d5344d04a6 100644
--- a/client/src/components/ObjectStore/Instances/CreateInstance.vue
+++ b/client/src/components/ObjectStore/Instances/CreateInstance.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { useObjectStoreStore } from "@/stores/objectStoreStore";
@@ -10,6 +9,7 @@ import { useInstanceRouting } from "./routing";
 import type { UserConcreteObjectStore } from "./types";
 
 import CreateForm from "./CreateForm.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -48,9 +48,9 @@ async function onCreated(objectStore: UserConcreteObjectStore) {
             <BreadcrumbHeading :items="breadcrumbItems" />
         </div>
 
-        <BAlert v-if="!template" variant="info" show>
+        <GAlert v-if="!template" variant="info" show>
             <LoadingSpan :message="localize('Loading Galaxy storage options')" />
-        </BAlert>
+        </GAlert>
         <CreateForm v-else :template="template" @created="onCreated"></CreateForm>
     </div>
 </template>
diff --git a/client/src/components/ObjectStore/Instances/ManageIndex.vue b/client/src/components/ObjectStore/Instances/ManageIndex.vue
index cd938a41e787..f08e116af9c2 100644
--- a/client/src/components/ObjectStore/Instances/ManageIndex.vue
+++ b/client/src/components/ObjectStore/Instances/ManageIndex.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { UserConcreteObjectStore } from "@/api/objectStores";
@@ -11,6 +10,7 @@ import { useObjectStoreInstancesStore } from "@/stores/objectStoreInstancesStore
 import _l from "@/utils/localization";
 
 import InstanceDropdown from "./InstanceDropdown.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTable from "@/components/Common/GTable.vue";
 import ManageIndexHeader from "@/components/ConfigTemplates/ManageIndexHeader.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -66,9 +66,9 @@ const { ConfigurationTestSummaryModal, showTestResults, testResults, test, testi
             :items="activeInstances">
             <template v-slot:empty>
                 <LoadingSpan v-if="loading" message="Loading Galaxy storage instances" />
-                <BAlert v-else id="no-object-store-instances" variant="info" show>
+                <GAlert v-else id="no-object-store-instances" variant="info" show>
                     No Galaxy storage instances found, click the create button to configure a new one.
-                </BAlert>
+                </GAlert>
             </template>
 
             <template v-slot:cell(badges)="{ item }">
diff --git a/client/src/components/ObjectStore/SelectObjectStore.vue b/client/src/components/ObjectStore/SelectObjectStore.vue
index c4827bd74d92..d26e5c3c00b2 100644
--- a/client/src/components/ObjectStore/SelectObjectStore.vue
+++ b/client/src/components/ObjectStore/SelectObjectStore.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -7,6 +6,7 @@ import type { UserConcreteObjectStoreModel } from "@/api";
 import { useStorageLocationConfiguration } from "@/composables/storageLocation";
 import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import SourceOptionCard from "@/components/ConfigTemplates/SourceOptionCard.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import ObjectStoreBadges from "@/components/ObjectStore/ObjectStoreBadges.vue";
@@ -85,9 +85,9 @@ const defaultObjectStore: UserConcreteObjectStoreModel = {
                 {{ props.forWhat }}
             </span>
 
-            <BAlert v-if="error" variant="danger" class="object-store-selection-error" show>
+            <GAlert v-if="error" variant="danger" class="object-store-selection-error" show>
                 {{ error }}
-            </BAlert>
+            </GAlert>
 
             <div class="d-flex flex-wrap">
                 <SourceOptionCard
diff --git a/client/src/components/ObjectStore/ShowSelectedObjectStore.vue b/client/src/components/ObjectStore/ShowSelectedObjectStore.vue
index d18a2db390f1..cf340f6445a6 100644
--- a/client/src/components/ObjectStore/ShowSelectedObjectStore.vue
+++ b/client/src/components/ObjectStore/ShowSelectedObjectStore.vue
@@ -7,6 +7,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import type { ConcreteObjectStoreModel } from "./types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
 
@@ -47,6 +48,6 @@ const loadingMessage = localize("Loading Galaxy storage details");
         <LoadingSpan v-if="loading" :message="loadingMessage" />
         <DescribeObjectStore v-else-if="objectStore != null" :what="forWhat" :storage-info="objectStore">
         </DescribeObjectStore>
-        <b-alert v-else-if="error" show variant="danger">{{ error }}</b-alert>
+        <GAlert v-else-if="error" show variant="danger">{{ error }}</GAlert>
     </div>
 </template>
diff --git a/client/src/components/Page/PageView.vue b/client/src/components/Page/PageView.vue
index 8bed5e8c007e..ae30bdb8b0dd 100644
--- a/client/src/components/Page/PageView.vue
+++ b/client/src/components/Page/PageView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -12,6 +12,7 @@ import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 import { urlData } from "@/utils/url";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 import PublishedItem from "@/components/Common/PublishedItem.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -119,9 +120,9 @@ function stsUrl(config: any) {
             </div>
             <div v-else-if="hasError">
                 <Heading h1 separator size="lg">{{ PUBLISHED_LABELS.errorHeading }}</Heading>
-                <BAlert show variant="danger">
+                <GAlert show variant="danger">
                     {{ errorMessage }}
-                </BAlert>
+                </GAlert>
             </div>
             <div v-else-if="page && isConfigLoaded" class="page-container">
                 <Heading v-if="props.showHeading && !props.displayOnly" h1 separator size="lg" class="page-title">
diff --git a/client/src/components/PageDisplay/PageForm.test.js b/client/src/components/PageDisplay/PageForm.test.js
index f3d43af641a4..bd2f744a7446 100644
--- a/client/src/components/PageDisplay/PageForm.test.js
+++ b/client/src/components/PageDisplay/PageForm.test.js
@@ -35,7 +35,6 @@ function mountTarget(props = {}) {
         stubs: {
             FontAwesomeIcon: true,
             BButton: true,
-            BAlert: true,
         },
         directives: {
             localize: () => {},
@@ -87,7 +86,7 @@ describe("PageForm.vue - Create mode", () => {
         );
         const wrapper = mountTarget({ mode: "create", invocationId: "fail" });
         await flushPromises();
-        const alert = wrapper.findComponent({ name: "BAlert" });
+        const alert = wrapper.find(".alert");
         expect(alert.exists()).toBe(true);
         expect(alert.text()).toContain("Failed to fetch report");
     });
@@ -160,7 +159,7 @@ describe("PageForm.vue - Edit mode", () => {
         server.use(http.get("/api/pages/:id", ({ response }) => response(500).json({ err_msg: "Page load failed" })));
         const wrapper = mountTarget({ mode: "edit", id: "error-id" });
         await flushPromises();
-        const alert = wrapper.findComponent({ name: "BAlert" });
+        const alert = wrapper.find(".alert");
         expect(alert.exists()).toBe(true);
         expect(alert.text()).toContain("Page load failed");
     });
diff --git a/client/src/components/PageDisplay/PageForm.vue b/client/src/components/PageDisplay/PageForm.vue
index 4e49f08b2231..2ff6d2311b3d 100644
--- a/client/src/components/PageDisplay/PageForm.vue
+++ b/client/src/components/PageDisplay/PageForm.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <BAlert v-if="loading" show>
+        <GAlert v-if="loading" show>
             <LoadingSpan />
-        </BAlert>
-        <BAlert v-else-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
+        </GAlert>
+        <GAlert v-else-if="errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
         <div v-else>
             <FormCard :title="cardTitle" icon="fa-file-contract">
                 <template v-slot:body>
@@ -39,7 +39,6 @@
 <script setup lang="ts">
 import { faSave, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -49,6 +48,7 @@ import { FORM_LABELS } from "@/components/Page/constants";
 import pageTemplate from "@/components/PageDisplay/pageTemplate.yml";
 import { useToast } from "@/composables/toast";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import FormInput from "@/components/Form/Elements/FormInput.vue";
 import FormCard from "@/components/Form/FormCard.vue";
diff --git a/client/src/components/PageEditor/HistoryPageList.test.ts b/client/src/components/PageEditor/HistoryPageList.test.ts
index 0d6a5f539738..6d43e2276b2a 100644
--- a/client/src/components/PageEditor/HistoryPageList.test.ts
+++ b/client/src/components/PageEditor/HistoryPageList.test.ts
@@ -18,7 +18,7 @@ const SELECTORS = {
     EMPTY_STATE: ".empty-state",
     PAGE_ITEMS: ".page-items",
     PAGE_ITEM: "[data-description='page item']",
-    UNOWNED_ALERT: "balert-stub",
+    UNOWNED_ALERT: "galert-stub",
 };
 
 setupMockHistoryBreadcrumbs();
diff --git a/client/src/components/PageEditor/HistoryPageList.vue b/client/src/components/PageEditor/HistoryPageList.vue
index f9818f3d00a3..b1ae384afabf 100644
--- a/client/src/components/PageEditor/HistoryPageList.vue
+++ b/client/src/components/PageEditor/HistoryPageList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faArrowLeft, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, toRef } from "vue";
 
 import type { HistoryPageSummary } from "@/api/pages";
@@ -13,6 +12,7 @@ import { useUserStore } from "@/stores/userStore.js";
 import BreadcrumbHeading from "../Common/BreadcrumbHeading.vue";
 import Heading from "../Common/Heading.vue";
 import PageCard from "./PageCard.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 
 const props = defineProps<{
@@ -67,11 +67,11 @@ const { breadcrumbItems } = useHistoryBreadCrumbsTo(toRef(props, "historyId"), l
             </GButton>
         </div>
 
-        <BAlert v-if="unownedHistory" show>
+        <GAlert v-if="unownedHistory" show>
             You do not own this history
             <span v-if="props.invocationId">(associated with the invocation)</span>
             so only {{ labels.entityNamePlural }} that you created against this history are shown.
-        </BAlert>
+        </GAlert>
 
         <div v-if="pages.length === 0" class="empty-state text-center p-4" data-description="page empty state">
             <p class="text-muted">{{ labels.emptyStateTitle }}</p>
diff --git a/client/src/components/PageEditor/HistoryPageView.test.ts b/client/src/components/PageEditor/HistoryPageView.test.ts
index be9f593d1ebf..cea23ff72b15 100644
--- a/client/src/components/PageEditor/HistoryPageView.test.ts
+++ b/client/src/components/PageEditor/HistoryPageView.test.ts
@@ -64,8 +64,8 @@ const HISTORY_ID = "history-1";
 const PAGE_ID = "page-1";
 
 const SELECTORS = {
-    INFO_ALERT: "balert-stub[variant='info']",
-    ERROR_ALERT: "balert-stub[variant='danger']",
+    INFO_ALERT: "galert-stub[variant='info']",
+    ERROR_ALERT: "galert-stub[variant='danger']",
 } as const;
 
 let pinia: Pinia;
diff --git a/client/src/components/PageEditor/HistoryPageView.vue b/client/src/components/PageEditor/HistoryPageView.vue
index 8984b840b973..13514cb6c308 100644
--- a/client/src/components/PageEditor/HistoryPageView.vue
+++ b/client/src/components/PageEditor/HistoryPageView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faCopy, faPlus, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -16,6 +15,7 @@ import { errorMessageAsString } from "@/utils/simple-error.js";
 import HistoryPageList from "./HistoryPageList.vue";
 import PageDisplayOnly from "./PageDisplayOnly.vue";
 import PageEditorView from "./PageEditorView.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = defineProps<{
     historyId: string;
@@ -174,19 +174,19 @@ function handleBack() {
           Render it here only for list view and display-only mode, otherwise the
           same store.error renders twice.
         -->
-        <BAlert
+        <GAlert
             v-if="store.error && (!pageId || displayOnly)"
             variant="danger"
             show
             dismissible
             @dismissed="store.error = null">
             {{ store.error }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="store.isLoadingList" variant="info" show>
+        <GAlert v-if="store.isLoadingList" variant="info" show>
             <FontAwesomeIcon :icon="faSpinner" spin />
             Loading {{ labels.entityNamePlural.toLowerCase() }}...
-        </BAlert>
+        </GAlert>
 
         <template v-else-if="!pageId">
             <HistoryPageList
@@ -212,10 +212,10 @@ function handleBack() {
             <PageEditorView :page-id="pageId" :history-id="historyId" :invocation-id="invocationId" />
         </template>
 
-        <BAlert v-else-if="store.isLoadingPage" variant="info" show>
+        <GAlert v-else-if="store.isLoadingPage" variant="info" show>
             <FontAwesomeIcon :icon="faSpinner" spin />
             Loading {{ labels.entityName.toLowerCase() }}...
-        </BAlert>
+        </GAlert>
     </div>
 </template>
 
diff --git a/client/src/components/PageEditor/ObjectPermissions.vue b/client/src/components/PageEditor/ObjectPermissions.vue
index 809cedaa30f0..6b3feec181f5 100644
--- a/client/src/components/PageEditor/ObjectPermissions.vue
+++ b/client/src/components/PageEditor/ObjectPermissions.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import axios from "axios";
-import { BAlert } from "bootstrap-vue";
 import Vue, { computed, type Ref, ref, watch } from "vue";
 
 import { GalaxyApi, type MessageException } from "@/api";
@@ -22,6 +21,7 @@ import {
 
 import PermissionObjectType from "./PermissionObjectType.vue";
 import SharingIndicator from "./SharingIndicator.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -344,7 +344,7 @@ async function makeAccessible(item: ItemInterface) {
         <GTable show-empty :items="tableItems" :fields="tableFields">
             <template v-slot:empty>
                 <LoadingSpan v-if="loading" message="Loading objects" />
-                <BAlert v-else show variant="info"> No objects found in referenced Galaxy markdown content. </BAlert>
+                <GAlert v-else show variant="info"> No objects found in referenced Galaxy markdown content. </GAlert>
             </template>
 
             <template v-slot:cell(name)="{ item }">
diff --git a/client/src/components/PageEditor/PageEditorView.test.ts b/client/src/components/PageEditor/PageEditorView.test.ts
index 62046e8084d2..a96089ba4b7d 100644
--- a/client/src/components/PageEditor/PageEditorView.test.ts
+++ b/client/src/components/PageEditor/PageEditorView.test.ts
@@ -433,7 +433,7 @@ describe("PageEditorView", () => {
             const wrapper = mountComponent({ pageId: PAGE_ID, historyId: HISTORY_ID });
             await flushPromises();
 
-            const errorAlert = wrapper.find("balert-stub[variant='danger']");
+            const errorAlert = wrapper.find("galert-stub[variant='danger']");
             expect(errorAlert.exists()).toBe(true);
             expect(errorAlert.text()).toContain("Save failed");
             expect(wrapper.findComponent(PageDisplayToolbar).exists()).toBe(true);
diff --git a/client/src/components/PageEditor/PageEditorView.vue b/client/src/components/PageEditor/PageEditorView.vue
index a6455068fe0c..8681757a6020 100644
--- a/client/src/components/PageEditor/PageEditorView.vue
+++ b/client/src/components/PageEditor/PageEditorView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faCopy, faSpinner, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -21,6 +20,7 @@ import PageDisplayOnly from "./PageDisplayOnly.vue";
 import PageDisplayToolbar from "./PageDisplayToolbar.vue";
 import PageRevisionList from "./PageRevisionList.vue";
 import PageRevisionView from "./PageRevisionView.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
 
 const props = defineProps<{
@@ -209,14 +209,14 @@ function handleRevisionRestore(revisionId: string) {
 
 <template>
     <div class="page-editor-view d-flex flex-column h-100" data-description="page editor view">
-        <BAlert v-if="store.error" variant="danger" show dismissible @dismissed="store.error = null">
+        <GAlert v-if="store.error" variant="danger" show dismissible @dismissed="store.error = null">
             {{ store.error }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="store.isLoadingPage && !store.hasCurrentPage" variant="info" show>
+        <GAlert v-if="store.isLoadingPage && !store.hasCurrentPage" variant="info" show>
             <FontAwesomeIcon :icon="faSpinner" spin />
             Loading page...
-        </BAlert>
+        </GAlert>
 
         <!-- Display-only mode: rendered view -->
         <PageDisplayOnly
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index ace90b96796a..795f18411c45 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { nextTick } from "vue";
 import { onMounted, onUnmounted, type PropType, watch } from "vue";
@@ -9,6 +8,7 @@ import { type Tool, type ToolPanelItem, type ToolSection, useToolStore } from "@
 import { useUserStore } from "@/stores/userStore";
 import _l from "@/utils/localization";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -281,7 +281,7 @@ function post(message: object) {
             :placeholder="placeholder"
             @change="checkQuery" />
     </div>
-    <BAlert v-else class="mb-3" variant="info" show>
+    <GAlert v-else class="mb-3" variant="info" show>
         <LoadingSpan message="Loading Tool Search" />
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/Panels/InvocationsPanel.vue b/client/src/components/Panels/InvocationsPanel.vue
index 6292623900ce..468a5bd7c605 100644
--- a/client/src/components/Panels/InvocationsPanel.vue
+++ b/client/src/components/Panels/InvocationsPanel.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 
 import { useUserStore } from "@/stores/userStore";
 
 import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vue";
 import ActivityPanel from "./ActivityPanel.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const { currentUser } = storeToRefs(useUserStore());
 </script>
@@ -13,6 +13,6 @@ const { currentUser } = storeToRefs(useUserStore());
 <template>
     <ActivityPanel title="Workflow Invocations" go-to-all-title="Open Invocations List" href="/workflows/invocations">
         <InvocationScrollList v-if="currentUser && !currentUser?.isAnonymous" in-panel />
-        <BAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</BAlert>
+        <GAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</GAlert>
     </ActivityPanel>
 </template>
diff --git a/client/src/components/Panels/MyToolsLanding.vue b/client/src/components/Panels/MyToolsLanding.vue
index 405d041dde75..2605c9e48690 100644
--- a/client/src/components/Panels/MyToolsLanding.vue
+++ b/client/src/components/Panels/MyToolsLanding.vue
@@ -6,7 +6,6 @@
  * no active search query, keeping all the My Tools-specific reactivity off
  * the default tool panel hot path.
  */
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import draggable from "vuedraggable";
@@ -29,6 +28,7 @@ import {
 } from "./panelViews";
 import { buildToolLabel, buildToolSection, getUniqueToolIdsInPanel } from "./utilities";
 
+import GAlert from "../BaseComponents/GAlert.vue";
 import GButton from "../BaseComponents/GButton.vue";
 import ToolItem from "./Common/Tool.vue";
 import ToolPanelLabel from "./Common/ToolPanelLabel.vue";
@@ -453,7 +453,7 @@ function onLabelToggle(labelId: string) {
             @toggle="onLabelToggle" />
         <div v-if="!favoritesCollapsed">
             <div v-if="showEmptyFavorites" class="tool-panel-empty">
-                <BAlert variant="info" show>
+                <GAlert variant="info" show>
                     <template v-if="!isAnonymous">
                         You haven't favorited any tools yet. Search the toolbox or use
                         <GButton
@@ -478,7 +478,7 @@ function onLabelToggle(labelId: string) {
                         </GButton>
                         to favorite tools and have them appear in this section.
                     </template>
-                </BAlert>
+                </GAlert>
             </div>
             <draggable
                 v-else
diff --git a/client/src/components/Panels/NotificationsPanel.vue b/client/src/components/Panels/NotificationsPanel.vue
index b0d51ee00b0f..1f48de7ccb7e 100644
--- a/client/src/components/Panels/NotificationsPanel.vue
+++ b/client/src/components/Panels/NotificationsPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faCheckDouble } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -9,6 +9,7 @@ import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 import localize from "@/utils/localization";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import NotificationCard from "@/components/Notifications/NotificationCard.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
@@ -61,13 +62,13 @@ async function onMarkAllAsRead() {
             </div>
         </template>
 
-        <BAlert v-if="loadingNotifications" key="loading-notifications" show>
+        <GAlert v-if="loadingNotifications" key="loading-notifications" show>
             <LoadingSpan message="Loading notifications" />
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-else-if="!unreadNotifications.length" key="no-notifications-message" show>
+        <GAlert v-else-if="!unreadNotifications.length" key="no-notifications-message" show>
             No unread notifications to show.
-        </BAlert>
+        </GAlert>
 
         <TransitionGroup class="notifications-box-list" name="notifications-box-list" tag="div">
             <NotificationCard
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index 67b39b3e37ca..8f3fa43003eb 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BBadge } from "bootstrap-vue";
+import { BBadge } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -16,6 +16,7 @@ import ActivityPanel from "./ActivityPanel.vue";
 import FavoritesButton from "./Buttons/FavoritesButton.vue";
 import PanelViewMenu from "./Menus/PanelViewMenu.vue";
 import ToolBox from "./ToolBox.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const toolStore = useToolStore();
 
@@ -124,9 +125,9 @@ initializePanel();
             :use-search-worker="useSearchWorker"
             @onInsertTool="onInsertTool" />
         <div v-else-if="errorMessage" data-description="tool panel error message">
-            <BAlert class="m-2" variant="danger" show>
+            <GAlert class="m-2" variant="danger" show>
                 {{ errorMessage }}
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else>
             <BBadge class="alert-info w-100">
@@ -134,9 +135,9 @@ initializePanel();
             </BBadge>
         </div>
     </ActivityPanel>
-    <BAlert v-else-if="currentToolSections" class="m-2" variant="info" show>
+    <GAlert v-else-if="currentToolSections" class="m-2" variant="info" show>
         <LoadingSpan message="Loading Toolbox" />
-    </BAlert>
+    </GAlert>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/src/components/Panels/Upload/methods/DataLibraryUpload.vue b/client/src/components/Panels/Upload/methods/DataLibraryUpload.vue
index 742289ae908c..79f6b6de86c5 100644
--- a/client/src/components/Panels/Upload/methods/DataLibraryUpload.vue
+++ b/client/src/components/Panels/Upload/methods/DataLibraryUpload.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faDatabase, faFile, faFolder, faLock, faPlus, faShieldAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BFormCheckbox, BPagination } from "bootstrap-vue";
+import { BFormCheckbox, BPagination } from "bootstrap-vue";
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 
 import type {
@@ -30,6 +30,7 @@ import type { PreparedUpload, UploadMethodComponent, UploadMethodConfig } from "
 import type { LibraryDatasetItem } from "../types/uploadItem";
 
 import CollectionCreationConfig from "../CollectionCreationConfig.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import BreadcrumbNavigation from "@/components/Common/BreadcrumbNavigation.vue";
 import GTable from "@/components/Common/GTable.vue";
@@ -737,12 +738,12 @@ defineExpose<UploadMethodComponent>({ prepareUpload, reset });
             </div>
 
             <!-- Error message -->
-            <BAlert v-if="errorMessage" variant="danger" show dismissible @dismissed="errorMessage = undefined">
+            <GAlert v-if="errorMessage" variant="danger" show dismissible @dismissed="errorMessage = undefined">
                 <div class="d-flex justify-content-between align-items-center">
                     <span>{{ errorMessage }}</span>
                     <GButton color="red" class="ml-2" @click="onErrorRetry"> Retry </GButton>
                 </div>
-            </BAlert>
+            </GAlert>
 
             <!-- Library List View -->
             <div v-if="!currentLibrary" class="browser-table-container">
diff --git a/client/src/components/Panels/Upload/methods/RemoteFilesUpload.vue b/client/src/components/Panels/Upload/methods/RemoteFilesUpload.vue
index 471d77f38819..6133c7800465 100644
--- a/client/src/components/Panels/Upload/methods/RemoteFilesUpload.vue
+++ b/client/src/components/Panels/Upload/methods/RemoteFilesUpload.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faFolder, faGlobe, faPlus, faTrash, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BFormCheckbox, BFormInput, BPagination } from "bootstrap-vue";
+import { BFormCheckbox, BFormInput, BPagination } from "bootstrap-vue";
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -41,6 +41,7 @@ import UploadTableExtensionCell from "../shared/UploadTableExtensionCell.vue";
 import UploadTableNameCell from "../shared/UploadTableNameCell.vue";
 import UploadTableOptionsCell from "../shared/UploadTableOptionsCell.vue";
 import UploadTableOptionsHeader from "../shared/UploadTableOptionsHeader.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import BreadcrumbNavigation from "@/components/Common/BreadcrumbNavigation.vue";
 import GTable from "@/components/Common/GTable.vue";
@@ -643,12 +644,12 @@ defineExpose<UploadMethodComponent>({ prepareUpload, reset });
             </div>
 
             <!-- Error message -->
-            <BAlert v-if="errorMessage" variant="danger" show dismissible @dismissed="errorMessage = undefined">
+            <GAlert v-if="errorMessage" variant="danger" show dismissible @dismissed="errorMessage = undefined">
                 <div class="d-flex justify-content-between align-items-center">
                     <span>{{ errorMessage }}</span>
                     <GButton color="red" class="ml-2" @click="onErrorRetry"> Retry </GButton>
                 </div>
-            </BAlert>
+            </GAlert>
 
             <!-- Browser table -->
             <div class="browser-table-container">
diff --git a/client/src/components/Register/RegisterForm.vue b/client/src/components/Register/RegisterForm.vue
index 416ef49a51c0..d13618ef5687 100644
--- a/client/src/components/Register/RegisterForm.vue
+++ b/client/src/components/Register/RegisterForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
 import {
-    BAlert,
     BCard,
     BCardBody,
     BCardFooter,
@@ -25,6 +24,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import GButton from "../BaseComponents/GButton.vue";
 import GLink from "../BaseComponents/GLink.vue";
 import VerticalSeparator from "../Common/VerticalSeparator.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GCollapse from "@/components/BaseComponents/GCollapse.vue";
 import ExternalLogin from "@/components/User/ExternalIdentities/ExternalLogin.vue";
 import ExternalRegistration from "@/components/User/ExternalIdentities/ExternalRegistration.vue";
@@ -109,14 +109,14 @@ async function submit() {
     <div class="register-form">
         <div class="d-flex justify-content-md-center">
             <div>
-                <BAlert :show="!!registrationWarningMessage" variant="info">
+                <GAlert :show="!!registrationWarningMessage" variant="info">
                     <!-- eslint-disable-next-line vue/no-v-html -->
                     <span v-html="registrationWarningMessage" />
-                </BAlert>
+                </GAlert>
 
-                <BAlert :show="!!messageText" variant="danger">
+                <GAlert :show="!!messageText" variant="danger">
                     {{ messageText }}
-                </BAlert>
+                </GAlert>
 
                 <BForm id="registration" @submit.prevent="submit()">
                     <BCard no-body>
diff --git a/client/src/components/RuleCollectionBuilder.vue b/client/src/components/RuleCollectionBuilder.vue
index a2189bd05278..d0c1f95ffca0 100644
--- a/client/src/components/RuleCollectionBuilder.vue
+++ b/client/src/components/RuleCollectionBuilder.vue
@@ -23,14 +23,14 @@
             <b>Be sure to specify at least one column as a list identifier</b> - specify more to created nested list
             structures. Specify a column to serve as "collection name" to group datasets into multiple collections.
         </RuleModalHeader>
-        <b-alert v-if="validityErrorMessages.length != 0" class="alert-area" show variant="warning" dismissible>
+        <GAlert v-if="validityErrorMessages.length != 0" class="alert-area" show variant="warning" dismissible>
             {{ validityErrorHeader }}
             <ul>
                 <li v-for="error in validityErrorMessages" :key="error">
                     {{ error }}
                 </li>
             </ul>
-        </b-alert>
+        </GAlert>
         <RuleModalMiddle v-if="ruleView == 'source'">
             <p v-if="ruleSourceError" class="errormessagelarge">{{ ruleSourceError }}</p>
             <textarea v-model="ruleSource" class="rule-source"></textarea>
@@ -622,6 +622,7 @@ import _l from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import GButton from "./BaseComponents/GButton.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ColumnSelector from "@/components/RuleBuilder/ColumnSelector.vue";
 import IdentifierDisplay from "@/components/RuleBuilder/IdentifierDisplay.vue";
 import RegularExpressionInput from "@/components/RuleBuilder/RegularExpressionInput.vue";
@@ -656,6 +657,7 @@ const stripUiKeys = function (entry) {
 
 export default {
     components: {
+        GAlert,
         TooltipOnHover,
         HotTable,
         RuleGrid,
diff --git a/client/src/components/ScrollList/ScrollList.vue b/client/src/components/ScrollList/ScrollList.vue
index dd0b0de1706f..8f6a2c473e7f 100644
--- a/client/src/components/ScrollList/ScrollList.vue
+++ b/client/src/components/ScrollList/ScrollList.vue
@@ -2,12 +2,13 @@
 import { faArrowDown, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
-import { BAlert, BListGroup } from "bootstrap-vue";
+import { BListGroup } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
 import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
@@ -214,12 +215,12 @@ watch(
                     toolMenuContainer: inPanel,
                 }"
                 role="list">
-                <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
+                <GAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
                 <template v-else>
                     <slot v-if="items.length === 0" name="loading">
-                        <BAlert v-if="busy" variant="info" show>
+                        <GAlert v-if="busy" variant="info" show>
                             <LoadingSpan :message="`Loading ${props.namePlural}`" />
-                        </BAlert>
+                        </GAlert>
                     </slot>
                     <component
                         :is="props.gridView ? 'div' : BListGroup"
diff --git a/client/src/components/SelectionDialog/DatasetCollectionDialog.test.js b/client/src/components/SelectionDialog/DatasetCollectionDialog.test.js
index 61f450603e3b..c3aa3c430474 100644
--- a/client/src/components/SelectionDialog/DatasetCollectionDialog.test.js
+++ b/client/src/components/SelectionDialog/DatasetCollectionDialog.test.js
@@ -1,5 +1,4 @@
 import { createLocalVue, mount } from "@vue/test-utils";
-import { BAlert } from "bootstrap-vue";
 import flushPromises from "flush-promises";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -7,6 +6,7 @@ import { HttpResponse, useServerMock } from "@/api/client/__mocks__";
 
 import DatasetCollectionDialog from "./DatasetCollectionDialog.vue";
 import SelectionDialog from "./SelectionDialog.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 vi.mock("app");
@@ -49,7 +49,7 @@ describe("DatasetCollectionDialog.vue", () => {
 
         await flushPromises();
 
-        expect(wrapper.findComponent(BAlert).exists()).toBe(false);
+        expect(wrapper.findComponent(GAlert).exists()).toBe(false);
         expect(wrapper.findComponent(GTable).exists()).toBe(true);
     });
 
@@ -64,6 +64,6 @@ describe("DatasetCollectionDialog.vue", () => {
             localVue: localVue,
         });
         await flushPromises();
-        expect(wrapper.findComponent(BAlert).text()).toBe("Bad error");
+        expect(wrapper.findComponent(GAlert).text()).toBe("Bad error");
     });
 });
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 41c3bbb52f5c..547d4e42a0c4 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -2,7 +2,7 @@
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faCaretLeft, faCheck, faFolder, faSpinner, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BLink, BPagination } from "bootstrap-vue";
+import { BButton, BLink, BPagination } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import type { RowClickEvent, RowSelectEvent, TableField } from "@/components/Common/GTable.types";
@@ -13,6 +13,7 @@ import type { SelectionItem } from "./selectionTypes";
 
 import GModal from "../BaseComponents/GModal.vue";
 import Heading from "../Common/Heading.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -294,9 +295,9 @@ defineExpose({
             </div>
         </template>
         <slot name="helper" />
-        <BAlert v-if="errorMessage" variant="danger" show>
+        <GAlert v-if="errorMessage" variant="danger" show>
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
         <div v-else>
             <div v-if="optionsShow" data-description="selection dialog options">
                 <GTable
diff --git a/client/src/components/SelectionField/SelectionField.vue b/client/src/components/SelectionField/SelectionField.vue
index 23a69630d09e..0a2fb0b2e456 100644
--- a/client/src/components/SelectionField/SelectionField.vue
+++ b/client/src/components/SelectionField/SelectionField.vue
@@ -1,11 +1,11 @@
 <template>
-    <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
-    <BAlert v-else-if="!currentHistoryId || isLoading" variant="info" show>
+    <GAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
+    <GAlert v-else-if="!currentHistoryId || isLoading" variant="info" show>
         <LoadingSpan message="Please wait" />
-    </BAlert>
-    <BAlert v-else-if="options.length === 0" variant="warning" show>
+    </GAlert>
+    <GAlert v-else-if="options.length === 0" variant="warning" show>
         No datasets found in your current history that are compatible. Please upload a compatible dataset.
-    </BAlert>
+    </GAlert>
     <div
         v-else
         :class="droppable && dragState && `ui-dragover-${dragState}`"
@@ -29,7 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { debounce } from "lodash";
 import { storeToRefs } from "pinia";
 import { computed, type Ref, ref, watch } from "vue";
@@ -49,6 +48,7 @@ import { useHistoryStore } from "@/stores/historyStore";
 
 import type { OptionType } from "./types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const DEFAULT_NAME = "...";
diff --git a/client/src/components/Sharing/ErrorMessages.vue b/client/src/components/Sharing/ErrorMessages.vue
index c92a93aa06b6..292c7fe7bff4 100644
--- a/client/src/components/Sharing/ErrorMessages.vue
+++ b/client/src/components/Sharing/ErrorMessages.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { getAppRoot } from "@/onload";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 const props = defineProps<{
     messages: string[];
 }>();
@@ -25,7 +26,7 @@ function splitLoginString(string: string) {
 
 <template>
     <div>
-        <BAlert
+        <GAlert
             v-for="(message, index) in props.messages"
             :key="message"
             show
@@ -41,6 +42,6 @@ function splitLoginString(string: string) {
                 </span>
             </span>
             <span v-else> {{ message }} </span>
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/Tool/CustomToolEditor.vue b/client/src/components/Tool/CustomToolEditor.vue
index 41c3d7cbe84b..33a1925ab913 100644
--- a/client/src/components/Tool/CustomToolEditor.vue
+++ b/client/src/components/Tool/CustomToolEditor.vue
@@ -22,6 +22,7 @@ import { useUnprivilegedToolStore } from "@/stores/unprivilegedToolStore";
 
 import { setupMonaco } from "./YamlJs";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 
 // Configure Monaco environment with worker factory before loading
@@ -195,9 +196,9 @@ async function generateViaLLM() {
 
 <template>
     <div>
-        <b-alert v-if="errorMsg" variant="danger" show dismissible>
+        <GAlert v-if="errorMsg" variant="danger" show dismissible>
             {{ errorMsg.err_msg }}
-        </b-alert>
+        </GAlert>
         <div class="d-flex flex-gapx-1">
             <Heading h1 separator inline size="lg" class="flex-grow-1 mb-2">Tool Editor</Heading>
             <b-button
diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 09559c8f9671..514e56907ddd 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { faExclamationCircle, faHdd, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BPopover } from "bootstrap-vue";
+import { BPopover } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onBeforeMount, ref, watch } from "vue";
 
@@ -19,6 +19,7 @@ import ToolHelpForum from "./ToolHelpForum.vue";
 import ToolSelectPreferredObjectStore from "./ToolSelectPreferredObjectStore.vue";
 import ToolTargetPreferredObjectStorePopover from "./ToolTargetPreferredObjectStorePopover.vue";
 import ToolTutorialRecommendations from "./ToolTutorialRecommendations.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 import FormCardSticky from "@/components/Form/FormCardSticky.vue";
 import FormMessage from "@/components/Form/FormMessage.vue";
@@ -228,7 +229,7 @@ onBeforeMount(() => {
                     :tool-id="props.id"
                     :tool-version="props.version"
                     :job-credentials-context="props.options.job_credentials_context" />
-                <BAlert
+                <GAlert
                     v-else-if="props.allowEditingCredentials"
                     v-g-tooltip.hover
                     variant="info"
@@ -250,7 +251,7 @@ onBeforeMount(() => {
                             </span>
                         </div>
                     </BPopover>
-                </BAlert>
+                </GAlert>
             </template>
 
             <FormMessage variant="danger" :message="errorText" :persistent="true" />
diff --git a/client/src/components/Tool/ToolCredentials.vue b/client/src/components/Tool/ToolCredentials.vue
index a8bce461022d..f37a2ad763d6 100644
--- a/client/src/components/Tool/ToolCredentials.vue
+++ b/client/src/components/Tool/ToolCredentials.vue
@@ -26,7 +26,7 @@
 
 import { faCaretRight, faCheck, faExclamation, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon, FontAwesomeLayers } from "@fortawesome/vue-fontawesome";
-import { BAlert, BBadge, BButton } from "bootstrap-vue";
+import { BBadge, BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
@@ -36,6 +36,7 @@ import { useUserToolCredentials } from "@/composables/userToolCredentials";
 import { useUserStore } from "@/stores/userStore";
 import { useUserToolsServiceCredentialsStore } from "@/stores/userToolsServiceCredentialsStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import ToolCredentialsContextCheck from "@/components/Tool/ToolCredentialsContextCheck.vue";
 import ToolCredentialsManagement from "@/components/User/Credentials/ToolCredentialsManagement.vue";
@@ -163,7 +164,7 @@ onMounted(async () => {
 
 <template>
     <div class="mt-2">
-        <BAlert show :variant="statusVariant" class="d-flex flex-column flex-gapy-1">
+        <GAlert show :variant="statusVariant" class="d-flex flex-column flex-gapy-1">
             <LoadingSpan v-if="isBusy" :message="busyMessage" />
             <div v-else-if="isAnonymous">
                 <span v-if="toolHasRequiredServiceCredentials">
@@ -248,7 +249,7 @@ onMounted(async () => {
                     </BBadge>
                 </div>
             </div>
-        </BAlert>
+        </GAlert>
 
         <ToolCredentialsManagement
             v-if="showModal"
diff --git a/client/src/components/Tool/ToolCredentialsContextCheck.vue b/client/src/components/Tool/ToolCredentialsContextCheck.vue
index 06b252701d2a..445afc8cf0c2 100644
--- a/client/src/components/Tool/ToolCredentialsContextCheck.vue
+++ b/client/src/components/Tool/ToolCredentialsContextCheck.vue
@@ -23,13 +23,14 @@
 
 import { faExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { ServiceCredentialsContext } from "@/api/userCredentials";
 import { useToolsServiceCredentialsDefinitionsStore } from "@/stores/toolsServiceCredentialsDefinitionsStore";
 import { useUserToolsServiceCredentialsStore } from "@/stores/userToolsServiceCredentialsStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface Props {
     /**
      * The ID of the tool to check credentials for
@@ -82,7 +83,7 @@ const currentSelectedIdsAreDifferent = computed(() => {
 </script>
 
 <template>
-    <BAlert v-if="currentSelectedIdsAreDifferent" show variant="warning" class="my-2">
+    <GAlert v-if="currentSelectedIdsAreDifferent" show variant="warning" class="my-2">
         <FontAwesomeIcon :icon="faExclamation" fixed-width />
 
         <span v-for="value in props.jobCredentialsContext" :key="value.name + value.version">
@@ -97,5 +98,5 @@ const currentSelectedIdsAreDifferent = computed(() => {
                 >. Previously used <b>{{ value.selected_group.name }} </b>.
             </template>
         </span>
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js
index 9af05c3cbd09..40e877a3b500 100644
--- a/client/src/components/Tool/ToolForm.test.js
+++ b/client/src/components/Tool/ToolForm.test.js
@@ -32,7 +32,7 @@ describe("ToolForm", () => {
     let userStore;
     let historyStore;
 
-    beforeEach(() => {
+    beforeEach(async () => {
         // I tried using the useConfig mock and this component seems to bypass that, it would be
         // better if it didn't. We shouldn't have to stub out an API request to get a particular config.
         server.use(
@@ -94,6 +94,9 @@ describe("ToolForm", () => {
         historyStore.setHistories([{ id: "fakeHistory" }]);
         historyStore.setCurrentHistoryId("fakeHistory");
         historyStore.startWatchingHistory = () => {};
+
+        await flushPromises();
+        userStore.clearRecentTools();
     });
 
     it("shows props", async () => {
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 0b9d3c2d268d..392862322009 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -1,23 +1,23 @@
 <template>
     <div v-if="currentUser && currentHistoryId && isConfigLoaded">
-        <b-alert :show="messageShow" :variant="messageVariant">
+        <GAlert :show="messageShow" :variant="messageVariant">
             {{ messageText }}
-        </b-alert>
-        <b-alert v-if="!showLoading && !canMutateHistory" show variant="warning">
+        </GAlert>
+        <GAlert v-if="!showLoading && !canMutateHistory" show variant="warning">
             {{ immutableHistoryMessage }}
-        </b-alert>
+        </GAlert>
         <LoadingSpan v-if="showLoading" message="Loading Tool" />
         <div v-if="showEntryPoints">
             <ToolEntryPoints v-for="job in entryPoints" :key="job.id" :job-id="job.id" />
         </div>
         <GModal :show.sync="showError" size="medium" :title="errorTitle | l" fixed-height>
-            <b-alert v-if="errorMessage" show variant="danger">
+            <GAlert v-if="errorMessage" show variant="danger">
                 {{ errorMessage }}
-            </b-alert>
-            <b-alert v-if="submissionRequestFailed" show variant="warning">
+            </GAlert>
+            <GAlert v-if="submissionRequestFailed" show variant="warning">
                 The server could not complete this request. Please verify your parameter settings, retry submission and
                 contact the Galaxy Team if this error persists. A transcript of the submitted data is shown below.
-            </b-alert>
+            </GAlert>
             <small class="text-muted">
                 <pre>{{ errorContentPretty }}</pre>
             </small>
diff --git a/client/src/components/Tool/ToolSuccess.vue b/client/src/components/Tool/ToolSuccess.vue
index 71a2b83cccda..01dd0f81bb60 100644
--- a/client/src/components/Tool/ToolSuccess.vue
+++ b/client/src/components/Tool/ToolSuccess.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -10,6 +9,7 @@ import { useJobStore } from "@/stores/jobStore";
 import LoadingSpan from "../LoadingSpan.vue";
 import ToolRecommendation from "../ToolRecommendation.vue";
 import ToolSuccessMessage from "./ToolSuccessMessage.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Webhook from "@/components/Common/Webhook.vue";
 import ToolEntryPoints from "@/components/ToolEntryPoints/ToolEntryPoints.vue";
 
@@ -31,9 +31,9 @@ if (!latestResponse.value || Object.keys(latestResponse.value).length === 0) {
 
 <template>
     <section>
-        <BAlert v-if="!jobResponse" variant="info" show>
+        <GAlert v-if="!jobResponse" variant="info" show>
             <LoadingSpan message="Waiting on data" />
-        </BAlert>
+        </GAlert>
         <div v-else>
             <div v-if="jobResponse?.produces_entry_points">
                 <ToolEntryPoints v-for="job in jobResponse.jobs" :key="job.id" :job-id="job.id" />
diff --git a/client/src/components/ToolsList/ToolOntologies.vue b/client/src/components/ToolsList/ToolOntologies.vue
index 12703f274839..7ef042c9ba9b 100644
--- a/client/src/components/ToolsList/ToolOntologies.vue
+++ b/client/src/components/ToolsList/ToolOntologies.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faExternalLinkAlt, faFilter, faSortAlphaDown, faSortAlphaUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BBadge, BDropdown, BDropdownItem } from "bootstrap-vue";
+import { BBadge, BDropdown, BDropdownItem } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { type ToolSection, useToolStore } from "@/stores/toolStore";
@@ -12,6 +12,7 @@ import { searchSections } from "../Panels/utilities";
 import GFormInput from "../BaseComponents/Form/GFormInput.vue";
 import GLink from "../BaseComponents/GLink.vue";
 import ToolOntologyCard from "./ToolOntologyCard.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import HelpText from "@/components/Help/HelpText.vue";
@@ -212,9 +213,9 @@ watch([ontologiesFilter, sortOrder, showing], async () => {
             </div>
         </div>
 
-        <BAlert v-if="errorMessage" show variant="danger">
+        <GAlert v-if="errorMessage" show variant="danger">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
         <div class="d-flex flex-column overflow-auto h-100">
             <ScrollList
diff --git a/client/src/components/ToolsList/ToolsListTable.vue b/client/src/components/ToolsList/ToolsListTable.vue
index 86e4da2268b7..1aaec77ea37e 100644
--- a/client/src/components/ToolsList/ToolsListTable.vue
+++ b/client/src/components/ToolsList/ToolsListTable.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
@@ -8,6 +7,7 @@ import { type Tool, useToolStore } from "@/stores/toolStore";
 import LoadingSpan from "../LoadingSpan.vue";
 import ScrollList from "../ScrollList/ScrollList.vue";
 import ToolsListCard from "./ToolsListCard.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 /** Number of tools to fetch the help data for at a time. */
 const FETCH_LIMIT = 4;
@@ -62,9 +62,9 @@ const toolsKey = computed(() => JSON.stringify(props.tools.map((tool) => tool.id
         :grid-view="props.gridView"
         no-footer>
         <template v-slot:loading>
-            <BAlert v-if="props.tools.length" show>
+            <GAlert v-if="props.tools.length" show>
                 <LoadingSpan message="Loading tools" />
-            </BAlert>
+            </GAlert>
         </template>
 
         <template v-slot:item="{ item }">
diff --git a/client/src/components/Toolshed/InstalledList/Index.vue b/client/src/components/Toolshed/InstalledList/Index.vue
index 28f20e4baa72..205264f00292 100644
--- a/client/src/components/Toolshed/InstalledList/Index.vue
+++ b/client/src/components/Toolshed/InstalledList/Index.vue
@@ -4,7 +4,7 @@
         <div v-else>
             <LoadingSpan v-if="loading" message="Loading installed repositories" />
             <div v-else>
-                <BAlert :variant="messageVariant" :show="showMessage">{{ message }}</BAlert>
+                <GAlert :variant="messageVariant" :show="showMessage">{{ message }}</GAlert>
 
                 <div class="m-1">
                     <span class="installed-message text-muted">
@@ -61,7 +61,7 @@
 <script>
 import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BBadge } from "bootstrap-vue";
+import { BBadge } from "bootstrap-vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
 
@@ -69,13 +69,14 @@ import { Services } from "../services";
 
 import RepositoryDetails from "./Details.vue";
 import Monitor from "./Monitor.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 export default {
     components: {
-        BAlert,
+        GAlert,
         BBadge,
         FontAwesomeIcon,
         GLink,
diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index 975ef061bf5a..235708db8088 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <BAlert v-if="error" variant="danger" show>
+        <GAlert v-if="error" variant="danger" show>
             {{ error }}
-        </BAlert>
+        </GAlert>
 
         <GCard v-if="showItems" class="my-2">
             <h2 class="m-3 h-text">Currently installing...</h2>
@@ -27,23 +27,22 @@
             </GTable>
         </GCard>
 
-        <BAlert v-if="showEmpty" variant="info" show> Currently there are no installing repositories. </BAlert>
+        <GAlert v-if="showEmpty" variant="info" show> Currently there are no installing repositories. </GAlert>
     </div>
 </template>
 
 <script>
-import { BAlert } from "bootstrap-vue";
-
 import { Services } from "../services";
 
 import InstallationActions from "../RepositoryDetails/InstallationActions.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import GCard from "@/components/Common/GCard.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 export default {
     components: {
-        BAlert,
+        GAlert,
         GCard,
         GLink,
         GTable,
diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.vue b/client/src/components/Toolshed/RepositoryDetails/Index.vue
index 735e23e1e438..a004cc975b68 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.vue
@@ -12,6 +12,7 @@ import { Services } from "../services";
 import InstallationActions from "./InstallationActions.vue";
 import InstallationSettings from "./InstallationSettings.vue";
 import RepositoryTools from "./RepositoryTools.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -223,9 +224,9 @@ function stopWatchingRepository() {
         <div>
             <LoadingSpan v-if="loading" message="Loading repository details" />
             <div v-else>
-                <b-alert v-if="error" variant="danger" show>
+                <GAlert v-if="error" variant="danger" show>
                     {{ error }}
-                </b-alert>
+                </GAlert>
                 <div v-else class="border rounded">
                     <GTable borderless :items="repoTable" :fields="repoFields" class="text-center m-0">
                         <template v-slot:cell(numeric_revision)="row">
diff --git a/client/src/components/Tour/Tour.vue b/client/src/components/Tour/Tour.vue
index 61c46add8f08..fedb58a0683d 100644
--- a/client/src/components/Tour/Tour.vue
+++ b/client/src/components/Tour/Tour.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, nextTick, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -14,6 +13,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import GModal from "../BaseComponents/GModal.vue";
 import LoadingSpan from "../LoadingSpan.vue";
 import TourStep from "./TourStep.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 /** Popup display duration when auto-playing the tour */
 const PLAY_DELAY = 3000;
@@ -267,10 +267,10 @@ function modalDismiss(ok = true) {
             :footer="Boolean(errorMessage)"
             @ok="modalDismiss"
             @cancel="modalDismiss(false)">
-            <BAlert :variant="modalContents.variant" show>
+            <GAlert :variant="modalContents.variant" show>
                 <span v-if="!modalContents.loading">{{ modalContents.message }}</span>
                 <LoadingSpan v-else :message="modalContents.message" />
-            </BAlert>
+            </GAlert>
             <div v-if="errorMessage">
                 The tour encountered an issue and cannot continue to the next step. This may be due to:
                 <ul class="mb-2">
diff --git a/client/src/components/User/APIKey/APIKey.vue b/client/src/components/User/APIKey/APIKey.vue
index aa49a7134439..5b8721707321 100644
--- a/client/src/components/User/APIKey/APIKey.vue
+++ b/client/src/components/User/APIKey/APIKey.vue
@@ -8,6 +8,7 @@ import { getGalaxyInstance } from "@/app";
 import svc from "./model/service";
 
 import APIKeyItem from "./APIKeyItem.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -47,13 +48,13 @@ const breadcrumbItems = [{ title: "User Preferences", to: "/user" }, { title: "M
             access your account and should be treated with the same care as your login password.
         </span>
 
-        <b-alert :show="errorMessage" dismissible fade variant="warning" @dismissed="errorMessage = null">
+        <GAlert :show="errorMessage" dismissible fade variant="warning" @dismissed="errorMessage = null">
             {{ errorMessage }}
-        </b-alert>
+        </GAlert>
 
-        <b-alert v-if="loading" class="m-2" show variant="info">
+        <GAlert v-if="loading" class="m-2" show variant="info">
             <LoadingSpan message="Loading API keys" />
-        </b-alert>
+        </GAlert>
 
         <b-button
             v-else-if="!loading && !apiKey"
diff --git a/client/src/components/User/Credentials/CredentialsManagement.vue b/client/src/components/User/Credentials/CredentialsManagement.vue
index 7df3e282e4a1..b3d4b8fc0a9c 100644
--- a/client/src/components/User/Credentials/CredentialsManagement.vue
+++ b/client/src/components/User/Credentials/CredentialsManagement.vue
@@ -20,7 +20,6 @@
  * <CredentialsManagement />
  */
 
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -32,6 +31,7 @@ import { useUserToolsServiceCredentialsStore } from "@/stores/userToolsServiceCr
 import Filtering, { contains } from "@/utils/filtering";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
@@ -232,13 +232,13 @@ watch(
             :show-advanced.sync="showAdvanced"
             placeholder="Search credentials groups by name, tool, or service" />
 
-        <BAlert v-if="isBusy" show>
+        <GAlert v-if="isBusy" show>
             <LoadingSpan :message="busyMessage" />
-        </BAlert>
-        <BAlert v-else-if="noItems" variant="info" show>
+        </GAlert>
+        <GAlert v-else-if="noItems" variant="info" show>
             No credentials have been defined for any tools or services yet.
-        </BAlert>
-        <BAlert v-else-if="hasInvalidFilters" variant="danger" show>
+        </GAlert>
+        <GAlert v-else-if="hasInvalidFilters" variant="danger" show>
             <Heading h4 inline size="sm">Invalid filters in query:</Heading>
             <ul class="mb-0">
                 <li v-for="[invalidKey, value] in Object.entries(invalidFilters)" :key="invalidKey">
@@ -254,10 +254,10 @@ watch(
                 @click="filterText = `'${filterText}'`">
                 Match the exact query provided
             </GLink>
-        </BAlert>
-        <BAlert v-else-if="noResults" variant="info" show>
+        </GAlert>
+        <GAlert v-else-if="noResults" variant="info" show>
             No credentials group found matching: <span class="font-weight-bold">{{ filterText }}</span>
-        </BAlert>
+        </GAlert>
         <div v-else-if="!isBusy">
             <ServiceCredentialsGroupsList :service-groups="filteredUserToolsGroups" />
         </div>
diff --git a/client/src/components/User/CustomBuilds.vue b/client/src/components/User/CustomBuilds.vue
index a96782e5ed73..df960ee5001c 100644
--- a/client/src/components/User/CustomBuilds.vue
+++ b/client/src/components/User/CustomBuilds.vue
@@ -42,7 +42,7 @@
         <BRow>
             <BCol>
                 <BCard>
-                    <BAlert
+                    <GAlert
                         fade
                         dismissible
                         :variant="alertType"
@@ -50,7 +50,7 @@
                         @dismissed="dismissCountDown = 0"
                         @dismiss-count-down="countDownChanged">
                         {{ alertMessage }}
-                    </BAlert>
+                    </GAlert>
 
                     <BForm @submit.prevent="save">
                         <BFormGroup label="Name" description="Specify a build name, e.g. Hamster." label-for="name">
@@ -151,7 +151,6 @@ import { faSave, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import {
-    BAlert,
     BButton,
     BCard,
     BCol,
@@ -170,13 +169,14 @@ import { getGalaxyInstance } from "@/app";
 import { useHistoryStore } from "@/stores/historyStore";
 import { withPrefix } from "@/utils/redirect";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 export default {
     components: {
-        BAlert,
+        GAlert,
         BButton,
         BCard,
         BCol,
diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index 9ec00b586a95..2bb6c9370929 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -12,6 +12,7 @@ import { useUserStore } from "@/stores/userStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 import { bytesToString } from "@/utils/utils";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import QuotaUsageSummary from "@/components/User/DiskUsage/Quota/QuotaUsageSummary.vue";
 
 const { config, isConfigLoaded } = useConfig(true);
@@ -86,10 +87,10 @@ onMounted(async () => {
 </script>
 <template>
     <div>
-        <b-alert v-if="errorMessage" variant="danger" show>
+        <GAlert v-if="errorMessage" variant="danger" show>
             <h2 v-localize class="alert-heading h-sm">Failed to access disk usage details.</h2>
             {{ errorMessage }}
-        </b-alert>
+        </GAlert>
         <b-container v-if="currentUser">
             <b-row v-if="isConfigLoaded && config.enable_quotas" class="justify-content-md-center">
                 <QuotaUsageSummary v-if="quotaUsages" :quota-usages="quotaUsages" />
@@ -99,10 +100,10 @@ onMounted(async () => {
             </h2>
         </b-container>
         <b-container class="text-center mb-5 w-75">
-            <b-alert v-if="isRefreshing" class="refreshing-alert" variant="info" show>
+            <GAlert v-if="isRefreshing" class="refreshing-alert" variant="info" show>
                 <b-spinner small class="mr-2" />
                 <span v-localize>Recalculating disk usage... this may take some time, please check back later.</span>
-            </b-alert>
+            </GAlert>
             <b-button
                 v-else
                 id="refresh-disk-usage"
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
index 10eda4d27216..559f99babdba 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard, BLink } from "bootstrap-vue";
+import { BCard, BLink } from "bootstrap-vue";
 import { computed, onMounted, ref, watchEffect } from "vue";
 
 import localize from "@/utils/localization";
@@ -7,6 +7,7 @@ import { wait } from "@/utils/utils";
 
 import type { CleanableSummary, CleanupOperation } from "./model";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface CleanupOperationSummaryProps {
@@ -71,9 +72,9 @@ function onReviewItems() {
         <p class="text-muted small flex-grow-1">{{ operation.description }}</p>
         <div>
             <LoadingSpan v-if="loading" />
-            <BAlert v-else-if="errorMessage" variant="danger" show data-test-id="error-alert">
+            <GAlert v-else-if="errorMessage" variant="danger" show data-test-id="error-alert">
                 {{ errorMessage }}
-            </BAlert>
+            </GAlert>
             <BLink v-else-if="summary && canClearItems" href="#" data-test-id="review-link" @click="onReviewItems">
                 <b>{{ localize("Review and clear") }} {{ summary.niceTotalSize }}</b>
             </BLink>
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue
index da56e4c2de67..3680b01ee032 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupResultDialog.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { TableField } from "@/components/Common/GTable.types";
@@ -8,6 +7,7 @@ import localize from "@/utils/localization";
 import type { CleanupResult } from "./model";
 
 import Alert from "@/components/Alert.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -61,9 +61,9 @@ defineExpose({
 
             <LoadingSpan v-if="isLoading" class="mx-auto" message="Cleaning Up" data-test-id="loading-spinner" />
             <div v-else-if="result">
-                <BAlert v-if="result.hasFailed" show variant="danger" data-test-id="error-alert">
+                <GAlert v-if="result.hasFailed" show variant="danger" data-test-id="error-alert">
                     {{ result.errorMessage }}
-                </BAlert>
+                </GAlert>
                 <h3 v-else-if="result.success" data-test-id="success-info">
                     You've cleared <b>{{ result.niceTotalFreeBytes }}</b>
                 </h3>
@@ -72,11 +72,11 @@ defineExpose({
                         You've successfully cleared <b>{{ result.totalCleaned }}</b> items for a total of
                         <b>{{ result.niceTotalFreeBytes }}</b> but...
                     </h3>
-                    <BAlert v-if="result.hasSomeErrors" show variant="warning">
+                    <GAlert v-if="result.hasSomeErrors" show variant="warning">
                         <h3 class="mb-0">
                             <b>{{ result.errors.length }}</b> items couldn't be cleared
                         </h3>
-                    </BAlert>
+                    </GAlert>
                 </div>
 
                 <GTable
diff --git a/client/src/components/User/DiskUsage/Visualizations/ShowObjectStore.vue b/client/src/components/User/DiskUsage/Visualizations/ShowObjectStore.vue
index ac7de7d280c3..3883be7e9f23 100644
--- a/client/src/components/User/DiskUsage/Visualizations/ShowObjectStore.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/ShowObjectStore.vue
@@ -5,6 +5,7 @@ import { getObjectStoreDetails } from "@/api/objectStores";
 import type { ConcreteObjectStoreModel } from "@/components/ObjectStore/types";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
 
@@ -45,6 +46,6 @@ const forWhat = "This Galaxy storage is";
         <LoadingSpan v-if="loading" v-localize :message="loadingMessage" />
         <DescribeObjectStore v-else-if="objectStore != null" :what="forWhat" :storage-info="objectStore">
         </DescribeObjectStore>
-        <b-alert v-else-if="error" show variant="danger">{{ error }}</b-alert>
+        <GAlert v-else-if="error" show variant="danger">{{ error }}</GAlert>
     </div>
 </template>
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 51654d971056..90405395f94a 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -1,23 +1,18 @@
 <template>
     <section class="external-id">
-        <b-alert :show="!!connectExternal" variant="info">
+        <GAlert :show="!!connectExternal" variant="info">
             You are logged in. You can now connect the Galaxy user account with the email <i>{{ userEmail }}</i
             >, to your preferred external provider.
-        </b-alert>
-        <b-alert :show="!!existingEmail" variant="warning">
+        </GAlert>
+        <GAlert :show="!!existingEmail" variant="warning">
             Note: We found a Galaxy account matching the email of this identity, <i>{{ existingEmail }}</i
             >. The active account <i>{{ userEmail }}</i> has been linked to this external identity. If you wish to link
             this identity to a different account, you will need to disconnect it from this account first.
-        </b-alert>
+        </GAlert>
         <header>
-            <b-alert
-                dismissible
-                fade
-                variant="warning"
-                :show="errorMessage !== null"
-                @dismissed="errorMessage = null"
-                >{{ errorMessage }}</b-alert
-            >
+            <GAlert dismissible fade variant="warning" :show="errorMessage !== null" @dismissed="errorMessage = null">{{
+                errorMessage
+            }}</GAlert>
 
             <hgroup class="external-id-title">
                 <h1 class="h-lg">Manage External Identities</h1>
@@ -50,14 +45,9 @@
                 {{ item.email }}
             </b-button>
 
-            <b-alert
-                dismissible
-                fade
-                variant="warning"
-                :show="errorMessage !== null"
-                @dismissed="errorMessage = null"
-                >{{ errorMessage }}</b-alert
-            >
+            <GAlert dismissible fade variant="warning" :show="errorMessage !== null" @dismissed="errorMessage = null">{{
+                errorMessage
+            }}</GAlert>
         </div>
 
         <div v-if="enable_oidc" class="external-subheading">
@@ -81,6 +71,7 @@ import { capitalizeFirstLetter } from "@/utils/strings";
 
 import svc from "./service";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ExternalLogin from "@/components/User/ExternalIdentities/ExternalLogin.vue";
 
 Vue.use(BootstrapVue);
@@ -88,6 +79,7 @@ Vue.use(BootstrapVue);
 export default {
     components: {
         ExternalLogin,
+        GAlert,
     },
     setup() {
         const { confirm } = useConfirmDialog();
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index 8bac792fbdec..a4efe5f92d81 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import axios, { type AxiosError } from "axios";
-import { BAlert, BForm, BFormCheckbox, BFormGroup } from "bootstrap-vue";
+import { BForm, BFormCheckbox, BFormGroup } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
 import Multiselect from "vue-multiselect";
 
@@ -16,6 +16,7 @@ import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import VerticalSeparator from "@/components/Common/VerticalSeparator.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -165,9 +166,9 @@ function getIdpPreference() {
 
 <template>
     <div class="h-100">
-        <BAlert v-if="messageText" class="text-nowrap" show :variant="messageVariant">
+        <GAlert v-if="messageText" class="text-nowrap" show :variant="messageVariant">
             {{ messageText }}
-        </BAlert>
+        </GAlert>
 
         <div :class="{ 'd-flex h-100': !props.columnDisplay }">
             <BForm v-if="cILogonConfigured" id="externalLogin" class="cilogon">
diff --git a/client/src/components/User/ExternalIdentities/ExternalRegistration.test.ts b/client/src/components/User/ExternalIdentities/ExternalRegistration.test.ts
index c4b7e245f22a..d935b902bbbb 100644
--- a/client/src/components/User/ExternalIdentities/ExternalRegistration.test.ts
+++ b/client/src/components/User/ExternalIdentities/ExternalRegistration.test.ts
@@ -15,7 +15,7 @@ function mountExtReg(cfg: object) {
         pinia,
         propsData: { idpsWithRegistration },
         stubs: {
-            BAlert: true,
+            GAlert: true,
             BButton: true,
             BForm: true,
             BFormCheckbox: true,
diff --git a/client/src/components/User/ExternalIdentities/ExternalRegistration.vue b/client/src/components/User/ExternalIdentities/ExternalRegistration.vue
index f89b4150e1ba..535eecaa4965 100644
--- a/client/src/components/User/ExternalIdentities/ExternalRegistration.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalRegistration.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { BAlert, BForm } from "bootstrap-vue";
+import { BForm } from "bootstrap-vue";
 import { ref } from "vue";
 
 import { capitalizeFirstLetter } from "@/utils/strings";
 
 import type { OIDCConfigWithRegistration } from "./ExternalIDHelper";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 
 const props = defineProps<{
@@ -19,9 +20,9 @@ const messageVariant = ref<string | null>(null);
 
 <template>
     <div class="h-100">
-        <BAlert v-if="messageText" show :variant="messageVariant">
+        <GAlert v-if="messageText" show :variant="messageVariant">
             {{ messageText }}
-        </BAlert>
+        </GAlert>
 
         <BForm id="externalRegister" :class="{ 'd-flex h-100 justify-content-center': !props.columnDisplay }">
             <div :class="!props.columnDisplay ? 'oidc-idps-column' : 'oidc-idps-grid'">
diff --git a/client/src/components/User/Notifications/NotificationsPreferences.vue b/client/src/components/User/Notifications/NotificationsPreferences.vue
index e654b091e343..c270de1bfa62 100644
--- a/client/src/components/User/Notifications/NotificationsPreferences.vue
+++ b/client/src/components/User/Notifications/NotificationsPreferences.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faCheckCircle, faExclamationCircle, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -16,6 +16,7 @@ import {
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import NotificationsCategorySettings from "./NotificationsCategorySettings.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -116,13 +117,13 @@ function onChannelChange(category: NotificationCategory, channel: NotificationCh
             You can manage push notifications preferences here.
         </div>
 
-        <BAlert v-if="errorMessage" show dismissible fade variant="warning" @dismissed="errorMessage = null">
+        <GAlert v-if="errorMessage" show dismissible fade variant="warning" @dismissed="errorMessage = null">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="loading" class="m-2" show variant="info">
+        <GAlert v-if="loading" class="m-2" show variant="info">
             <LoadingSpan message="Loading notifications preferences" />
-        </BAlert>
+        </GAlert>
 
         <div v-else-if="showPreferences" class="notifications-preferences-body">
             <div v-for="category in categories" :key="category" class="card-container">
@@ -148,7 +149,7 @@ function onChannelChange(category: NotificationCategory, channel: NotificationCh
             </BButton>
         </div>
 
-        <BAlert
+        <GAlert
             v-else-if="!loading && browserSupportsPushNotifications() && pushNotificationsGranted"
             show
             variant="info"
@@ -156,12 +157,12 @@ function onChannelChange(category: NotificationCategory, channel: NotificationCh
             <FontAwesomeIcon :icon="faCheckCircle" />
             Push notifications are enabled. You can disable them by revoking the site notification privilege in your
             browser.
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-else-if="!loading" show variant="warning" class="my-2">
+        <GAlert v-else-if="!loading" show variant="warning" class="my-2">
             <FontAwesomeIcon :icon="faExclamationCircle" />
             Push notifications are not supported by this browser. You can still receive in-app notifications.
-        </BAlert>
+        </GAlert>
 
         <div v-if="!loading && config.enable_notification_system" class="d-flex justify-content-center">
             <AsyncButton :action="updateNotificationsPreferences" :icon="faSave" color="blue" size="medium">
diff --git a/client/src/components/User/UserBeaconSettings.vue b/client/src/components/User/UserBeaconSettings.vue
index ebe3e3edaa4b..313372e78a50 100644
--- a/client/src/components/User/UserBeaconSettings.vue
+++ b/client/src/components/User/UserBeaconSettings.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faExchangeAlt, faPlus, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -19,6 +18,7 @@ import GTable from "../Common/GTable.vue";
 import Heading from "../Common/Heading.vue";
 import ExternalLink from "../ExternalLink.vue";
 import UtcDate from "../UtcDate.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const BEACON_HISTORY_NAME = "Beacon Export 📡";
 
@@ -165,22 +165,22 @@ onOpenModal();
             negotiate further information exchange or data access.
         </p>
 
-        <BAlert v-if="enabled" show>
+        <GAlert v-if="enabled" show>
             <div class="d-flex justify-content-between align-items-center">
                 <div>Beacon sharing is <span class="font-weight-bold">enabled</span> for your profile</div>
                 <GButton :disabled="togglingBeacon" color="red" @click="toggleBeacon(false)">Disable</GButton>
             </div>
-        </BAlert>
+        </GAlert>
 
         <!-- Setting to show when beacon is disabled -->
-        <BAlert v-else show>
+        <GAlert v-else show>
             <div class="d-flex justify-content-between align-items-center">
                 <div>
                     Beacon sharing is currently <span class="font-weight-bold">disabled</span> - no data will be shared
                 </div>
                 <GButton :disabled="togglingBeacon" color="green" @click="toggleBeacon(true)">Enable</GButton>
             </div>
-        </BAlert>
+        </GAlert>
 
         <template v-if="enabled">
             <div>
@@ -198,7 +198,7 @@ onOpenModal();
             <!-- Detailed information about the beacon history -->
             <div class="my-1">
                 <!-- Case: History does not exist-->
-                <BAlert v-if="!beaconHistories.length" show>
+                <GAlert v-if="!beaconHistories.length" show>
                     <div class="d-flex justify-content-between align-items-center">
                         <div>No beacon history found</div>
                         <GButton color="blue" @click="createBeaconHistory">
@@ -206,7 +206,7 @@ onOpenModal();
                             Create Beacon History
                         </GButton>
                     </div>
-                </BAlert>
+                </GAlert>
 
                 <div v-else>
                     <Heading separator size="sm">Existing Beacon Histories</Heading>
diff --git a/client/src/components/User/UserPreferences.test.ts b/client/src/components/User/UserPreferences.test.ts
index 828dc626e51d..1f14ba73c517 100644
--- a/client/src/components/User/UserPreferences.test.ts
+++ b/client/src/components/User/UserPreferences.test.ts
@@ -82,7 +82,7 @@ describe("UserPreferences.vue", () => {
                 UserDetailsElement: true,
                 UserPreferencesElement: true,
                 Heading: true,
-                BAlert: true,
+                GAlert: true,
                 UserPickTheme: true,
                 UserBeaconSettings: true,
                 UserPreferredObjectStore: true,
@@ -115,7 +115,7 @@ describe("UserPreferences.vue", () => {
                 UserDetailsElement: true,
                 UserPreferencesElement: true,
                 Heading: true,
-                BAlert: true,
+                GAlert: true,
                 UserPickTheme: true,
                 UserBeaconSettings: true,
                 UserPreferredObjectStore: true,
@@ -153,7 +153,7 @@ describe("UserPreferences.vue", () => {
                 UserDetailsElement: true,
                 UserPreferencesElement: true,
                 Heading: true,
-                BAlert: true,
+                GAlert: true,
                 UserPickTheme: true,
                 UserBeaconSettings: true,
                 UserPreferredObjectStore: true,
@@ -184,7 +184,7 @@ describe("UserPreferences.vue", () => {
                 UserDetailsElement: true,
                 UserPreferencesElement: true,
                 Heading: true,
-                BAlert: true,
+                GAlert: true,
                 UserPickTheme: true,
                 UserBeaconSettings: true,
                 UserPreferredObjectStore: true,
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index 72a28b866032..3c3e52a7c620 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BAlert } from "bootstrap-vue";
 import {
     faBell,
     faBroadcastTower,
@@ -35,6 +34,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import GLink from "../BaseComponents/GLink.vue";
 import GModal from "../BaseComponents/GModal.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import Heading from "@/components/Common/Heading.vue";
 import UserBeaconSettings from "@/components/User/UserBeaconSettings.vue";
@@ -173,9 +173,9 @@ onMounted(async () => {
             Manage your user preferences on this page, including email address, password, and other settings.
         </Heading>
 
-        <BAlert :variant="messageVariant" :show="!!message">
+        <GAlert :variant="messageVariant" :show="!!message">
             {{ message }}
-        </BAlert>
+        </GAlert>
 
         <UserDetailsElement />
 
@@ -322,7 +322,7 @@ onMounted(async () => {
             </div>
 
             <GModal :show.sync="showDataPrivateModal" title="Datasets are now private" size="small">
-                <BAlert variant="info" show>
+                <GAlert variant="info" show>
                     All of your histories and datasets have been made private. If you'd like to make all
                     <strong>future</strong>
                     histories private please use the
@@ -331,7 +331,7 @@ onMounted(async () => {
                         Set Permissions for New Histories
                     </GLink>
                     interface.
-                </BAlert>
+                </GAlert>
             </GModal>
 
             <UserPickTheme v-if="hasThemes && showThemPickerModal" @reset="toggleThemeModal" />
diff --git a/client/src/components/User/UserPreferencesForm.vue b/client/src/components/User/UserPreferencesForm.vue
index 31a984660c91..4fc60c6ad4ac 100644
--- a/client/src/components/User/UserPreferencesForm.vue
+++ b/client/src/components/User/UserPreferencesForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watchEffect } from "vue";
 
@@ -11,6 +10,7 @@ import {
 } from "@/components/User/UserPreferencesModel";
 import { useUserStore } from "@/stores/userStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import FormGeneric from "@/components/Form/FormGeneric.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -57,9 +57,9 @@ watchEffect(() => {
         <BreadcrumbHeading :items="breadcrumbItems" />
 
         <FormGeneric v-if="formConfig" v-bind="formConfig" :trim-inputs="true" />
-        <BAlert v-else-if="!loading" show variant="danger"> User preferences not found. </BAlert>
-        <BAlert v-else-if="loading" show>
+        <GAlert v-else-if="!loading" show variant="danger"> User preferences not found. </GAlert>
+        <GAlert v-else-if="loading" show>
             <LoadingSpan message="Loading user preferences" />
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/Visualizations/DisplayApplication.vue b/client/src/components/Visualizations/DisplayApplication.vue
index 96fc5c3f1d0f..ebc91ba1b0e6 100644
--- a/client/src/components/Visualizations/DisplayApplication.vue
+++ b/client/src/components/Visualizations/DisplayApplication.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { faCheck, faExternalLinkAlt, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, onMounted, ref } from "vue";
 
 import { type components, GalaxyApi } from "@/api";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 type CreateLinkFeedback = components["schemas"]["CreateLinkFeedback"];
@@ -68,16 +68,16 @@ onMounted(() => {
 
 <template>
     <div>
-        <BAlert v-if="errorMessage" variant="danger" show>
+        <GAlert v-if="errorMessage" variant="danger" show>
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
         <LoadingSpan v-else-if="isLoading" />
         <div v-else-if="hasData">
             <div v-for="(message, messageIndex) in applicationData.messages" :key="messageIndex">
-                <BAlert :variant="message[1]" show>
+                <GAlert :variant="message[1]" show>
                     <FontAwesomeIcon v-if="applicationData.refresh" spin :icon="faSpinner" />
                     <span>{{ message[0] }}</span>
-                </BAlert>
+                </GAlert>
             </div>
             <div v-if="applicationData.preparable_steps">
                 <h4 class="my-2">Display Application Initialization</h4>
@@ -88,7 +88,7 @@ onMounted(() => {
                     <span>('{{ step.state }}')</span>
                 </div>
             </div>
-            <BAlert v-if="applicationData.resource" variant="info" show>
+            <GAlert v-if="applicationData.resource" variant="info" show>
                 <span>
                     <span>Display application is ready and can be viewed at</span>
                     <a :href="applicationData.resource" target="_blank">
@@ -96,7 +96,7 @@ onMounted(() => {
                         <FontAwesomeIcon :icon="faExternalLinkAlt" />
                     </a>
                 </span>
-            </BAlert>
+            </GAlert>
         </div>
     </div>
 </template>
diff --git a/client/src/components/Visualizations/DisplayApplications.vue b/client/src/components/Visualizations/DisplayApplications.vue
index f7c1214ef46a..36687b0d88cd 100644
--- a/client/src/components/Visualizations/DisplayApplications.vue
+++ b/client/src/components/Visualizations/DisplayApplications.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { BAlert, BLink } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 
 import { DatasetProvider } from "@/components/providers";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 interface LinkType {
     app_name: string;
     link_name: string;
@@ -20,7 +22,7 @@ function getUrl(link: LinkType) {
 <template>
     <div>
         <DatasetProvider :id="props.datasetId" v-slot="{ result: dataset }">
-            <BAlert
+            <GAlert
                 v-if="
                     (dataset && dataset.display_apps && dataset.display_apps.length > 0) ||
                     (dataset && dataset.display_types && dataset.display_types.length > 0)
@@ -53,7 +55,7 @@ function getUrl(link: LinkType) {
                     </ol>
                 </div>
                 <div>or select a visualization from below.</div>
-            </BAlert>
+            </GAlert>
         </DatasetProvider>
     </div>
 </template>
diff --git a/client/src/components/Visualizations/VisualizationDisplay.vue b/client/src/components/Visualizations/VisualizationDisplay.vue
index b3a343a11e0f..f384e0da805e 100644
--- a/client/src/components/Visualizations/VisualizationDisplay.vue
+++ b/client/src/components/Visualizations/VisualizationDisplay.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { onMounted, ref } from "vue";
 import { onBeforeRouteLeave } from "vue-router/composables";
 
 import { GalaxyApi } from "@/api";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.vue";
 
@@ -107,9 +107,9 @@ onMounted(async () => {
 
 <template>
     <div class="position-relative h-100 overflow-hidden">
-        <BAlert v-if="errorMessage" variant="danger" show>
+        <GAlert v-if="errorMessage" variant="danger" show>
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
         <div v-else-if="isLoading" class="iframe-loading bg-light">
             <LoadingSpan message="Loading visualization" />
         </div>
diff --git a/client/src/components/Visualizations/VisualizationFrame.vue b/client/src/components/Visualizations/VisualizationFrame.vue
index ecf4c3787f0e..6a1c584e2ade 100644
--- a/client/src/components/Visualizations/VisualizationFrame.vue
+++ b/client/src/components/Visualizations/VisualizationFrame.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import axios from "axios";
-import { BAlert } from "bootstrap-vue";
 import { debounce } from "lodash";
 import { onMounted, ref } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
+
 const DELAY = 300;
 
 interface Props {
@@ -94,7 +95,7 @@ onMounted(() => render());
 
 <template>
     <div v-if="errorMessage">
-        <BAlert variant="danger" show>{{ errorMessage }}</BAlert>
+        <GAlert variant="danger" show>{{ errorMessage }}</GAlert>
     </div>
     <iframe
         v-else
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index f844dacacc67..e8e4035ece7f 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -98,7 +98,7 @@
                     :spin="invocationStep.headerIconSpin" />
             </span>
         </div>
-        <b-alert
+        <GAlert
             v-if="!!errors"
             variant="danger"
             show
@@ -108,7 +108,7 @@
             @dblclick.exact="onDoubleClick"
             @click.shift.capture.prevent.stop="toggleSelected">
             {{ errors }}
-        </b-alert>
+        </GAlert>
         <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
             v-else
@@ -188,6 +188,7 @@ import { isWorkflowInput } from "../constants";
 import { ToggleStepSelectedAction } from "./Actions/stepActions";
 import type { OutputTerminals } from "./modules/terminals";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DraggableWrapper from "@/components/Workflow/Editor/DraggablePan.vue";
 import NodeInput from "@/components/Workflow/Editor/NodeInput.vue";
diff --git a/client/src/components/Workflow/Editor/WorkflowAttributes.vue b/client/src/components/Workflow/Editor/WorkflowAttributes.vue
index 251b444f6bb8..b805ca136b05 100644
--- a/client/src/components/Workflow/Editor/WorkflowAttributes.vue
+++ b/client/src/components/Workflow/Editor/WorkflowAttributes.vue
@@ -1,8 +1,8 @@
 <template>
     <ActivityPanel id="edit-attributes" title="Attributes" itemscope itemtype="http://schema.org/CreativeWork">
-        <b-alert :variant="messageVariant" :show="!!message">
+        <GAlert :variant="messageVariant" :show="!!message">
             {{ message }}
-        </b-alert>
+        </GAlert>
         <div id="workflow-name-area">
             <b>Name</b>
             <meta itemprop="name" :content="name" />
@@ -165,6 +165,7 @@ import {
 import { UntypedParameters } from "./modules/parameters";
 
 import WorkflowVersionSelector from "../WorkflowVersionSelector.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import ItemListEditor from "@/components/Common/ItemListEditor.vue";
 import LicenseSelector from "@/components/License/LicenseSelector.vue";
@@ -177,6 +178,7 @@ const BEST_PRACTICE_HIGHLIGHT_TIME = 4000;
 export default {
     name: "WorkflowAttributes",
     components: {
+        GAlert,
         StatelessTags,
         LicenseSelector,
         CreatorEditor,
diff --git a/client/src/components/Workflow/Import/FromUrl.vue b/client/src/components/Workflow/Import/FromUrl.vue
index bb53f8507fd0..6cc85e08d044 100644
--- a/client/src/components/Workflow/Import/FromUrl.vue
+++ b/client/src/components/Workflow/Import/FromUrl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
-import { BAlert, BForm, BFormGroup, BFormInput } from "bootstrap-vue";
+import { BForm, BFormGroup, BFormInput } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 import { RouterLink } from "vue-router";
 import { useRouter } from "vue-router/composables";
@@ -8,6 +8,7 @@ import { useRouter } from "vue-router/composables";
 import { getRedirectOnImportPath } from "@/components/Workflow/redirectPath";
 import { withPrefix } from "@/utils/redirect";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const emit = defineEmits<{
@@ -94,12 +95,12 @@ defineExpose({ attemptImport });
             instead.
         </BFormGroup>
 
-        <BAlert :show="hasErrorMessage" variant="danger">
+        <GAlert :show="hasErrorMessage" variant="danger">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="loading" show variant="info">
+        <GAlert v-if="loading" show variant="info">
             <LoadingSpan message="Loading your workflow, this may take a while - please be patient." />
-        </BAlert>
+        </GAlert>
     </BForm>
 </template>
diff --git a/client/src/components/Workflow/Import/TrsIdImport.vue b/client/src/components/Workflow/Import/TrsIdImport.vue
index 3c33eed25ede..bbdd9ef7fe90 100644
--- a/client/src/components/Workflow/Import/TrsIdImport.vue
+++ b/client/src/components/Workflow/Import/TrsIdImport.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BFormGroup, BFormInput } from "bootstrap-vue";
+import { BFormGroup, BFormInput } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 
 import { Services } from "@/components/Workflow/services";
@@ -7,6 +7,7 @@ import { Toast } from "@/composables/toast";
 
 import type { TrsSelection, TrsTool as TrsToolInterface } from "./types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import TrsServerSelection from "@/components/Workflow/Import/TrsServerSelection.vue";
 import TrsTool from "@/components/Workflow/Import/TrsTool.vue";
@@ -144,9 +145,9 @@ defineExpose({ triggerImport });
                 @onTrsSelection="onTrsSelection" />
         </div>
 
-        <BAlert v-if="isAutoImport && !hasErrorMessage" show variant="info">
+        <GAlert v-if="isAutoImport && !hasErrorMessage" show variant="info">
             <LoadingSpan message="Loading your Workflow" />
-        </BAlert>
+        </GAlert>
         <div v-else>
             <div class="my-3">
                 <BFormGroup
@@ -157,13 +158,13 @@ defineExpose({ triggerImport });
                 </BFormGroup>
             </div>
             <div>
-                <BAlert v-if="loading" show variant="info">
+                <GAlert v-if="loading" show variant="info">
                     <LoadingSpan :message="`Loading ${toolIdTrimmed}, this may take a while - please be patient`" />
-                </BAlert>
+                </GAlert>
 
-                <BAlert :show="hasErrorMessage" variant="danger">
+                <GAlert :show="hasErrorMessage" variant="danger">
                     {{ errorMessage }}
-                </BAlert>
+                </GAlert>
             </div>
 
             <TrsTool v-if="trsTool" :trs-tool="trsTool" @onImport="onVersionSelected" @onSelect="onVersionSelected" />
diff --git a/client/src/components/Workflow/Import/TrsImport.vue b/client/src/components/Workflow/Import/TrsImport.vue
index e7ea3b555cdb..241c54f937a3 100644
--- a/client/src/components/Workflow/Import/TrsImport.vue
+++ b/client/src/components/Workflow/Import/TrsImport.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -10,6 +9,7 @@ import { useUserStore } from "@/stores/userStore";
 
 import type { TrsSelection } from "./types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import TrsIdImport from "@/components/Workflow/Import/TrsIdImport.vue";
 import TrsSearch from "@/components/Workflow/Import/TrsSearch.vue";
@@ -123,18 +123,18 @@ defineExpose({ attemptImport });
 
 <template>
     <div class="workflow-import-trs">
-        <BAlert v-if="isAnonymous" class="text-center my-2" show variant="danger">
+        <GAlert v-if="isAnonymous" class="text-center my-2" show variant="danger">
             Anonymous user cannot import workflows, please register or log in
-        </BAlert>
+        </GAlert>
 
         <div v-else>
-            <BAlert v-if="importing" show variant="info">
+            <GAlert v-if="importing" show variant="info">
                 <LoadingSpan message="Importing workflow" />
-            </BAlert>
+            </GAlert>
 
-            <BAlert v-if="errorMessage" show variant="danger">
+            <GAlert v-if="errorMessage" show variant="danger">
                 {{ errorMessage }}
-            </BAlert>
+            </GAlert>
 
             <div v-if="effectiveView === 'trsSearch'" style="min-height: 500px">
                 <TrsSearch ref="trsSearchRef" @input-valid="onChildValidation" />
diff --git a/client/src/components/Workflow/Import/TrsSearch.vue b/client/src/components/Workflow/Import/TrsSearch.vue
index 291cf30b2da3..1d982aed235d 100644
--- a/client/src/components/Workflow/Import/TrsSearch.vue
+++ b/client/src/components/Workflow/Import/TrsSearch.vue
@@ -2,7 +2,7 @@
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BAlert, BCard, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
+import { BCard, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -14,6 +14,7 @@ import { withPrefix } from "@/utils/redirect";
 
 import type { TrsSelection, TrsTool as TrsSearchData } from "./types";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GTable from "@/components/Common/GTable.vue";
 import HelpText from "@/components/Help/HelpText.vue";
@@ -158,9 +159,9 @@ defineExpose({ triggerImport });
 
 <template>
     <div class="container workflow-import-trs-search">
-        <BAlert :show="hasErrorMessage" variant="danger">
+        <GAlert :show="hasErrorMessage" variant="danger">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
 
         <div class="mb-3">
             <b>TRS Server:</b>
@@ -191,13 +192,13 @@ defineExpose({ triggerImport });
         </div>
 
         <div class="vertical-scroll">
-            <BAlert v-if="loading" variant="info" show>
+            <GAlert v-if="loading" variant="info" show>
                 <LoadingSpan :message="`Searching for ${query}, this may take a while - please be patient`" />
-            </BAlert>
-            <BAlert v-else-if="!query" variant="info" show> Enter search query to begin search. </BAlert>
-            <BAlert v-else-if="results.length == 0" variant="info" show>
+            </GAlert>
+            <GAlert v-else-if="!query" variant="info" show> Enter search query to begin search. </GAlert>
+            <GAlert v-else-if="results.length == 0" variant="info" show>
                 No search results found, refine your search.
-            </BAlert>
+            </GAlert>
             <GTable
                 v-else
                 :fields="fields"
@@ -209,9 +210,9 @@ defineExpose({ triggerImport });
                 @row-click="showRowDetails">
                 <template v-slot:row-details="{ item }">
                     <BCard>
-                        <BAlert v-if="importing" variant="info" show>
+                        <GAlert v-if="importing" variant="info" show>
                             <LoadingSpan message="Importing workflow" />
-                        </BAlert>
+                        </GAlert>
 
                         <TrsTool
                             :trs-tool="item.data"
diff --git a/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue b/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue
index d8f9dda27c78..415538feeb71 100644
--- a/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue
+++ b/client/src/components/Workflow/Invocation/Export/InvocationExportWizard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard, BCardGroup, BFormGroup, BFormInput } from "bootstrap-vue";
+import { BCard, BCardGroup, BFormGroup, BFormInput } from "bootstrap-vue";
 import { computed, onUnmounted, reactive, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -21,6 +21,7 @@ import { useShortTermStorageMonitor } from "@/composables/shortTermStorageMonito
 import { useTaskMonitor } from "@/composables/taskMonitor";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ExportFormatSelector from "@/components/Common/ExportFormatSelector.vue";
 import ExportIncludeOptions from "@/components/Common/ExportIncludeOptions.vue";
 import ExportRemoteSourceSelector from "@/components/Common/ExportRemoteSourceSelector.vue";
@@ -511,8 +512,8 @@ onUnmounted(() => {
                 </div>
             </div>
         </GenericWizard>
-        <BAlert v-if="errorMessage" show dismissible fade variant="danger" @dismissed="errorMessage = undefined">
+        <GAlert v-if="errorMessage" show dismissible fade variant="danger" @dismissed="errorMessage = undefined">
             {{ errorMessage }}
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index efe455086758..fbdd2514231f 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -2,7 +2,7 @@
 import { faArrowCircleLeft, faArrowCircleRight, faArrowDown, faEye, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { until } from "@vueuse/core";
-import { BAlert, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
+import { BCard, BCardBody, BCardHeader } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 
@@ -12,6 +12,7 @@ import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { useInvocationGraph } from "@/composables/useInvocationGraph";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -180,14 +181,14 @@ function toggleDetailedView() {
 
 <template>
     <div>
-        <BAlert v-if="initialLoading" show variant="info">
+        <GAlert v-if="initialLoading" show variant="info">
             <LoadingSpan message="Loading Invocation Graph" />
-        </BAlert>
+        </GAlert>
         <div v-else-if="errored">
-            <BAlert v-if="errorMessage" show variant="danger">
+            <GAlert v-if="errorMessage" show variant="danger">
                 {{ errorMessage }}
-            </BAlert>
-            <BAlert v-else show variant="danger"> Unknown Error </BAlert>
+            </GAlert>
+            <GAlert v-else show variant="danger"> Unknown Error </GAlert>
         </div>
         <div v-else-if="steps && datatypesMapper">
             <div class="d-flex">
@@ -288,7 +289,7 @@ function toggleDetailedView() {
                         expanded />
                 </BCardBody>
             </BCard>
-            <BAlert v-else class="mt-2" show>Click on a step in the workflow graph above to view its details.</BAlert>
+            <GAlert v-else class="mt-2" show>Click on a step in the workflow graph above to view its details.</GAlert>
         </div>
     </div>
 </template>
diff --git a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
index 8e4bb57b53f9..3c382abb969e 100644
--- a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
+++ b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faChevronDown, faChevronUp, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import type { StepJobSummary, WorkflowInvocationElementView } from "@/api/invocations";
@@ -12,6 +11,7 @@ import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { useToolStore } from "@/stores/toolStore";
 import { useWorkflowStore } from "@/stores/workflowStore";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
@@ -106,12 +106,12 @@ watch(
 </script>
 
 <template>
-    <BAlert v-if="loading || graphLoading" variant="info" show>
+    <GAlert v-if="loading || graphLoading" variant="info" show>
         <LoadingSpan message="Loading invocation steps" />
-    </BAlert>
-    <BAlert v-else-if="error" variant="danger" show>
+    </GAlert>
+    <GAlert v-else-if="error" variant="danger" show>
         {{ error }}
-    </BAlert>
+    </GAlert>
     <div v-else-if="graphSteps && workflow" class="steps-container">
         <div class="px-1 pt-1 pb-2">
             <DelayedInput placeholder="search steps" :delay="200" @change="(v) => (currentQuery = v)" />
@@ -153,9 +153,9 @@ watch(
             </div>
         </div>
 
-        <BAlert v-else variant="info" show> No steps match the search query. </BAlert>
+        <GAlert v-else variant="info" show> No steps match the search query. </GAlert>
     </div>
-    <BAlert v-else variant="info" show> There are no steps to display. </BAlert>
+    <GAlert v-else variant="info" show> There are no steps to display. </GAlert>
 </template>
 
 <style scoped lang="scss">
diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 7291f9a73a69..9c86d1be5559 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faStar, faTags, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BNav, BNavItem, BPagination } from "bootstrap-vue";
+import { BButton, BNav, BNavItem, BPagination } from "bootstrap-vue";
 import { faTrashRestore } from "font-awesome-6";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -20,6 +20,7 @@ import { useWorkflowCardActions } from "./useWorkflowCardActions";
 import type WorkflowCard from "./WorkflowCard.vue";
 
 import WorkflowCardList from "./WorkflowCardList.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import GOverlay from "@/components/BaseComponents/GOverlay.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
@@ -473,23 +474,23 @@ onMounted(() => {
         </div>
 
         <div v-if="loading" class="workflow-list-alert">
-            <BAlert variant="info" show>
+            <GAlert variant="info" show>
                 <LoadingSpan message="Loading workflows" />
-            </BAlert>
+            </GAlert>
         </div>
         <div v-else-if="!loading && !overlay && noItems" class="workflow-list-alert">
-            <BAlert id="workflow-list-empty" variant="info" show>
+            <GAlert id="workflow-list-empty" variant="info" show>
                 <span v-localize
                     >No workflows found. You may create or import new workflows using the buttons above.</span
                 >
-            </BAlert>
+            </GAlert>
         </div>
         <span v-else-if="!loading && !overlay && (noResults || hasInvalidFilters)" class="workflow-list-alert">
-            <BAlert v-if="!hasInvalidFilters" id="no-workflow-found" variant="info" show>
+            <GAlert v-if="!hasInvalidFilters" id="no-workflow-found" variant="info" show>
                 No workflows found matching: <span class="font-weight-bold">{{ filterText }}</span>
-            </BAlert>
+            </GAlert>
 
-            <BAlert v-else id="no-workflow-found-invalid" variant="danger" show>
+            <GAlert v-else id="no-workflow-found-invalid" variant="danger" show>
                 <Heading h4 inline size="sm" class="flex-grow-1 mb-2">Invalid filters in query:</Heading>
                 <ul>
                     <li v-for="[invalidKey, value] in Object.entries(invalidFilters)" :key="invalidKey">
@@ -505,7 +506,7 @@ onMounted(() => {
                     @click="filterText = `'${filterText}'`">
                     Match the exact query provided
                 </GLink>
-            </BAlert>
+            </GAlert>
         </span>
         <GOverlay v-else id="workflow-cards" :show="overlay" class="cards-list">
             <WorkflowCardList
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 94ee24488e18..9221aaa88a6c 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -2,7 +2,7 @@
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { until } from "@vueuse/core";
-import { BAlert, BCard } from "bootstrap-vue";
+import { BCard } from "bootstrap-vue";
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 
 import { getWorkflowInfo, type StoredWorkflowDetailed } from "@/api/workflows";
@@ -15,6 +15,7 @@ import { assertDefined } from "@/utils/assertions";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 import WorkflowInformation from "@/components/Workflow/Published/WorkflowInformation.vue";
@@ -127,9 +128,9 @@ defineExpose({
             <div v-else-if="hasError">
                 <Heading h1 separator size="lg"> Failed to load published Workflow </Heading>
 
-                <BAlert show variant="danger">
+                <GAlert show variant="danger">
                     {{ errorMessage }}
-                </BAlert>
+                </GAlert>
             </div>
             <div v-else-if="workflowInfo" class="published-workflow">
                 <div v-if="props.showHeading || props.showButtons" class="workflow-header">
diff --git a/client/src/components/Workflow/Run/WorkflowHelpDisplay.vue b/client/src/components/Workflow/Run/WorkflowHelpDisplay.vue
index 0332bf98580a..ee793b8a075d 100644
--- a/client/src/components/Workflow/Run/WorkflowHelpDisplay.vue
+++ b/client/src/components/Workflow/Run/WorkflowHelpDisplay.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { BAlert, BCard } from "bootstrap-vue";
+import { BCard } from "bootstrap-vue";
 
 import type { StoredWorkflowDetailed } from "@/api/workflows";
 import { useMarkdown } from "@/composables/markdown";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const props = defineProps<{
@@ -19,9 +20,9 @@ const { renderMarkdown } = useMarkdown({
 </script>
 
 <template>
-    <BAlert v-if="props.loading" variant="info" show>
+    <GAlert v-if="props.loading" variant="info" show>
         <LoadingSpan message="Loading workflow help" />
-    </BAlert>
+    </GAlert>
     <BCard v-else-if="props.workflow" class="mx-1 flex-grow-1 overflow-auto">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <p v-if="props.workflow.readme" class="container" v-html="renderMarkdown(props.workflow.readme)" />
diff --git a/client/src/components/Workflow/Run/WorkflowRun.vue b/client/src/components/Workflow/Run/WorkflowRun.vue
index 5b60ad6382fe..3c22d41a8150 100644
--- a/client/src/components/Workflow/Run/WorkflowRun.vue
+++ b/client/src/components/Workflow/Run/WorkflowRun.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BLink } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { RouterLink } from "vue-router";
 import { useRouter } from "vue-router/composables";
@@ -17,6 +17,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import { WorkflowRunModel } from "./model";
 import { getRunData } from "./services";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowRunForm from "@/components/Workflow/Run/WorkflowRunForm.vue";
 import WorkflowRunFormSimple from "@/components/Workflow/Run/WorkflowRunFormSimple.vue";
@@ -217,20 +218,20 @@ defineExpose({
 
 <template>
     <span>
-        <BAlert v-if="workflowError" variant="danger" show>
+        <GAlert v-if="workflowError" variant="danger" show>
             <h2 class="h-text">Workflow cannot be executed. Please resolve the following issue:</h2>
             {{ workflowError }}
-        </BAlert>
+        </GAlert>
         <span v-else>
-            <BAlert v-if="loading" variant="info" show>
+            <GAlert v-if="loading" variant="info" show>
                 <LoadingSpan message="Loading workflow run data" />
-            </BAlert>
+            </GAlert>
             <WorkflowRunSuccess
                 v-else-if="invocations.length > 0"
                 :invocations="invocations"
                 :workflow-name="workflowName" />
             <div v-else class="h-100">
-                <BAlert
+                <GAlert
                     v-if="hasUpgradeMessages || hasStepVersionChanges"
                     class="mb-4"
                     variant="warning"
@@ -243,16 +244,16 @@ defineExpose({
                     <RouterLink v-if="isOwner" :to="editorLink">click here to edit and review the issues</RouterLink>
                     <BLink v-else @click="onImport">click here to import the workflow and review the issues</BLink>
                     <span>before running this workflow.</span>
-                </BAlert>
+                </GAlert>
                 <div v-else class="h-100">
-                    <BAlert
+                    <GAlert
                         v-if="submissionError"
                         class="mb-4"
                         variant="danger"
                         data-description="workflow run error"
                         show>
                         Workflow submission failed: {{ submissionError }}
-                    </BAlert>
+                    </GAlert>
                     <WorkflowRunFormSimple
                         v-if="fromVariant === 'simple'"
                         :model="workflowModel"
diff --git a/client/src/components/Workflow/Run/WorkflowRunForm.vue b/client/src/components/Workflow/Run/WorkflowRunForm.vue
index 4f7113a3b280..cf09a946d1ef 100644
--- a/client/src/components/Workflow/Run/WorkflowRunForm.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunForm.vue
@@ -1,11 +1,11 @@
 <template>
     <div v-if="currentUser && currentHistoryId" class="workflow-expanded-form">
-        <BAlert v-if="!canRunOnHistory" variant="warning" show>
+        <GAlert v-if="!canRunOnHistory" variant="warning" show>
             <span v-localize>
                 The workflow cannot run because the current history is immutable. Please select a different history or
                 send the results to a new one.
             </span>
-        </BAlert>
+        </GAlert>
         <div class="h4 clearfix mb-3">
             <b>Workflow: {{ model.name }}</b> <i>(version: {{ model.runData.version + 1 }})</i>
             <div class="float-right d-flex flex-gapx-1">
@@ -28,7 +28,7 @@
             </div>
         </div>
 
-        <BAlert v-if="disableSimpleFormReason" show variant="warning">
+        <GAlert v-if="disableSimpleFormReason" show variant="warning">
             This is the legacy workflow run form.
             <span v-if="disableSimpleFormReason === 'hasReplacementParameters'">
                 This workflow contains parameters in tool steps that require advanced handling. The simplified form does
@@ -42,7 +42,7 @@
                 This workflow is configured with resource request parameters. The simplified form does not support
                 workflows with resource options.
             </span>
-        </BAlert>
+        </GAlert>
 
         <WorkflowCredentials v-if="credentialTools.length" :tool-identifiers="credentialTools" />
 
@@ -92,7 +92,6 @@
 </template>
 
 <script>
-import { BAlert } from "bootstrap-vue";
 import { mapState } from "pinia";
 
 import { useUserMultiToolCredentials } from "@/composables/userMultiToolCredentials";
@@ -105,6 +104,7 @@ import { invokeWorkflow } from "./services";
 
 import WorkflowRunDefaultStep from "./WorkflowRunDefaultStep.vue";
 import WorkflowRunInputStep from "./WorkflowRunInputStep.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ButtonSpinner from "@/components/Common/ButtonSpinner.vue";
 import FormCard from "@/components/Form/FormCard.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
@@ -114,7 +114,7 @@ import WorkflowCredentials from "@/components/Workflow/Run/WorkflowCredentials.v
 
 export default {
     components: {
-        BAlert,
+        GAlert,
         ButtonSpinner,
         FormDisplay,
         FormCard,
diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index 5468a4b2e1d7..ff0aa449aad6 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -2,7 +2,7 @@
 import { faReadme } from "@fortawesome/free-brands-svg-icons";
 import { faArrowRight, faCog, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BFormInput } from "bootstrap-vue";
+import { BFormInput } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onBeforeMount, ref, watch } from "vue";
 
@@ -34,6 +34,7 @@ import ExportOnCompleteWizard from "./ExportOnCompleteWizard.vue";
 import WorkflowHelpDisplay from "./WorkflowHelpDisplay.vue";
 import WorkflowRunGraph from "./WorkflowRunGraph.vue";
 import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 import GCheckbox from "@/components/BaseComponents/GCheckbox.vue";
@@ -565,12 +566,12 @@ onBeforeMount(() => {
         data-galaxy-file-drop-target>
         <div v-if="!showRightPanel" class="ui-form-header-underlay sticky-top" />
         <div v-if="isConfigLoaded" :class="{ 'sticky-top': !showRightPanel }">
-            <BAlert v-if="!canRunOnHistory" variant="warning" show>
+            <GAlert v-if="!canRunOnHistory" variant="warning" show>
                 <span v-localize>
                     The workflow cannot run because the current history is immutable. Please select a different history
                     or send the results to a new one using the run settings ⚙️
                 </span>
-            </BAlert>
+            </GAlert>
             <div class="mb-2">
                 <WorkflowNavigationTitle
                     :workflow-id="model.runData.workflow_id"
diff --git a/client/src/components/Workflow/Run/WorkflowRunGraph.vue b/client/src/components/Workflow/Run/WorkflowRunGraph.vue
index 511a9b694b89..dae8648269b6 100644
--- a/client/src/components/Workflow/Run/WorkflowRunGraph.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunGraph.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BCard } from "bootstrap-vue";
+import { BCard } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { ref, toRef } from "vue";
 
@@ -8,6 +8,7 @@ import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
@@ -47,12 +48,12 @@ try {
 </script>
 
 <template>
-    <BAlert v-if="errorMessage" variant="danger" show>
+    <GAlert v-if="errorMessage" variant="danger" show>
         {{ errorMessage }}
-    </BAlert>
-    <BAlert v-else-if="datatypesMapperLoading || loading" variant="info" show>
+    </GAlert>
+    <GAlert v-else-if="datatypesMapperLoading || loading" variant="info" show>
         <LoadingSpan message="Loading workflow" />
-    </BAlert>
+    </GAlert>
     <div v-else-if="datatypesMapper && !loading" class="d-flex flex-column">
         <Heading h2 separator bold size="sm"> Graph </Heading>
         <BCard class="workflow-preview mx-1 flex-grow-1">
@@ -67,7 +68,7 @@ try {
                 readonly />
         </BCard>
     </div>
-    <BAlert v-else variant="danger" show> Unable to load graph due to missing datatypes mapper. </BAlert>
+    <GAlert v-else variant="danger" show> Unable to load graph due to missing datatypes mapper. </GAlert>
 </template>
 
 <style scoped>
diff --git a/client/src/components/Workflow/StoredWorkflowInvocations.vue b/client/src/components/Workflow/StoredWorkflowInvocations.vue
index a628aba03288..1925acdba8d8 100644
--- a/client/src/components/Workflow/StoredWorkflowInvocations.vue
+++ b/client/src/components/Workflow/StoredWorkflowInvocations.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { onMounted, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -8,6 +7,7 @@ import { rethrowSimple } from "@/utils/simple-error";
 
 import GridInvocation from "../Grid/GridInvocation.vue";
 import LoadingSpan from "../LoadingSpan.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 interface Props {
     storedWorkflowId: string;
@@ -42,10 +42,10 @@ onMounted(async () => {
             id: workflow.id,
             name: workflow.name,
         }" />
-    <BAlert v-else-if="loading" variant="info" show>
+    <GAlert v-else-if="loading" variant="info" show>
         <LoadingSpan message="Loading invocations for workflow" />
-    </BAlert>
-    <BAlert v-else variant="danger" show>
+    </GAlert>
+    <GAlert v-else variant="danger" show>
         <p>Failed to load stored workflow with ID: {{ props.storedWorkflowId }}</p>
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/Workflow/WorkflowExport.vue b/client/src/components/Workflow/WorkflowExport.vue
index bd8430a0e7ef..b300d79cda74 100644
--- a/client/src/components/Workflow/WorkflowExport.vue
+++ b/client/src/components/Workflow/WorkflowExport.vue
@@ -12,10 +12,10 @@
                 </div>
                 <hr />
             </div>
-            <b-alert v-else variant="info" show>
+            <GAlert v-else variant="info" show>
                 This workflow is not accessible. Please use the sharing option to "Make Workflow Accessible and Publish"
                 to obtain a URL for importing to another Galaxy.
-            </b-alert>
+            </GAlert>
             <a :href="downloadUrl">Download Workflow</a>
             <div>
                 <small class="text-muted">
@@ -28,13 +28,13 @@
                 <small class="text-muted"> Download an image of the workflow in SVG format. </small>
             </div>
         </div>
-        <b-alert v-else-if="!!error" variant="danger" show>
+        <GAlert v-else-if="!!error" variant="danger" show>
             <span>
                 {{ error }}. Click
                 <router-link class="require-login-link" to="/login/start">here</router-link>
                 to login.
             </span>
-        </b-alert>
+        </GAlert>
         <LoadingSpan v-else message="Loading workflow" />
     </div>
 </template>
@@ -45,12 +45,14 @@ import Vue from "vue";
 import { withPrefix } from "@/utils/redirect";
 import { urlData } from "@/utils/url";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GAlert,
         LoadingSpan,
     },
     props: {
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.test.ts b/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
index 68eef8bf076c..5b7b9dc2421e 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.test.ts
@@ -30,7 +30,7 @@ const SELECTORS = {
     IMPORT_WORKFLOW_BUTTON: "[data-description='import workflow button']",
     EXECUTE_WORKFLOW_BUTTON: "[data-description='execute workflow button']",
     ROUTE_TO_RERUN_BUTTON: "[data-button-rerun][title='Rerun Workflow with same inputs']",
-    ALERT_MESSAGE: "balert-stub",
+    ALERT_MESSAGE: "galert-stub",
 };
 
 // Mock the copyWorkflow function for importing a workflow
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index 5613cd556054..f11f8583eabc 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faEdit, faPlay, faRedo, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { RouterLink } from "vue-router";
@@ -24,6 +23,7 @@ import AsyncButton from "../Common/AsyncButton.vue";
 import ButtonSpinner from "../Common/ButtonSpinner.vue";
 import NavigationTitle from "../Common/NavigationTitle.vue";
 import LoadingSpan from "../LoadingSpan.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const router = useRouter();
 
@@ -127,18 +127,18 @@ async function rerunWorkflow() {
 
 <template>
     <div>
-        <BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
+        <GAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
             {{ importErrorMessage }}
-        </BAlert>
-        <BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
+        </GAlert>
+        <GAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
             <span>
                 Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
             </span>
             <RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
             list.
-        </BAlert>
+        </GAlert>
 
-        <BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>
+        <GAlert v-if="error" variant="danger" show>{{ error }}</GAlert>
 
         <div class="position-relative">
             <NavigationTitle
@@ -230,9 +230,9 @@ async function rerunWorkflow() {
                 Successfully invoked workflow
                 <b>{{ getWorkflowName() }}</b>
             </div>
-            <BAlert v-else-if="loading" variant="info" show>
+            <GAlert v-else-if="loading" variant="info" show>
                 <LoadingSpan message="Loading workflow details" />
-            </BAlert>
+            </GAlert>
         </div>
     </div>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/JobStep.vue b/client/src/components/WorkflowInvocationState/JobStep.vue
index 111ab21b8281..8d1daf797a96 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.vue
+++ b/client/src/components/WorkflowInvocationState/JobStep.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BPagination } from "bootstrap-vue";
+import { BPagination } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import type { JobBaseModel, JobState } from "@/api/jobs";
@@ -9,6 +9,7 @@ import GButton from "../BaseComponents/GButton.vue";
 import JobDetailsDisplayed from "../JobInformation/JobDetails.vue";
 import InvocationStepStateDisplay from "./InvocationStepStateDisplay.vue";
 import JobStepJobs from "./JobStepJobs.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const PER_PAGE = 10;
 
@@ -70,7 +71,7 @@ watch(
 </script>
 
 <template>
-    <BAlert v-if="!jobCount" variant="info" show> No jobs found for this step. </BAlert>
+    <GAlert v-if="!jobCount" variant="info" show> No jobs found for this step. </GAlert>
     <div v-else-if="jobCount === 1 && firstJob">
         <JobDetailsDisplayed :job-id="firstJob.id" :invocation-id="props.invocationId" />
     </div>
@@ -100,7 +101,7 @@ watch(
             </div>
         </div>
 
-        <BAlert v-if="!currentState" variant="info" show> Please select a job state to view jobs. </BAlert>
+        <GAlert v-if="!currentState" variant="info" show> Please select a job state to view jobs. </GAlert>
         <JobStepJobs
             v-else
             :jobs="currentStateJobs"
diff --git a/client/src/components/WorkflowInvocationState/SubworkflowAlert.vue b/client/src/components/WorkflowInvocationState/SubworkflowAlert.vue
index 88dfcac78f4d..f6996ab20195 100644
--- a/client/src/components/WorkflowInvocationState/SubworkflowAlert.vue
+++ b/client/src/components/WorkflowInvocationState/SubworkflowAlert.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
-
 import type { InvocationState } from "@/api/invocations";
 import { withPrefix } from "@/utils/redirect";
 
 import ExternalLink from "../ExternalLink.vue";
 import HelpText from "../Help/HelpText.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = defineProps<{
     invocationId: string;
@@ -14,12 +13,12 @@ const props = defineProps<{
 </script>
 
 <template>
-    <BAlert variant="secondary" show>
+    <GAlert variant="secondary" show>
         <span v-if="props.state">
             This subworkflow is
             <HelpText :uri="`galaxy.invocations.states.${props.state}`" :text="props.state" />.
         </span>
         <ExternalLink :href="withPrefix(`/workflows/invocations/${props.invocationId}`)"> Click here </ExternalLink>
         to view this subworkflow in graph view.
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/TabsDisabledAlert.vue b/client/src/components/WorkflowInvocationState/TabsDisabledAlert.vue
index 1c47a1a3783e..3fe3a826cea5 100644
--- a/client/src/components/WorkflowInvocationState/TabsDisabledAlert.vue
+++ b/client/src/components/WorkflowInvocationState/TabsDisabledAlert.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
-
 import GLink from "../BaseComponents/GLink.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 
 const props = defineProps<{
     invocationId: string;
@@ -10,10 +9,10 @@ const props = defineProps<{
 </script>
 
 <template>
-    <BAlert variant="info" show>
+    <GAlert variant="info" show>
         <span v-localize>{{ props.tooltip }}</span>
         View the invocation
         <GLink :to="`/workflows/invocations/${props.invocationId}`">Overview</GLink>
         instead.
-    </BAlert>
+    </GAlert>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue
index aa0122ab7604..a215a5f853f2 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
@@ -10,6 +9,7 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 import Heading from "../Common/Heading.vue";
 import LoadingSpan from "../LoadingSpan.vue";
 import WorkflowInvocationInputs from "./WorkflowInvocationInputs.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GenericHistoryItem from "@/components/History/Content/GenericItem.vue";
 
 const OUTPUTS_NOT_AVAILABLE_YET_MSG =
@@ -68,7 +68,7 @@ const parameters = computed(() => Object.values(props.invocation.input_step_para
         <div v-if="parameters.length || inputData.length">
             <WorkflowInvocationInputs :invocation="props.invocation" />
         </div>
-        <BAlert v-else show variant="info"> No input data was provided for this workflow invocation. </BAlert>
+        <GAlert v-else show variant="info"> No input data was provided for this workflow invocation. </GAlert>
     </div>
     <div v-else-if="props.tab === 'outputs'">
         <div v-if="outputs.length">
@@ -86,20 +86,20 @@ const parameters = computed(() => Object.values(props.invocation.input_step_para
                 :key="index"
                 data-description="non-terminal invocation output">
                 <Heading size="text" bold separator>{{ label }}</Heading>
-                <BAlert
+                <GAlert
                     v-if="!props.terminal"
                     class="m-1 py-2"
                     show
                     variant="info"
                     data-description="non-terminal invocation output loading">
                     <LoadingSpan message="Output not created yet" />
-                </BAlert>
-                <BAlert v-else class="m-1 py-2" show variant="danger">
+                </GAlert>
+                <GAlert v-else class="m-1 py-2" show variant="danger">
                     <LoadingSpan message="Output not available" />
-                </BAlert>
+                </GAlert>
             </div>
         </div>
-        <BAlert v-else show variant="info">
+        <GAlert v-else show variant="info">
             <p>
                 <LoadingSpan v-if="!props.terminal" :message="OUTPUTS_NOT_AVAILABLE_YET_MSG" />
                 <span v-else v-localize>
@@ -113,6 +113,6 @@ const parameters = computed(() => Object.values(props.invocation.input_step_para
                 </i>
                 option on individual outputs on individual steps in the workflow.
             </p>
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 6205b922bc0a..edd554ee20ff 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BButtonGroup, BCol, BContainer, BDropdown, BDropdownItem, BRow } from "bootstrap-vue";
+import { BButtonGroup, BCol, BContainer, BDropdown, BDropdownItem, BRow } from "bootstrap-vue";
 import type { VisualizationSpec } from "vega-embed";
 import type { ComputedRef } from "vue";
 import { computed, ref, watch } from "vue";
@@ -10,6 +10,7 @@ import { useInvocationStore } from "@/stores/invocationStore";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
 import LoadingSpan from "../LoadingSpan.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
 const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
@@ -401,9 +402,9 @@ const groupByInTitles = computed(() => {
 
 <template>
     <div>
-        <BAlert v-if="props.notTerminal" variant="warning" show>
+        <GAlert v-if="props.notTerminal" variant="warning" show>
             <LoadingSpan message="Metrics will update and change as the workflow progresses." />
-        </BAlert>
+        </GAlert>
         <BContainer>
             <BRow align-h="end" class="mb-2">
                 <BButtonGroup>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
index b88a5b441c1a..4a6d6ad3dbc4 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.test.js
@@ -17,7 +17,7 @@ const workflowData = {
     version: 0,
 };
 const selectors = {
-    bAlertStub: "balert-stub",
+    gAlertStub: "galert-stub",
 };
 const alertMessages = {
     unOwned: "Workflow is neither importable, nor owned by or shared with current user",
@@ -72,14 +72,14 @@ describe("WorkflowInvocationOverview.vue for a valid/invalid workflow", () => {
     it("displays an alert for an unowned workflow", async () => {
         const wrapper = await loadWrapper({ ...invocationData, workflow_id: "unowned-workflow" });
         expect(wrapper.find("[data-description='workflow invocation graph']").exists()).toBeFalsy();
-        const alert = wrapper.find(selectors.bAlertStub);
+        const alert = wrapper.find(selectors.gAlertStub);
         expect(alert.text()).toContain(alertMessages.unOwned);
     });
 
     it("displays an alert for a nonexistant workflow", async () => {
         const wrapper = await loadWrapper({ ...invocationData, workflow_id: "nonexistant-workflow" });
         expect(wrapper.find("[data-description='workflow invocation graph']").exists()).toBeFalsy();
-        const alert = wrapper.find(selectors.bAlertStub);
+        const alert = wrapper.find(selectors.gAlertStub);
         expect(alert.text()).toContain(alertMessages.nonExistent);
     });
 });
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
index d4d4cd7767e0..a55e8ed849de 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, nextTick, ref } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -11,6 +10,7 @@ import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import InvocationGraph from "../Workflow/Invocation/Graph/InvocationGraph.vue";
 import SubworkflowAlert from "./SubworkflowAlert.vue";
 import WorkflowInvocationError from "./WorkflowInvocationError.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
@@ -66,12 +66,12 @@ function showSubworkflowInvocation(invocationId: string, stepId: number) {
                 @view-subworkflow-invocation="showSubworkflowInvocation" />
         </div>
         <!-- Once the workflow for the invocation and step job summaries are loaded, display the graph -->
-        <BAlert v-if="loading || !props.stepsJobsSummary" variant="info" show>
+        <GAlert v-if="loading || !props.stepsJobsSummary" variant="info" show>
             <LoadingSpan message="Loading workflow..." />
-        </BAlert>
-        <BAlert v-else-if="error" variant="danger" show>
+        </GAlert>
+        <GAlert v-else-if="error" variant="danger" show>
             {{ error }}
-        </BAlert>
+        </GAlert>
         <div v-else-if="workflow && !isSubworkflow">
             <InvocationGraph
                 ref="invocationGraph"
@@ -84,6 +84,6 @@ function showSubworkflowInvocation(invocationId: string, stepId: number) {
                 :is-full-page="isFullPage"
                 :show-minimap="isFullPage" />
         </div>
-        <BAlert v-else-if="!workflow" variant="info" show> No workflow found for this invocation. </BAlert>
+        <GAlert v-else-if="!workflow" variant="info" show> No workflow found for this invocation. </GAlert>
     </div>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationShare.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationShare.vue
index bc3d9e4a6981..48a985a79c37 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationShare.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationShare.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -15,6 +14,7 @@ import localize from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import LoadingSpan from "../LoadingSpan.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 
@@ -120,9 +120,9 @@ function shareInvocationButtonClicked() {
             size="small"
             data-description="share invocation modal"
             @ok="makeInvocationShareable">
-            <BAlert v-if="error" variant="danger" show>
+            <GAlert v-if="error" variant="danger" show>
                 {{ error }}
-            </BAlert>
+            </GAlert>
 
             <LoadingSpan v-else-if="loading" message="Loading details for invocation" />
 
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
index 676311342b43..26d2a73baec5 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
@@ -18,7 +18,7 @@ vi.mock("vue-router/composables", () => ({
 
 const selectors = {
     invocationSummary: ".invocation-overview",
-    bAlertStub: "balert-stub",
+    gAlertStub: "galert-stub",
     spanElement: "span",
     invocationDebugTab: ".invocation-debug-tab",
     invocationReportTab: ".invocation-report-tab",
@@ -192,7 +192,7 @@ describe("WorkflowInvocationState check invocation and job terminal states", ()
         assertJobsSummaryFetched(0);
 
         // expect there to be an alert for the missing invocation
-        const alert = wrapper.find(selectors.bAlertStub);
+        const alert = wrapper.find(selectors.gAlertStub);
         expect(alert.attributes("variant")).toBe("info");
         const span = alert.find(selectors.spanElement);
         expect(span.text()).toBe("Invocation not found.");
@@ -234,7 +234,7 @@ describe("WorkflowInvocationState check invocation and job terminal states", ()
         assertJobsSummaryFetched(0);
 
         // expect there to be an alert for the handled error
-        const alert = wrapper.find(selectors.bAlertStub);
+        const alert = wrapper.find(selectors.gAlertStub);
         expect(alert.attributes("variant")).toBe("danger");
         expect(alert.text()).toBe("User does not own specified item.");
     });
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index b44a54604f81..620b275b1a41 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faExclamation, faSpinner, faSquare, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BBadge, BNav, BNavItem } from "bootstrap-vue";
+import { BBadge, BNav, BNavItem } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 import { useRoute } from "vue-router/composables";
 
@@ -35,6 +35,7 @@ import WorkflowInvocationMetrics from "./WorkflowInvocationMetrics.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
 import WorkflowInvocationSearch from "./WorkflowInvocationSearch.vue";
 import WorkflowInvocationShare from "./WorkflowInvocationShare.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 type InvocationViewTab = "steps" | "inputs" | "outputs" | "report" | "reports" | "export" | "metrics" | "debug";
@@ -474,9 +475,9 @@ async function onCancel() {
                     :invocation-messages="uniqueMessages" />
             </div>
             <div v-if="props.tab === 'steps'" class="steps-tab-content">
-                <BAlert v-if="isSubworkflow" variant="info" show>
+                <GAlert v-if="isSubworkflow" variant="info" show>
                     <span v-localize>Subworkflow steps are not available.</span>
-                </BAlert>
+                </GAlert>
                 <WorkflowInvocationSteps
                     v-else-if="invocation && stepsJobsSummary"
                     :invocation="invocation"
@@ -489,9 +490,9 @@ async function onCancel() {
                 :terminal="invocationAndJobTerminal"
                 :tab="props.tab" />
             <div v-if="props.tab === 'report' || props.tab === 'reports'" class="steps-tab-content">
-                <BAlert v-if="isSubworkflow" variant="info" show>
+                <GAlert v-if="isSubworkflow" variant="info" show>
                     <span v-localize>Report is not available for subworkflow.</span>
-                </BAlert>
+                </GAlert>
                 <TabsDisabledAlert
                     v-else-if="tabsDisabled"
                     :invocation-id="props.invocationId"
@@ -521,9 +522,9 @@ async function onCancel() {
                 <WorkflowInvocationMetrics :invocation-id="invocation.id" :not-terminal="!invocationAndJobTerminal" />
             </div>
             <div v-if="props.tab === 'debug'">
-                <BAlert v-if="!canSubmitFeedback || !stepsJobsSummary" variant="info" show>
+                <GAlert v-if="!canSubmitFeedback || !stepsJobsSummary" variant="info" show>
                     <span v-localize>Debug information is not available.</span>
-                </BAlert>
+                </GAlert>
                 <WorkflowInvocationFeedback
                     v-else
                     :invocation-id="invocation.id"
@@ -533,18 +534,18 @@ async function onCancel() {
             </div>
         </div>
     </div>
-    <BAlert v-else-if="errorMessage" variant="danger" show>
+    <GAlert v-else-if="errorMessage" variant="danger" show>
         {{ errorMessage }}
-    </BAlert>
-    <BAlert v-else-if="!invocationLoaded" variant="info" show>
+    </GAlert>
+    <GAlert v-else-if="!invocationLoaded" variant="info" show>
         <LoadingSpan message="Loading invocation" />
-    </BAlert>
-    <BAlert v-else-if="invocationStore.getInvocationLoadError(props.invocationId)" variant="danger" show>
+    </GAlert>
+    <GAlert v-else-if="invocationStore.getInvocationLoadError(props.invocationId)" variant="danger" show>
         {{ invocationStore.getInvocationLoadError(props.invocationId) }}
-    </BAlert>
-    <BAlert v-else variant="info" show>
+    </GAlert>
+    <GAlert v-else variant="info" show>
         <span v-localize>Invocation not found.</span>
-    </BAlert>
+    </GAlert>
 </template>
 
 <style lang="scss">
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index a5eba710a3ac..8f6c00d51714 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -3,7 +3,6 @@ import { faTimesCircle } from "@fortawesome/free-regular-svg-icons";
 import { faInfoCircle, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BAlert } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
@@ -19,6 +18,7 @@ import ParameterStep from "./ParameterStep.vue";
 import SubworkflowAlert from "./SubworkflowAlert.vue";
 import WorkflowInvocationStepHeader from "./WorkflowInvocationStepHeader.vue";
 import WorkflowStepTitle from "./WorkflowStepTitle.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTab from "@/components/BaseComponents/GTab.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
 import GenericHistoryItem from "@/components/History/Content/GenericItem.vue";
@@ -228,11 +228,11 @@ onUnmounted(() => {
 
                 <div v-if="isReady && invocationStepId !== undefined">
                     <div style="min-width: 1">
-                        <BAlert v-if="loading" variant="info" show>
+                        <GAlert v-if="loading" variant="info" show>
                             <LoadingSpan message="Loading invocation step details" />
-                        </BAlert>
+                        </GAlert>
 
-                        <BAlert v-else-if="!stepDetails" variant="info" show> Unable to load step details. </BAlert>
+                        <GAlert v-else-if="!stepDetails" variant="info" show> Unable to load step details. </GAlert>
 
                         <div v-else>
                             <ParameterStep
@@ -283,7 +283,7 @@ onUnmounted(() => {
                                                 class="mt-1"
                                                 :jobs="stepDetails.jobs"
                                                 :invocation-id="props.invocation.id" />
-                                            <BAlert v-else v-localize variant="info" show>This step has no jobs</BAlert>
+                                            <GAlert v-else v-localize variant="info" show>This step has no jobs</GAlert>
                                         </div>
                                     </GTab>
 
@@ -324,9 +324,9 @@ onUnmounted(() => {
                                             <FontAwesomeIcon :icon="faWrench" />
                                             <span v-localize>Step Config</span>
                                         </template>
-                                        <BAlert v-if="loadingStepConfig" show>
+                                        <GAlert v-if="loadingStepConfig" show>
                                             <LoadingSpan message="Loading step configuration" />
-                                        </BAlert>
+                                        </GAlert>
                                         <fieldset v-else-if="activeStepWithConfig" disabled>
                                             <FormTool
                                                 v-if="workflowStepType === 'tool'"
diff --git a/client/src/components/admin/BaseList.vue b/client/src/components/admin/BaseList.vue
index b18e4f7a377f..ce5c8c7c2fe2 100644
--- a/client/src/components/admin/BaseList.vue
+++ b/client/src/components/admin/BaseList.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <BAlert :show="messageVisible" :variant="messageVariant"> {{ messageText }} </BAlert>
+        <GAlert :show="messageVisible" :variant="messageVariant"> {{ messageText }} </GAlert>
 
         <div v-if="itemsVisible" class="card-header">
             There are {{ itemsLength }}
@@ -39,14 +39,13 @@
 </template>
 
 <script>
-import { BAlert } from "bootstrap-vue";
-
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 export default {
     components: {
-        BAlert,
+        GAlert,
         GButton,
         GTable,
     },
diff --git a/client/src/components/admin/ErrorStack.vue b/client/src/components/admin/ErrorStack.vue
index 49d2a6403154..7d4ba00e665c 100644
--- a/client/src/components/admin/ErrorStack.vue
+++ b/client/src/components/admin/ErrorStack.vue
@@ -1,23 +1,22 @@
 <template>
     <div>
-        <BAlert :show="messageVisible" variant="danger"> {{ messageText }} </BAlert>
+        <GAlert :show="messageVisible" variant="danger"> {{ messageText }} </GAlert>
 
-        <BAlert :show="infoVisible" variant="info"> No errors available. </BAlert>
+        <GAlert :show="infoVisible" variant="info"> No errors available. </GAlert>
 
         <GTable v-if="errorStackVisible" striped :fields="errorStackAttributes" :items="errorStack" />
     </div>
 </template>
 
 <script>
-import { BAlert } from "bootstrap-vue";
-
 import { getErrorStack } from "./AdminServices";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 export default {
     components: {
-        BAlert,
+        GAlert,
         GTable,
     },
     data() {
diff --git a/client/src/components/admin/GroupForm.vue b/client/src/components/admin/GroupForm.vue
index 9d2785c3a7df..a2deccc9594c 100644
--- a/client/src/components/admin/GroupForm.vue
+++ b/client/src/components/admin/GroupForm.vue
@@ -3,7 +3,7 @@ import "vue-multiselect/dist/vue-multiselect.min.css";
 
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormCheckbox } from "bootstrap-vue";
+import { BButton, BFormCheckbox } from "bootstrap-vue";
 import { ref } from "vue";
 import Multiselect from "vue-multiselect";
 import { useRouter } from "vue-router/composables";
@@ -11,6 +11,7 @@ import { useRouter } from "vue-router/composables";
 import { GalaxyApi } from "@/api";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FormInput from "@/components/Form/Elements/FormInput.vue";
 import FormCard from "@/components/Form/FormCard.vue";
 import FormElementLabel from "@/components/Form/FormElementLabel.vue";
@@ -174,7 +175,7 @@ loadGroupData();
     <div>
         <LoadingSpan v-if="loading" />
         <div v-else>
-            <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
+            <GAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
             <FormCard :title="isEditMode ? `Group '${groupName}'` : 'Create a new Group'" icon="fa-users">
                 <template v-slot:body>
                     <FormElementLabel title="Name" :required="!isEditMode" :condition="!!groupName">
diff --git a/client/src/components/admin/JobsList.vue b/client/src/components/admin/JobsList.vue
index 803844b666e0..2994739128f6 100644
--- a/client/src/components/admin/JobsList.vue
+++ b/client/src/components/admin/JobsList.vue
@@ -1,9 +1,9 @@
 <template>
     <div aria-labelledby="jobs-title">
         <h1 id="jobs-title" class="h-lg">Jobs</h1>
-        <b-alert v-if="message" :variant="status" show>
+        <GAlert v-if="message" :variant="status" show>
             {{ message }}
-        </b-alert>
+        </GAlert>
         <Heading h2 size="md" separator>Job Lock</Heading>
         <JobLock />
         <Heading h2 size="md" separator>Job Overview</Heading>
@@ -180,11 +180,18 @@ import { commonJobFields } from "./JobFields";
 
 import JobLock from "./JobLock.vue";
 import JobsTable from "@/components/admin/JobsTable.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 
 export default {
-    components: { FilterMenu, JobLock, JobsTable, Heading },
+    components: {
+        GAlert,
+        FilterMenu,
+        JobLock,
+        JobsTable,
+        Heading,
+    },
     setup() {
         const filter = ref("");
         const showAdvanced = ref(false);
diff --git a/client/src/components/admin/JobsTable.vue b/client/src/components/admin/JobsTable.vue
index 2d13ff66585f..93c01638e1b9 100644
--- a/client/src/components/admin/JobsTable.vue
+++ b/client/src/components/admin/JobsTable.vue
@@ -20,9 +20,9 @@
 
             <template v-slot:empty>
                 <LoadingSpan v-if="loading" message="Loading jobs" />
-                <BAlert v-else-if="!items || items.length === 0" class="no-jobs" variant="info" show>
+                <GAlert v-else-if="!items || items.length === 0" class="no-jobs" variant="info" show>
                     {{ noItemsMessage }}
-                </BAlert>
+                </GAlert>
             </template>
 
             <template v-slot:cell(update_time)="data">
@@ -83,8 +83,9 @@
 </template>
 
 <script>
-import { BAlert, BCard } from "bootstrap-vue";
+import { BCard } from "bootstrap-vue";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import GTable from "@/components/Common/GTable.vue";
 import JobDetails from "@/components/JobInformation/JobDetails.vue";
@@ -93,7 +94,7 @@ import UtcDate from "@/components/UtcDate.vue";
 
 export default {
     components: {
-        BAlert,
+        GAlert,
         BCard,
         GLink,
         GTable,
diff --git a/client/src/components/admin/Notifications/BroadcastForm.vue b/client/src/components/admin/Notifications/BroadcastForm.vue
index 96bcb9ba6385..efcc8a318473 100644
--- a/client/src/components/admin/Notifications/BroadcastForm.vue
+++ b/client/src/components/admin/Notifications/BroadcastForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faPlus, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BCol, BFormGroup, BFormInput, BRow } from "bootstrap-vue";
+import { BCol, BFormGroup, BFormInput, BRow } from "bootstrap-vue";
 import Vue, { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -10,6 +10,7 @@ import { createBroadcast, updateBroadcast } from "@/api/notifications.broadcast"
 import { Toast } from "@/composables/toast";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -149,15 +150,15 @@ if (props.id) {
     <div>
         <Heading h1 separator inline class="flex-grow-1"> {{ title }} </Heading>
 
-        <BAlert v-if="loading" show>
+        <GAlert v-if="loading" show>
             <LoadingSpan message="Loading broadcast" />
-        </BAlert>
+        </GAlert>
 
         <div v-else>
-            <BAlert v-if="props.id && broadcastPublished" id="broadcast-published-warning" variant="warning" show>
+            <GAlert v-if="props.id && broadcastPublished" id="broadcast-published-warning" variant="warning" show>
                 This broadcast has already been published. Some users may have already seen it and changing it now will
                 not affect them.
-            </BAlert>
+            </GAlert>
 
             <FormElement
                 id="broadcast-subject"
diff --git a/client/src/components/admin/Notifications/NotificationForm.vue b/client/src/components/admin/Notifications/NotificationForm.vue
index a0d1dcd0e097..753597641821 100644
--- a/client/src/components/admin/Notifications/NotificationForm.vue
+++ b/client/src/components/admin/Notifications/NotificationForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faInbox, faInfoCircle, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BCol, BFormGroup, BRow } from "bootstrap-vue";
+import { BCol, BFormGroup, BRow } from "bootstrap-vue";
 import { computed, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -11,6 +11,7 @@ import { useMarkdown } from "@/composables/markdown";
 import { Toast } from "@/composables/toast";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import GCard from "@/components/Common/GCard.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -146,9 +147,9 @@ async function sendNewNotification() {
     <div>
         <Heading h1 separator inline class="flex-grow-1"> New Notification </Heading>
 
-        <BAlert v-if="loading" show>
+        <GAlert v-if="loading" show>
             <LoadingSpan message="Loading notification" />
-        </BAlert>
+        </GAlert>
 
         <div v-else>
             <FormElement
@@ -185,12 +186,12 @@ async function sendNewNotification() {
                     ['Urgent', 'urgent'],
                 ]" />
 
-            <BAlert :show="isUrgent" variant="warning">
+            <GAlert :show="isUrgent" variant="warning">
                 <span v-localize>
                     Urgent notifications will ignore the user's notification preferences and will be sent to all
                     available channels. Please use this option sparingly and only for critical notifications.
                 </span>
-            </BAlert>
+            </GAlert>
 
             <FormElement
                 id="notification-recipients-user-ids"
@@ -262,13 +263,13 @@ async function sendNewNotification() {
                 </template>
             </GCard>
 
-            <BAlert show variant="info">
+            <GAlert show variant="info">
                 <FontAwesomeIcon class="mr-2" :icon="faInfoCircle" />
                 <span v-localize>
                     Once you send the notification, it will be sent to all the recipients and cannot be edited or
                     deleted.
                 </span>
-            </BAlert>
+            </GAlert>
 
             <BRow class="m-2" align-h="center">
                 <AsyncButton
diff --git a/client/src/components/admin/Notifications/NotificationsManagement.vue b/client/src/components/admin/Notifications/NotificationsManagement.vue
index a22a333e33e9..f4971f5f0a06 100644
--- a/client/src/components/admin/Notifications/NotificationsManagement.vue
+++ b/client/src/components/admin/Notifications/NotificationsManagement.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
 import { useRouter } from "vue-router/composables";
 
 import { useConfig } from "@/composables/config";
 
 import BroadcastsList from "@/components/admin/Notifications/BroadcastsList.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import Heading from "@/components/Common/Heading.vue";
 
@@ -53,9 +53,9 @@ function goToCreateNewBroadcast() {
 
             <BroadcastsList class="mt-2" />
         </div>
-        <BAlert v-else variant="warning" show>
+        <GAlert v-else variant="warning" show>
             The notification system is disabled. To enable it, set the
             <code>enable_notification_system</code> option to <code>true</code> in the Galaxy configuration file.
-        </BAlert>
+        </GAlert>
     </div>
 </template>
diff --git a/client/src/components/admin/RoleForm.test.js b/client/src/components/admin/RoleForm.test.js
index 51f4e8561906..002b88a6f3b8 100644
--- a/client/src/components/admin/RoleForm.test.js
+++ b/client/src/components/admin/RoleForm.test.js
@@ -33,7 +33,6 @@ function mountTarget() {
             FontAwesomeIcon: true,
             FormSelection: true,
             BButton: true,
-            BAlert: true,
         },
         directives: {
             localize: () => {},
@@ -53,7 +52,7 @@ describe("RoleForm.vue", () => {
         server.use(http.get("/api/groups", ({ response }) => response(500).json({ err_msg: "Groups failed" })));
         const wrapper = mountTarget();
         await flushPromises();
-        const alert = wrapper.findComponent({ name: "BAlert" });
+        const alert = wrapper.find(".alert");
         expect(alert.exists()).toBe(true);
         expect(alert.text()).toContain("Groups failed");
     });
@@ -63,7 +62,7 @@ describe("RoleForm.vue", () => {
         server.use(http.get("/api/roles", ({ response }) => response(500).json({ err_msg: "Roles failed" })));
         const wrapper = mountTarget();
         await flushPromises();
-        const alert = wrapper.findComponent({ name: "BAlert" });
+        const alert = wrapper.find(".alert");
         expect(alert.exists()).toBe(true);
         expect(alert.text()).toContain("Roles failed");
     });
@@ -75,7 +74,7 @@ describe("RoleForm.vue", () => {
         await flushPromises();
         await wrapper.find("#role-submit").trigger("click");
         await flushPromises();
-        const alert = wrapper.findComponent({ name: "BAlert" });
+        const alert = wrapper.find(".alert");
         expect(alert.exists()).toBe(true);
         expect(alert.text()).toContain("Please complete all required inputs.");
     });
@@ -114,7 +113,7 @@ describe("RoleForm.vue", () => {
         await wrapper.find("#role-description").setValue("Bad Description");
         await wrapper.find("#role-submit").trigger("click");
         await flushPromises();
-        const alert = wrapper.findComponent({ name: "BAlert" });
+        const alert = wrapper.find(".alert");
         expect(alert.exists()).toBe(true);
         expect(alert.text()).toContain("Failed to create role");
     });
diff --git a/client/src/components/admin/RoleForm.vue b/client/src/components/admin/RoleForm.vue
index 987fd85ee09b..b29804a270c5 100644
--- a/client/src/components/admin/RoleForm.vue
+++ b/client/src/components/admin/RoleForm.vue
@@ -2,7 +2,7 @@
     <div>
         <LoadingSpan v-if="loading" />
         <div v-else>
-            <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
+            <GAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</GAlert>
             <FormCard title="Create a new Role" icon="fa-file-contract">
                 <template v-slot:body>
                     <FormElementLabel title="Name" :required="true" :condition="!!name">
@@ -43,12 +43,13 @@
 <script setup lang="ts">
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { GalaxyApi } from "@/api";
 
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import FormInput from "@/components/Form/Elements/FormInput.vue";
 import FormSelection from "@/components/Form/Elements/FormSelection.vue";
 import FormCard from "@/components/Form/FormCard.vue";