Grids using react bootstrap

Question

I want to display 3 cards. I am getting the following error:

./src/views/Notifications.jsx Line 28:8: 'Container' is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.

import React, { Component } from "react";
import { Row, Col, Alert, Container} from "react-bootstrap";
import Button from "components/CustomButton/CustomButton.jsx";
import Typography from "views/Typography.jsx";
import { BrowserRouter as Router, Route, Redirect, Switch, Link, NavLink } from 'react-router-dom';


class Notifications extends Component {
  render() {
    return (
      <Container>
  <Row>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col>2 of 3</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>

    )}
}

Answer 1

Try

import Container from 'react-bootstrap/Container'

https://react-bootstrap.github.io/layout/grid/#container-props