Attempted import error: 'Grid' is not exported from 'react-bootstrap'

Question

I'm getting this error I have created a new project using npx-create-react-app and then followed the instructions written down here: https://react-bootstrap.github.io/getting-started/introduction I've installed using: npm install react-bootstrap bootstrap. Then took the CDN and copying it to my index.html

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link
**rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>**
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Then have imported:

import React from 'react';
import  {Grid}  from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="container">
        <Grid className ="purchase-card">
          <h1>Hello World</h1>
        </Grid>
    </div>
  );
}

export default App;

I've tried searching Google for a solution and variations of importing (import Button from 'react-bootstrap/Button' for example) and I cannot seem to find the issue causing this.

Answer 1

Grid was renamed to Container as you can see here