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?
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.
Comments