CODEWITHSUNDEEP
javascriptreactjs
deivuss331
deivuss331

Reputation: 421

Why my react-bootstrap modal component displays like that?

During the development of my next React app, I had to use a modal component from react-bootstrap. It's actually working fine, but it looks like there are no stylesheets imported?

Here is my code

import React from "react";
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';

class Nav extends React.Component {
    constructor(props, context) {
      super(props, context);

      this.handleShow = this.handleShow.bind(this);
      this.handleClose = this.handleClose.bind(this);

      this.state = {
        show: false,
      };
    }

    handleClose() {
      this.setState({ show: false });
    }

    handleShow() {
      this.setState({ show: true });
    }

    render() {
      return (
        <>
          <nav>
            <h5>a pack of free css animations</h5>
            <ul>
             <li><button variant="primary" onClick={this.handleShow}>how to use ></button></li>
              <li>
                <form method="get" action="file">
                 <button type="submit">download ></button>
               </form>
              </li>
              <li><a href=".">see on github ></a></li>
            </ul>
          </nav>

          <Modal
          show={this.state.show}
          onHide={this.handleClose}
          aria-labelledby="ModalHeader"
          >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">How to use?</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>Once you downloaded <i>animation.min.css</i>, you have to link that to your project.<br />
              To do that, use a 'link' tag, or just copy code of animation you like.</p>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
                Close
            </Button>
          </Modal.Footer>
        </Modal>
        </>
      );
    }
  }

export default Nav;


And it looks like that (Chrome) Click me


Modal is displayed on bottom, text is not centered etc...
What do you think?
How to improve that?

Upvotes: 0

Views: 1550

Answers (2)

Pranay Tripathi
Pranay Tripathi

Reputation: 1842

You are missing the stylesheet from react-bootstrap which is why the model is not getting styled properly. Add following to your html and it should work.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

Please go through the link to integrate your app and use with react-bootstrap.

Upvotes: 0

diegofcruz
diegofcruz

Reputation: 11

Load the style from react-bootstrap, like below:

https://react-bootstrap.github.io/getting-started/introduction/

Upvotes: 1

Related Questions