MBA Engineering and Construction Cambodia Co., Ltd

Default Modal

Copy

copy


<button type="button" class="butn md" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal<i class="fas fa-long-arrow-alt-right rounded-3"></i>
</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 md" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal<i class="fas fa-long-arrow-alt-right rounded-3"></i>
</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 md" data-bs-toggle="modal" data-bs-target="#scrollable">
    Launch demo modal<i class="fas fa-long-arrow-alt-right rounded-3"></i>
</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 md" data-bs-toggle="modal" data-bs-target="#centered">
    Launch demo modal<i class="fas fa-long-arrow-alt-right rounded-3"></i>
</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 md" data-bs-toggle="modal" data-bs-target="#grid">
    Launch demo modal<i class="fas fa-long-arrow-alt-right rounded-3"></i>
</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

For all your construction needs!

Contact Us

Mail Us