title: How to make a React Bootstrap Alert component visible?
body: <p><code>&lt;Alert/&gt;</code> constructed with the code below is not visible:</p>
  
  <pre><code>import { Alert } from 'react-bootstrap';
  import React from 'react';
  
  const AlertHelloWorld = () =&gt; (
      &lt;Alert variant="success"&gt;
          Hello World!
      &lt;/Alert&gt;
  );
  
  export default AlertHelloWorld;
  </code></pre>
  
  <p>The code results in <code>opacity</code> set to <code>0</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/EQu1v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EQu1v.png" alt="enter image description here"></a> </p>
  
  <p>When I change <code>opacity</code> to <code>1</code> in the browser the alert becomes visible.</p>
  
  <p>All dependencies:</p>
  
  <pre><code>  "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"
    },
  </code></pre>
  
  <p><strong>What is the proper way to make the alert visible?</strong></p>