React styling bootstrap Modal

0
votes

I want to add style my modal so it has (making the modal the full width of the screen and pushing it down the screen):

width: "100%,
top: "25px

to the

<div class="modal-dialog" role="document">

as it appears on the regular bootstrap modal (http://getbootstrap.com/javascript/#modals), or when react-bootstrap is used, the div is

<div class="custom-modal modal-lg modal-dialog">

but looking at the react-bootstrap site, (https://react-bootstrap.github.io/components.html#modals) we only have access too

<Modal/>
<Modal.Header/>
<Modal.Body/>

and applying those CSS settings to those won't give me the styling im looking for

1
reactjsbootstrap-modal

1 Answers

0
votes

If you look to the Props section for modals, it explains what possible customisations can be set on each of those (Modal, Modal.Header, Modal.Body).

For example, to add a custom-modal class to the modal-dialog element, the property dialogClassName can be set:

<Modal dialogClassName="custom-modal">
    //Modal content goes here
</Modal>

Property documentation

Example with custom css class