Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Center scrollable modal with Bootstrap

Ethan Karla 488 28 Jul 2021

How to center scrollable modal with Bootstrap?

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.

1 Answers

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!

advertising