Trezo - Bootstrap 5 Admin Dashboard Template

Figma Dribbble Spotify Github GDrive Trello Slak Pinterest Facebook Linkedin

Choose Language

English

Canada

Germany

Portugal

Spain
Notifications (03)

sms

You have requested to withdrawal
2 hrs ago

person

A new user added in Trezo
3 hrs ago

mark_email_unread

You have requested to withdrawal
1 day ago

sms

You have requested to withdrawal
2 hrs ago

person

A new user added in Trezo
3 hrs ago

mark_email_unread

You have requested to withdrawal
1 day ago

See All Notifications
Olivia
Olivia John
Marketing Manager

Modals

Live Demo Modal


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" 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">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hello Modal
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary text-white">Save changes</button>
            </div>
        </div>
    </div>
</div>

Static Backdrop Modal


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary text-white py-2 px-4 fw-semibold" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hello Modal
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary text-white">Understood</button>
            </div>
        </div>
    </div>
</div>

Scrolling long content modal

Hello Modal Scrolling

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consequatur sit sed cumque iusto reiciendis expedita magni, ullam deleniti earum soluta maiores id obcaecati deserunt quas minus illo necessitatibus. Dicta! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, praesentium perspiciatis sapiente blanditiis itaque incidunt explicabo, quo modi veniam esse ratione, magnam maiores id facilis architecto cum iusto corporis eaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum autem delectus quo omnis, beatae quas nostrum perferendis illo! Sunt fugit rem doloremque eum amet velit porro, dolore et laudantium debitis? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem autem asperiores voluptates praesentium reiciendis. Ea nemo fuga nihil consectetur ipsum facere optio quibusdam, officia blanditiis? Delectus laudantium reiciendis fuga corporis?


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary text-white py-2 px-4 fw-semibold" data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
        Launch static backdrop modal
    </button>
    
<!-- Modal -->
<div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop3Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdrop3Label">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hello Modal
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary text-white">Understood</button>
            </div>
        </div>
    </div>
</div>

Vertically centered Modal


<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModal4">
    Center demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hello Modal Center
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary text-white">Save changes</button>
            </div>
        </div>
    </div>
</div>

Extra large modal


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModalxl">
    Center demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalxl" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hello Modal Center
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary text-white">Save changes</button>
            </div>
        </div>
    </div>
</div>

Large modal


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModallg">
    Large modal
</button>
    
<!-- Modal -->
<div class="modal fade" id="exampleModallg" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Large modal</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hello Modal Center
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary text-white">Save changes</button>
            </div>
        </div>
    </div>
</div>

Checkboxes and radios List


<!-- Button trigger modal -->
<button type="button" class="btn btn btn-primary py-2 px-4 text-white fw-semibold" data-bs-toggle="modal" data-bs-target="#exampleModalsm">
    Small modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalsm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Small modal</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Hello Modal Center
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger text-white" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary text-white">Save changes</button>
            </div>
        </div>
    </div>
</div>

Modals

Live Demo Modal

Static Backdrop Modal

Scrolling long content modal

Vertically centered Modal

Extra large modal

Large modal

Checkboxes and radios List

Theme Settings

RTL / LTR

Container Style Fluid / Boxed

Only Sidebar Light / Dark

Only Header Light / Dark

Only Footer Light / Dark

Card Style Radius / Square

Card Style BG White / Gray

Olivia

Olivia John

Modals

Live Demo Modal

Static Backdrop Modal

Scrolling long content modal

Vertically centered Modal

Extra large modal

Large modal

Checkboxes and radios List

Theme Settings

RTL / LTR

Container Style Fluid / Boxed

Only Sidebar Light / Dark

Only Header Light / Dark

Only Footer Light / Dark

Card Style Radius / Square

Card Style BG White / Gray