Bootstrap CSS Classes

Bootstrap CSS class .modal-dialog-scrollable

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog 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">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, velit.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Read more</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Preview

Are you tired of writing HTML by hand?

More Bootstrap CSS classes in Modals category

© 2024 Shuffle. All rights reserved.