I am trying to create a gray background using Jumbotron in reactstrap.
After installation and reference in required places -
index.js
import 'bootstrap/dist/css/bootstrap.css';
Jumbotron has been implemented in SignIn.js -
import React from 'react'
import Amazon_logo from '../../assets/Amazon_logo.png'
import { Jumbotron, Container } from 'reactstrap';
function SignIn() {
return (
<>
<div>
<img src={Amazon_logo} style={{width:"10%",margin:"1% 2% 2%"}} ></img>
</div>
<div style={{fontSize:'200%',fontWeight:'bold',margin:'1% 2% 2%'}} >
SignIn To Shopbot/East Dane using your Amazon account
</div>
<Jumbotron >
<Container >
<span>Login</span>
<span> <input type="text" ></input> </span>
</Container>
</Jumbotron>
</>
)
}
export default SignIn
However, the gray portion is not appearing as expected based on the reactstrap documentation -
https://i.sstatic.net/IX9Ca.png
Instead of the expected appearance, this is what is displayed on the screen -
https://i.sstatic.net/FQmcB.png
EDIT 1 :
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"reactstrap": "^8.9.0",
"web-vitals": "^1.1.2"
}