How to resize the width of modal react-bootstrap?

Question

So I'm trying to learn about react-bootstrap modal in detail and on React-Bootstrap Modal Documentation we are able to resize the modal size to our liking depending on the css. I tried copying the code into my web app but it didn't work, how to resolve this ?

Here's my code:

import {Navbar, Nav, Button, Modal, Row, Col} from 'react-bootstrap'
import {useState} from 'react'
import {Link} from 'react-router-dom'
import '../CSS/Header.css'

const Header = () => {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    return (
        <>
            <Navbar className="MainHeader" expand="lg" variant="dark">
                <Navbar.Brand className="Headerlogo" as={Link} to={"/"}>
                    <img src="/Images/logowhite.png" alt="hotel_logo"/>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse className="Headerlist justify-content-end fontReg">
                    <Nav>
                        <Button onClick={handleShow}>Book Now</Button>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>

            <Modal 
                show={show} 
                onHide={handleClose} 
                animation={false} 
                contentClassName="transparentBgClass"
                dialogClassName="modal-90w"
                aria-labelledby="example-custom-modal-styling-title"
            >
                    <Modal.Header closeButton>
                        <Modal.Title id="example-custom-modal-styling-title">
                            Width 90% modal tutorial
                        </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>
        </>
    )
}

Code for CSS:

.modal-90w{
    width: 90%;
}

Answer 1

If your modal is still displaying too small, you need to add max-width: none !important; to your CSS, as Bootstrap defaults to max-width: 500px; .