Fitness UIUX - Bootstrap 5 Mobile HTML template - Admin Dashboard

Modal Dialogues

Standard Modal


            <button type="button" class="btn btn-theme" data-bs-toggle="modal" data-bs-target="#standardmodal">
                Standard modal
            </button>
            
            <!-- Standard Modal -->
            <div class="modal fade" id="standardmodal" tabindex="-1" aria-labelledby="standardmodalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title h5" id="standardmodalLabel">Modal title</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-theme">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

Modal Scrolling Content


            <button type="button" class="btn btn-theme" data-bs-toggle="modal" data-bs-target="#scrollingmodal">
                Scrolling modal
            </button>
            
            <!-- scrolling Modal -->
            <div class="modal fade" id="scrollingmodal" tabindex="-1" aria-labelledby="scrollingmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title h5" id="scrollingmodalLabel">modal-dialog-scrollable</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id varius sapien, eget finibus leo. Mauris lorem elit, efficitur eget enim et, rhoncus hendrerit ligula. Phasellus lobortis massa hendrerit velit volutpat, sed hendrerit ante semper. Sed at interdum turpis. Donec elementum lobortis magna, porttitor luctus dui gravida vel. Donec vestibulum consectetur elit, id finibus erat egestas nec. Curabitur efficitur rutrum arcu, sed interdum est consequat eu. Curabitur lacus leo, semper fringilla lacus in, vehicula rhoncus nisl. Vestibulum efficitur ligula quis ornare pharetra. Nulla tempus ultricies neque interdum luctus. Integer mollis laoreet eleifend. Nullam eu luctus massa, nec tempor mauris.</p>
                            <p class="mb-5">Curabitur vitae odio enim. Vestibulum condimentum diam sit amet lacus dignissim, vitae condimentum neque dictum. Aliquam rhoncus, lorem sit amet mollis scelerisque, mi felis bibendum sapien, in sollicitudin nisl lorem eu nisi. Vivamus elementum quam vitae aliquam tempus. Ut pulvinar efficitur ante, in varius mi lacinia et. Vivamus consequat quam lectus. Pellentesque tincidunt condimentum nisi, sed semper turpis cursus a. Nulla id libero a augue placerat elementum id ornare ipsum.</p>
                            <p class="mb-5">Suspendisse auctor pretium felis bibendum blandit. Mauris volutpat, massa quis tempus sodales, tortor odio lobortis odio, et pulvinar mauris tortor eget augue. Suspendisse vel pulvinar massa, hendrerit laoreet turpis. Donec eu urna posuere, porttitor lectus at, porta mi. Aliquam erat volutpat. Proin nec tortor sagittis, ornare turpis a, iaculis odio. Nulla id enim non dolor gravida porttitor. Vestibulum eget est lacus. Vivamus quis libero vitae nibh ullamcorper sagittis nec in sem.</p>
                            <p class="mb-5">Morbi lectus risus, ultricies vel justo in, efficitur semper dui. Sed sit amet leo ullamcorper, viverra est quis, blandit turpis. Phasellus tincidunt lectus non lorem suscipit, in dignissim est ultrices. In cursus risus sed quam ornare volutpat. Sed in tortor molestie, viverra erat sed, ullamcorper eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti.</p>
                            <p class="mb-5">Praesent dapibus dolor vel urna sagittis, id vehicula tortor varius. Aenean feugiat egestas posuere. Maecenas at condimentum tellus. Aenean elementum pharetra velit, sit amet porttitor erat efficitur eu. In sed tellus eu mi malesuada porttitor. Donec ultricies bibendum leo, ac venenatis quam. Phasellus sed risus id leo rhoncus cursus eu tincidunt turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi justo libero, consectetur at tristique et, rhoncus quis metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris at cursus turpis. Integer quis nibh tempus, tincidunt leo sed, lacinia turpis. Sed facilisis orci a elit sagittis condimentum. Ut laoreet eget ex ut euismod. Donec vitae ipsum non lectus mollis ultricies. In hac habitasse platea dictumst.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-theme">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

Modal Vertical Middle


            <button type="button" class="btn btn-theme" data-bs-toggle="modal" data-bs-target="#verticalmiddlemodal">
                Vertical middle modal
            </button>
            
            <!-- vertical middle Modal -->
            <div class="modal fade" id="verticalmiddlemodal" tabindex="-1" aria-labelledby="verticalmiddlemodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title h5" id="verticalmiddlemodalLabel">modal-dialog-centered</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-theme">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

Modal Sizes


            <button type="button" class="btn btn-theme me-2" data-bs-toggle="modal" data-bs-target="#xlmodal">
                Extra Large modal
            </button>
            <button type="button" class="btn btn-theme me-2" data-bs-toggle="modal" data-bs-target="#lgmodal">
                Large modal
            </button>
            <button type="button" class="btn btn-theme me-2" data-bs-toggle="modal" data-bs-target="#smmodal">
                small modal
            </button>
            
            <!-- modal-xl Modal -->
            <div class="modal fade" id="xlmodal" tabindex="-1" aria-labelledby="xlmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title h5" id="xlmodalLabel">modal-xl</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-theme">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- modal-lg Modal -->
            <div class="modal fade" id="lgmodal" tabindex="-1" aria-labelledby="lgmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title h5" id="lgmodalLabel">modal-lg</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-theme">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- modal-sm Modal -->
            <div class="modal fade" id="smmodal" tabindex="-1" aria-labelledby="smmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title h5" id="smmodalLabel">modal-sm</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-theme">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

Modal Fullscreen

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.

Class	Fullscreen in
`.modal-fullscreen`	Always
`.modal-fullscreen-sm-down`	`576px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`992px`
`.modal-fullscreen-xl-down`	`1200px`
`.modal-fullscreen-xxl-down`	`1400px`


                        
                        <div class="modal-dialog modal-fullscreen-sm-down"></div>


            <button type="button" class="btn btn-theme me-2" data-bs-toggle="modal" data-bs-target="#fullscreenmodal">
                Fullscreen modal
            </button>
            			
            <!-- fullscreen Modal -->
            <div class="modal fade" id="fullscreenmodal" tabindex="-1" aria-labelledby="fullscreenmodalLabel" aria-hidden="true">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="modal-title h5" id="fullscreenmodalLabel">modal-fullscreen</p>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-theme">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

List Groups

Off Canvas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id varius sapien, eget finibus leo. Mauris lorem elit, efficitur eget enim et, rhoncus hendrerit ligula. Phasellus lobortis massa hendrerit velit volutpat, sed hendrerit ante semper. Sed at interdum turpis. Donec elementum lobortis magna, porttitor luctus dui gravida vel. Donec vestibulum consectetur elit, id finibus erat egestas nec. Curabitur efficitur rutrum arcu, sed interdum est consequat eu. Curabitur lacus leo, semper fringilla lacus in, vehicula rhoncus nisl. Vestibulum efficitur ligula quis ornare pharetra. Nulla tempus ultricies neque interdum luctus. Integer mollis laoreet eleifend. Nullam eu luctus massa, nec tempor mauris.

Curabitur vitae odio enim. Vestibulum condimentum diam sit amet lacus dignissim, vitae condimentum neque dictum. Aliquam rhoncus, lorem sit amet mollis scelerisque, mi felis bibendum sapien, in sollicitudin nisl lorem eu nisi. Vivamus elementum quam vitae aliquam tempus. Ut pulvinar efficitur ante, in varius mi lacinia et. Vivamus consequat quam lectus. Pellentesque tincidunt condimentum nisi, sed semper turpis cursus a. Nulla id libero a augue placerat elementum id ornare ipsum.

Suspendisse auctor pretium felis bibendum blandit. Mauris volutpat, massa quis tempus sodales, tortor odio lobortis odio, et pulvinar mauris tortor eget augue. Suspendisse vel pulvinar massa, hendrerit laoreet turpis. Donec eu urna posuere, porttitor lectus at, porta mi. Aliquam erat volutpat. Proin nec tortor sagittis, ornare turpis a, iaculis odio. Nulla id enim non dolor gravida porttitor. Vestibulum eget est lacus. Vivamus quis libero vitae nibh ullamcorper sagittis nec in sem.

Morbi lectus risus, ultricies vel justo in, efficitur semper dui. Sed sit amet leo ullamcorper, viverra est quis, blandit turpis. Phasellus tincidunt lectus non lorem suscipit, in dignissim est ultrices. In cursus risus sed quam ornare volutpat. Sed in tortor molestie, viverra erat sed, ullamcorper eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti.

Praesent dapibus dolor vel urna sagittis, id vehicula tortor varius. Aenean feugiat egestas posuere. Maecenas at condimentum tellus. Aenean elementum pharetra velit, sit amet porttitor erat efficitur eu. In sed tellus eu mi malesuada porttitor. Donec ultricies bibendum leo, ac venenatis quam. Phasellus sed risus id leo rhoncus cursus eu tincidunt turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi justo libero, consectetur at tristique et, rhoncus quis metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris at cursus turpis. Integer quis nibh tempus, tincidunt leo sed, lacinia turpis. Sed facilisis orci a elit sagittis condimentum. Ut laoreet eget ex ut euismod. Donec vitae ipsum non lectus mollis ultricies. In hac habitasse platea dictumst.