Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/react-modal-size

Responsive React popup window sizing with Bootstrap 5. Modal width, modal height, fullscreen modal, large modal with lg & xl modal classes and more. https://mdbootstrap.com/docs/react/extended/modal-size
https://github.com/mdbootstrap/react-modal-size

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js modal react size

Last synced: 4 months ago
JSON representation

Responsive React popup window sizing with Bootstrap 5. Modal width, modal height, fullscreen modal, large modal with lg & xl modal classes and more. https://mdbootstrap.com/docs/react/extended/modal-size

Awesome Lists containing this project

README 

          
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# MDB React 5



Responsive React popup window sizing with Bootstrap 5. Modal width, modal height, fullscreen modal, large modal with lg & xl modal classes and more.



Check out [React Modal Size Documentation](https://mdbootstrap.com/docs/react/extended/modal-size/) for detailed instructions & even more examples.



## Modal Size 

![Example #1](https://user-images.githubusercontent.com/108793661/187416818-b872b964-f41d-4882-86b5-ad2f50ba9080.png)

```js

import React, { useState } from 'react';

import {

  MDBBtn,

  MDBModal,

  MDBModalDialog,

  MDBModalContent,

  MDBModalHeader,

  MDBModalTitle,

  MDBModalBody

} from 'mdb-react-ui-kit';



export default function App() {

  const [optSmModal, setOptSmModal] = useState(false);



  const toggleShow = () => setOptSmModal(!optSmModal);



  return (

    <>

      Small modal

      

        

          

            

              Small modal

              

            

            ...

          

        

      

    >

  );

}

```

## How to use?



1. Download MDB 5 - FREE REACT UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



You can find other examples [here](https://mdbootstrap.com/docs/react/extended/modal-size).






## More extended React documentation