Is there a way to manually set the width of Bootstrap's Modal React component on my website?
I want to be able to define the width in pixels, and if possible, use a const object in the .jsx file for CSS. If not, I can resort to using a .css file.
Below is my current React code:
import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
import "./profile.css";
class Profile extends React.Component {
state = {
show: false
};
handleShow = () => {
this.setState({ show: true });
};
handleHide = () => {
this.setState({ show: false });
};
render() {
return (
<React.Fragment>
<Button variant="primary" onClick={this.handleShow}>
Profile
</Button>
<Modal
show={this.state.show}
onHide={this.handleHide}
dialogClassName="custom-modal"
aria-labelledby="example-custom-modal-styling-title"
>
<Modal.Header closeButton>
<Modal.Title id="example-custom-modal-styling-title">
Custom Modal Styling
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae
unde commodi aspernatur enim, consectetur. Cumque deleniti
temporibus ipsam atque a dolores quisquam quisquam adipisci
possimus laboriosam. Quibusdam facilis doloribus debitis! Sit
quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
Mollitia reiciendis porro quo magni incidunt dolore amet atque
facilis ipsum deleniti rem!
</p>
</Modal.Body>
</Modal>
</React.Fragment>
);
}
}
export default Profile;Here is the CSS I used:
.custom-modal {
width: 80% !important;
height: 1500px !important;
color: orange;
}Unfortunately, the result does not match the desired width. See it here.
Thank you!