Technosoft - It Solutions HTML Template

Default Modal


<button type="button" class="butn-style3" data-bs-toggle="modal" data-bs-target="#exampleModal">
                              Launch demo modal
                            </button>
<!-- default 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">
                <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">
                ...
            </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>

Static backdrop

Copy

copy


<button type="button" class="butn-style3" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                              Launch static backdrop modal
                            </button>
<!-- static 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">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <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-primary">Understood</button>
            </div>
        </div>
    </div>
</div>

Scrolling long content

Copy

copy


<button type="button" class="butn-style3" data-bs-toggle="modal" data-bs-target="#scrollable">
                              Launch demo modal
                            </button>
<!-- Scrollable modal -->
<div class="modal fade" id="scrollable" tabindex="-1" aria-labelledby="scrollableLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scrollable">Modal title</h5>
                <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-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Vertically centered

Copy

copy


<button type="button" class="butn-style3" data-bs-toggle="modal" data-bs-target="#centered">
                              Launch demo modal
                            </button>
<!-- Vertically centered -->
<div class="modal fade" id="centered" tabindex="-1" aria-labelledby="centeredLabel" 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="centeredLabel">Modal title</h5>
                <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-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Using the grid

Copy

copy


<button type="button" class="butn-style3" data-bs-toggle="modal" data-bs-target="#grid">
                              Launch demo modal
                            </button>
<!-- Using the grid -->
<div class="modal fade" id="grid" tabindex="-1" aria-labelledby="gridLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="gridLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row mb-4">
                        <div class="col-md-4 border bg-light">.col-md-4</div>
                        <div class="col-md-4 ms-auto border bg-light">.col-md-4 .ms-auto</div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-3 ms-auto border bg-light">.col-md-3 .ms-auto</div>
                        <div class="col-md-2 ms-auto border bg-light">.col-md-2 .ms-auto</div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6 ms-auto border bg-light">.col-md-6 .ms-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9 border bg-light">
                            Level 1: .col-sm-9
                            <div class="row">
                                <div class="col-8 col-sm-6 border bg-light">
                                    Level 2: .col-8 .col-sm-6
                                </div>
                                <div class="col-4 col-sm-6 border bg-light">
                                    Level 2: .col-4 .col-sm-6
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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>

Modal

Default Modal

Static backdrop

Scrolling long content

Vertically centered

Using the grid

Subscribe Our Newsletter