import { useState } from
"react"
;
import Button from
"react-bootstrap/Button"
;
import Modal from
"react-bootstrap/Modal"
;
import
"bootstrap/dist/css/bootstrap.css"
;
function
App() {
const [show, setShow] = useState(
false
);
return
(
<>
<div
className=
"d-flex justify-content-center align-items-center"
style={{ minHeight:
"100vh"
}}
>
<Button variant=
"primary"
onClick={() => setShow(
true
)}>
Press to See scrollable modal window
</Button>
</div>
<Modal
show={show}
onHide={() => setShow(
false
)}
scrollable
style={{ height:
"300px"
}}
dialogClassName=
"modal-30w"
aria-labelledby=
"example-custom-modal-styling-title"
>
<Modal.Header closeButton>
<Modal.Title
id=
"example-custom-modal-styling-title"
style={{ color:
"green"
}}
>
Geeks For Geeks
</Modal.Title>
</Modal.Header>
<Modal.Body style={{ textAlign:
"justify"
}}>
<p>
GeeksforGeeks is an online platform that has become a heaven
for
coding enthusiasts and tech aficionados. It
's like a digital
treasure trove of programming knowledge and computer science wisdom.
Wandering through the corridors of GeeksforGeeks is like embarking
on a fascinating journey through the vast landscape of algorithms,
data structures, and programming languages. It'
s a place where ones
and zeros come to life, creating intricate symphonies of logic and
code. You'll find yourself lost
in
a labyrinth of articles and
tutorials, each one unraveling the mysteries of a different
programming concept.
</p>
</Modal.Body>
</Modal>
</>
);
}
export
default
App;