javascriptreactjsreact-bootstrap

React Bootstrap fullscreen prop not working

Describe the bug

Adding the fullscreen prop to Modal isn't making the Modal go fullscreen.

Reproducible Example

Minimal example by using CodeSandbox.

Expected behavior

The modal to be fullscreen.

Screenshots

This is the example on Code Sandbox. It's also not working on my app. In my app I'm using the latest version of the react-bootstrap package. The Code Sandbox example is using 1.5.2. Screen Shot 2021-09-22 at 10 20 28 AM

Environment

Additional context

I'm confused because the fullscreen prop seems to be working in the example in the docs. You can run a phone emulator in Chrome here and see it working. I don't see any important difference between the code in my app and the docs. Am I missing something? Doing something wrong? Lastly, I am trying to affect only one particular modal in my app, and I only want the modal to go fullscreen when the screen size is small. Any help is greatly appreciated!

Solution

  • The answer is that the fullscreen prop on a Bootstrap Modal is only compatible with react-bootstrap version 5. Someone kindly helped me out on this GitHub issue.

    To upgrade to Bootstrap 5, run these commands in your terminal:

    1. npm uninstall bootstrap
    2. npm uninstall react-bootstrap
    3. npm install react-bootstrap@next bootstrap@5.1.1
    4. Put the following snippet in your index.html file, in your public folder
    <link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
 integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
 crossorigin="anonymous"
/>

    If you don't have Bootstrap already installed then the first two commands won't be necessary.

    Note: If your app is using Bootstrap 4, it may not be worth upgrading to Bootstrap 5 just for this prop. There are at least several Bootstrap 4 React components that aren't compatible with Bootstrap 5, (i.e. Form.File, Accordion.Toggle, and InputGroup.Prepend).