reactstrap Collapse does not have any formating, and neither does card

Question

Reactstraps cards and collapse does not seem to work. I don't know what I am doing wrong but I have tried a few different methods to no avail. The text just sits there and the button does nothing.

I have tried reactstrap, react bootstrap and the normal html code. I am using rekit ide to work on this project.

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = { collapse: false };
  }

  toggle() {
this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
return (
  <div>
    <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
    <Collapse isOpen={this.state.collapse}>
      <Card>
        <CardBody>
        Anim pariatur cliche reprehenderit,
         enim eiusmod high life accusamus terry richardson ad squid. Nihil
         anim keffiyeh helvetica, craft beer labore wes anderson cred
         nesciunt sapiente ea proident.
        </CardBody>
      </Card>
    </Collapse>
  </div>
    );
  }
}

export default Example;

I should get a collapsing card when I push the button, but I get nothing.

Answer 1

Did you install bootstrap

npm install --save bootstrap 

and import it in src/index.js file following Installation Guide like below:

import 'bootstrap/dist/css/bootstrap.min.css';