How to Centered Scrollable Modal with Bootstrap?

0 votes
69 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

How to Centered Scrollable Modal with Bootstrap?

1 Answer

0 votes
Ravi Vishwakarma answered 18-Aug-2021 by Ravi Vishwakarma


<!doctype html>

<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <!-- fontawesome -->
    <link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.10.0/css/all.css' integrity='sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p' crossorigin='anonymous' />
    <title>Modal demo</title>
</head>
<body>
    <div class='container my-2'>
        <h1 class='text-center'>Modal Here</h1>
        <!-- Button trigger modal -->
        <button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#modaltrigger'>
            Modal Center Scroll
        </button>
        <button type='button' class='btn btn-danger' data-bs-toggle='modal' data-bs-target='#modaltriggerfullpage'>
            Modal full screen
        </button>
        <!-- Modal -->
        <div class='modal fade' id='modaltrigger' aria-labelledby='modal' >
            <div class='modal-dialog modal-dialog-centered modal-dialog-scrollable'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h5 class='modal-title' id='modal'>Lorem Ipsum</h5>
                        <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
                    </div>
                    <div class='modal-body'>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </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'>Got it.</button>
                    </div>
                </div>
            </div>
        </div>
         <!-- Modal -->
        <div class='modal fade ' id='modaltriggerfullpage' aria-labelledby='modal' >
            <div class='modal-dialog modal-fullscreen'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h5 class='modal-title' id='H1'>Lorem Ipsum</h5>
                        <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
                    </div>
                    <div class='modal-body'>
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'><i class='fa fa-cut mx-3' ></i>Close</button>
                        <button type='button' class='btn btn-danger'><i class='fa fa-check mx-3' ></i>Ok</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>
</body>
</html>
Output
How to Centered Scrollable Modal with Bootstrap?