Close button style is broken with Bootstrap 5.

[VinVinMa]

Hi,

As a breaking change in Bootstrap 5. The 'x' will not be rendered as button and displayed at the wrong side.

https://getbootstrap.com/docs/5.0/migration/#close-button

Cheers,

Vincent

[chadly]

I don't really use this library anymore and don't have the energy to put development time into it.

I'm happy to merge a PR to fix issues like this though, if you are willing to fix it.

[BudgieInWA]

The change is relatively simple, but would break compatibility with earlier versions of Bootstrap.

@chadly do you have a preferred mechanism for supporting both Bootstrap flavours? Different component names? Different import paths? New major version on NPM (with the idea of maintaining both major versions). New npm package react-bs5-notifier built from the same repo, or a fork?

[chadly]

definitely not going to manage multiple versions. but I think doing a major version upgrade with support for newer bootstrap versions makes sense going forward.

in other words, forget about backwards compatibility 😁

[oduvanka]

Hello,
I solved this problem using additional styles.

wrapper-alerts.jsx

import React, { useContext } from 'react';
import { AlertList } from "react-bs-notifier";
import classNames from 'classnames';

export function WrapperAlerts(props) {
    ...
    function onDismissedAlert(alert) { ... }

    return <AlertList alerts={alerts} onDismiss={onDismissedAlert} timeout={2000} classes={{
        close: classNames("btn-close", "no-text"),
        dismissable: classNames("d-flex", "align-items-start", "flex-row-reverse")
    }}/>
}

main.css

.no-text {
    color: transparent !important;
}