I'm currently working on implementing a React Bootstrap Modal in my project. However, I am facing an issue where the dialog appears to be too small for my requirements. I would like to make it bigger, but despite completing the code, it seems that the CSS styling is not taking effect.
Below is the code snippet:
<Modal show={showModal} onHide={handleClose} className='modalSize'>
<Modal.Body>
<Row>
<Col lg={6}>
<img
className
src= {modalData.picture}
/>
</Col>
<Col lg={6}>
<h1>{modalData.name}</h1>
<h1>{modalData.position}</h1>
</Col>
</Row>
</Modal.Body>
</Modal>
CSS :
.modalSize{
width: 100% !important;
}