CODEWITHSUNDEEP
reactjsbootstrap-4react-bootstrap
OSGI Java
OSGI Java

Reputation: 645

How to make a React Bootstrap Alert component visible?

<Alert/> constructed with the code below is not visible:

import { Alert } from 'react-bootstrap';
import React from 'react';

const AlertHelloWorld = () => (
    <Alert variant="success">
        Hello World!
    </Alert>
);

export default AlertHelloWorld;

The code results in opacity set to 0:

enter image description here

When I change opacity to 1 in the browser the alert becomes visible.

All dependencies:

  "dependencies": {
    "@babel/plugin-transform-runtime": "7.4.3",
    "@babel/runtime": "7.4.3",
    "babel-polyfill": "6.26.0",
    "base-64": "0.1.0",
    "bootstrap": "^4.4.1",
    "es6-promise": "4.2.5",
    "express": "4.16.4",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.4.1",
    "local-storage": "1.4.2",
    "markdown-to-jsx": "6.10.3",
    "node-sass": "4.13.1",
    "popper.js": "1.15.0",
    "prop-types": "15.6.2",
    "raf": "3.4.1",
    "react": "^16.9.0",
    "react-bootstrap": "1.0.0-beta.16",
    "react-dom": "16.8.0",
    "react-router-dom": "4.3.1",
    "request": "2.88.0",
    "request-promise": "4.2.2",
    "sass-loader": "7.2.0"
  },

What is the proper way to make the alert visible?

Upvotes: 0

Views: 690

Answers (2)

OSGI Java
OSGI Java

Reputation: 645

The problem is caused by someone's introduction of a custom bootstrap.custom.css with a CSS code that causes opacity for the Alert component to be set to 0:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

Upvotes: 0

Jan Havel
Jan Havel

Reputation: 329

I have just checked your code on my end and it seems to be working fine for me using the following dependencies:

"bootstrap": "^4.4.1",
"react-bootstrap": "1.0.0-beta.16",
"react": "^16.9.0",

I can't think of a different reason why your code should not work.

Upvotes: 1

Related Questions