NobleUI - HTML Bootstrap 5 Admin Dashboard Template

#### TinyMCE

Read the Official TinyMCE Documentation for a full list of instructions and other options.

#### SimpleMDE

Read the Official SimpleMDE Documentation for a full list of instructions and other options.

#### Ace Editor

Read the Official Ace Editor Documentation for a full list of instructions and other options.

##### HTML Mode

<div class="card"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card text-end"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>

##### SCSS Mode

.card { position: relative; display: flex; flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 word-wrap: break-word; background-color: $card-bg; background-clip: border-box; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); > hr { margin-right: 0; margin-left: 0; } > .list-group:first-child { .list-group-item:first-child { @include border-top-radius($card-border-radius); } } > .list-group:last-child { .list-group-item:last-child { @include border-bottom-radius($card-border-radius); } } } .card-body { flex: 1 1 auto; padding: $card-spacer-x; color: $card-color; } .card-title { margin-bottom: $card-spacer-y; } .card-subtitle { margin-top: -$card-spacer-y / 2; margin-bottom: 0; } .card-text:last-child { margin-bottom: 0; } .card-link { @include hover { text-decoration: none; } + .card-link { margin-left: $card-spacer-x; } }

##### Javascript Mode

class Alert { constructor(element) { this._element = element } // Getters static get VERSION() { return VERSION } // Public close(element) { let rootElement = this._element if (element) { rootElement = this._getRootElement(element) } const customEvent = this._triggerCloseEvent(rootElement) if (customEvent.isDefaultPrevented()) { return } this._removeElement(rootElement) } dispose() { $.removeData(this._element, DATA_KEY) this._element = null } // Private _getRootElement(element) { const selector = Util.getSelectorFromElement(element) let parent = false if (selector) { parent = document.querySelector(selector) } if (!parent) { parent = $(element).closest(`.${ClassName.ALERT}`)[0] } return parent } _triggerCloseEvent(element) { const closeEvent = $.Event(Event.CLOSE) $(element).trigger(closeEvent) return closeEvent } _removeElement(element) { $(element).removeClass(ClassName.SHOW) if (!$(element).hasClass(ClassName.FADE)) { this._destroyElement(element) return } const transitionDuration = Util.getTransitionDurationFromElement(element) $(element) .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event)) .emulateTransitionEnd(transitionDuration) } _destroyElement(element) { $(element) .detach() .trigger(Event.CLOSED) .remove() } // Static static _jQueryInterface(config) { return this.each(function () { const $element = $(this) let data = $element.data(DATA_KEY) if (!data) { data = new Alert(this) $element.data(DATA_KEY, data) } if (config === 'close') { data[config](this) } }) } static _handleDismiss(alertInstance) { return function (event) { if (event) { event.preventDefault() } alertInstance.close(this) } } }