How to Resize Modal height and width in react-bootstrap? - css

Question

I'm trying to use React Bootstrap Modal in my application but the dialog is too small, and I want to make it bigger. How can I achieve that ? I already finished the Code but i think the css doesn't work
Here's the code:
<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;
}

Answer 1

From the react-bootstrap docs: Size
You can add a parameter for the size of the modal just using size="lg" as below
function Example() {
const [smShow, setSmShow] = useState(false);
const [lgShow, setLgShow] = useState(false);
return (
<>
<Button onClick={() => setSmShow(true)} className="me-2">
Small modal
</Button>
<Button onClick={() => setLgShow(true)}>Large modal</Button>
<Modal
size="sm"
show={smShow}
onHide={() => setSmShow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<Modal.Header closeButton>
<Modal.Title id="example-modal-sizes-title-sm">
Small Modal
</Modal.Title>
</Modal.Header>
<Modal.Body>...</Modal.Body>
</Modal>
<Modal
size="lg"
show={lgShow}
onHide={() => setLgShow(false)}
aria-labelledby="example-modal-sizes-title-lg"
>
<Modal.Header closeButton>
<Modal.Title id="example-modal-sizes-title-lg">
Large Modal
</Modal.Title>
</Modal.Header>
<Modal.Body>...</Modal.Body>
</Modal>
</>
);
}