Why my react-bootstrap modal component displays like that?

deivuss331

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?

Pranay Tripathi

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Why is my modal bootstrap form behaving like this?

why my lcd displays like out of signal

Why is my react stepper component is look like small?

bootstrap modal displays twice

Why Bootstrap background and text classes are not making changes in my react component?

React-Redux with Bootstrap -- modal component

Error in showing my modal in React component

Why are my Bootstrap modal images not showing?

Why is my modal not showing? Bootstrap 4

modal not working on my react project ( working with bootstrap)

Bootstrap modal displays grey background

Why is my modal only taking the first prop passed to it? (Using React and Bootstrap)

Why is this react-bootstrap modal not properly responding?

React opening react-bootstrap modal in content component from sidebar

React/redux + bootstrap, make modal show unique for component

How to display a react-bootstrap modal from another component

Problem getting the right values using component react-bootstrap/Modal

My React modal component for a submit and edit form won't close?

Why is my React component staying a step behind?

why my HOC Component is working properly ? #React

Why does my React Component Export not work?

Why is my React component unmounting all the time?

Why is my "inherited" react component losing state?

Why is my React component rendering twice?

Why my functions is not returning a component? React

why my react native component keep refreshing?

Why is my css not applying styling to React component?

Why is my React-Native component not rendering?

Why is my React Function component not appearing?