forum

home / developersection / forums / center scrollable modal with bootstrap

Ask Question

Center scrollable modal with Bootstrap

Ethan Karla 387 28-Jul-2021

How to center scrollable modal with Bootstrap?
bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

03-Aug-2021

To create a Centered Scrollable Modal with Bootstrap library see the below example: 

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <title>Bootstrap Dropdown</title>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</head>

<body>

    <div class='container d-flex justify-content-center flex-column'>

        <!-- Button trigger modal -->

        <button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#exampleModal'>

            Launch demo modal

        </button>

        <!-- Modal -->

        <div class='modal fade' id='exampleModal' tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true'>

            <div class='modal-dialog modal-dialog-centered modal-dialog-scrollable'>

                <div class='modal-content'>

                    <div class='modal-header'>

                        <h5 class='modal-title' id='exampleModalLabel'>Modal title</h5>

                        <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>

                    </div>

                    <div class='modal-body'>

                        This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        <br />

                        Just like that.

                    </div>

                    <div class='modal-footer'>

                        <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button>

                        <button type='button' class='btn btn-primary'>Save changes</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy