React Bootstrap Alert Dismissible Button Without style

user_7521238 0
Viewed 639

I have this alert that I want to have an "X" button to dismiss the alert, but it doesn't have the bootstrap style. I already tried set the closeLabel to an empty string but don't fix the style issue

enter image description here

How should it be:

enter image description here

Here is the code:

<Alert variant="danger" onClose={() => setShowMessage(false)} dismissible>
    <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
    <p>
      Change this and that and try again. Duis mollis, est non commodo
      luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
      Cras mattis consectetur purus sit amet fermentum.
    </p>
  </Alert>
react-bootstrap twitter-bootstrap reactjs web alert
1 Answers

I have same problem. found one post similar here but dontk work for me. But for the moment (until found a real solution) I use class ".close{}" (you can see it in the insperctor of the element) and modify css format for the button.

My css:

enter code here

.close ::before{
  content: 'X';
  visibility: visible;
  color: "black";
  font-weight: bold;
}

.sr-only::before{
  visibility: hidden;
}

.close{
  /*background-color: red; */
  visibility: hidden;
  position: absolute;
  right: 32px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-color: rgb(247, 12, 12, 0.5);
}
user_151952760
Related