HWPweb Admin Template Notes

For more information about Bootstrap 5.3 components, click here.

The <body> tag uses bg-body-hwpweb class, which means:

  1. If the light theme is applied, the background color is --bs-tertiary-bg.
  2. If the dark theme is applied, the background color is --bs-body-bg.

Bootstrap 5.3 elements has been modified to use gradients on some elements but not all. Add bg-gradient for elements of:

  1. Badge
  4. Pagination at page-link class
  5. Progress Bar at progress-bar class
For modal, use this element for header: 
<div class="modal-header justify-content-between pt-2 pb-2" style="border-bottom: 1px solid var(--bs-border-color-translucent);">
    <h6 class="pe-2 modal-title fs-6 text-truncate" style="font-weight: bold;">Modal Title</h6>
    <button id="closeBtn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
and for footer: 
<div class="modal-footer justify-content-end pt-2 pb-2" style="border-top: 1px solid var(--bs-border-color-translucent);">
    <div class="mb-1 mt-1 w-100" id="uploadProgressDiv">
        <div class="progress" style="border-top: 1px solid var(--bs-border-color-translucent); border-bottom: 1px solid var(--bs-border-color-translucent); border-left: 1px solid var(--bs-border-color-translucent); border-right: 1px solid var(--bs-border-color-translucent);">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-gradient" role="progressbar" style="width: 0%; transition: none;" id="uploadProgressBar"></div>
        </div>
    </div>
    <div class="d-flex justify-content-between w-100">
        <div>
            <button type="button" id="cancelButton" class="btn btn-danger bg-gradient" style="display: none;" disabled>
                <i class="fa-solid fa-xmark"></i> Cancel
            </button>
        </div>
        <button type="submit" id="submitButton" class="btn btn-primary bg-gradient">
              <i class="fa-solid fa-floppy-disk"></i> Save
        </button>
    </div>
</div>
This is the code for modal sheet 
<div class="modal modal-sheet p-4 py-md-5 fade" id="sheetModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex=" -1" aria-labelledby="sheetModal" aria-hidden="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content bg-body-tertiary rounded-5 shadow-lg transparent-blur">
            <div class="modal-body p-4">
                <h5 class="mb-0" id="sheetMessage"></h5>
                <h6 class="mb-0 fw-normal" id="sheetSubmessage"></h6>
                <div class="row gx-2 pt-4">
                    <div class="col d-grid">
                        <button type="button" class="btn btn-lg btn-body bg-gradient fs-6 mb-0 rounded-4" data-bs-dismiss="modal">No</button>
                    </div>
                    <div class="col d-grid">
                        <button type="submit" class="btn btn-lg btn-primary bg-gradient fs-6 mb-0 rounded-4" id="confirmSheet">Yes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>