Changing React Bootstrap Modal.Header closeButton icon

user_19532516 0
Viewed 88

I am working with React Bootstrap Modal. I'm trying to change the closeButton icon. But it didn't work.

<Modal.Header className='modal-head' closeButton>
   <Modal.Title>Cart</Modal.Title>
</Modal.Header>
react-bootstrap bootstrap-modal reactjs css html
2 Answers

I don't think react-bootstrap library provides anything as such by itself. Although what you can do it add an icon right aligned in the modal header and add an onClick action which changes the modal's open state and closes it.

user_105696520

*You can take a look to this example, maybe it will be more clear to you. You have just to import LoginButton.

Focus on

handleShow

export const LoginButton = () => {
    const [fullscreen, setFullscreen] = useState(true);
    const [show, setShow] = useState(false);

    function handleShow(breakpoint) {
        setShow(breakpoint);

        setFullscreen(true);
    }

    return (
        <div>
            <Button className="me-2 mb-2" onClick={() => handleShow(true)}>
                Login
            </Button>

            <Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} >

                <Modal.Header className="Modal_Login_header" >

                <Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title>
                <Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button>

                </Modal.Header>

            <Modal.Body>Modal body content</Modal.Body>
        </Modal>
        </div>
    )
};

CSS:

.Modal_Login{
    display: flex;
     flex-direction:row;
}
.Modal_Login_header{
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
}
user_127540890
Related