Component Sections - GTFramework.Web

Buttons

Basic Buttons

<small class="fw-medium">Basic Buttons</small>
<div class="demo-inline-spacing mt-2">
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-dark">Secondary</button>
</div>

Inputs & Labels

First Name

Last Name

Username

Phone Number

Password

Number

URL

Color

<div class="row g-6">
    <div class="col-md-6">
        <label for="firstNameInput" class="form-label">First Name</label>
        <input type="text" class="form-control" id="firstNameInput" placeholder="Jane" />
    </div>
    <div class="col-md-6">
        <label for="lastNameInput" class="form-label">Last Name</label>
        <input type="text" class="form-control" id="lastNameInput" placeholder="Doe" />
    </div>
    <div class="col-md-6">
        <label for="defaultFormControlInput" class="form-label">Username</label>
        <input type="text" class="form-control" id="defaultFormControlInput" placeholder="johndoe" />
    </div>
    <div class="col-md-6">
        <label for="phoneNumberInput"
               class="form-label">
            Phone Number
        </label>
        <input type="text"
               class="form-control js-international-phone-number-input"
               id="phoneNumberInput"
               name="PhoneNumber"
               placeholder="+880 1XXXXXXXXX"
               aria-describedby="phoneNumberError" />
        <div id="phoneNumberError"
             class="form-text text-danger js-international-phone-number-error-message"></div>
    </div>
    <!-- Example for phone number validation -->
    <script>
 var primaryPhoneInput = $("#PrimaryMNo");
 var primaryIti = window.intlTelInputGlobals.getInstance(primaryPhoneInput[0]);
 var primaryPhoneNumber = primaryIti ? primaryIti.getNumber() : ""; // Fallback if intlTelInput is not initialized
 if (primaryPhoneInput.val().trim() === "") {
     errors.push({ selector: "#PrimaryMNoerror", message: "Primary Mobile Number is required." });
     isValid = false;
 } else if (primaryIti && !primaryIti.isValidNumber()) {
     errors.push({ selector: "#PrimaryMNoerror", message: "Primary Mobile Number is invalid." });
     isValid = false;
 }
    </script>
    <div class="col-md-6">
        <label class="form-label" for="basic-addon-search31">Search</label>
        <div class="input-group input-group-merge">
            <span class="input-group-text" id="basic-addon-search31"><i class="icon-base bx bx-search"></i></span>
            <input type="text" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31" />
        </div>
    </div>
    <div class="col-md-6 form-password-toggle">
        <label class="form-label" for="basic-default-password32">Password</label>
        <div class="input-group input-group-merge">
            <input type="password" class="form-control" id="basic-default-password32" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="basic-default-password" />
            <span class="input-group-text cursor-pointer" id="basic-default-password"><i class="icon-base bx bx-hide"></i></span>
        </div>
    </div>
    <div class="col-md-6">
        <label for="emailInput" class="form-label">Email</label>
        <input type="email" class="form-control" id="emailInput" placeholder="jane.doe@example.com" />
    </div>
    <div class="col-md-6">
        <label for="numberInput" class="form-label">Number</label>
        <input type="number" class="form-control" id="numberInput" placeholder="42" />
    </div>
    <div class="col-md-6">
        <label for="urlInput" class="form-label">URL</label>
        <input type="url" class="form-control" id="urlInput" placeholder="https://example.com" />
    </div>

    <div class="col-md-6">
        <label for="colorInput" class="form-label">Color</label>
        <input type="color" class="form-control form-control-color" id="colorInput" value="#563d7c" title="Choose your color" />
    </div>
</div>

Selection Controls

Checkboxes

I agree to the terms and conditions

Subscribe to newsletter

Gender

Male

Female

Switches

Default switch

Checked switch

Switches with icon

With icon

Sizes

Select Option

<div class="row g-6">
    <!-- Checkboxes -->
    <div class="col-md-6">
        <small class="fw-medium">Checkboxes</small>
        <div class="form-check form-check-dark mt-2">
                <input class="form-check-input" type="checkbox" value="" id="termsCheck" />
                <label class="form-check-label" for="termsCheck"> I agree to the terms and conditions </label>
        </div>
        <div class="form-check form-check-dark mt-2">
                <input class="form-check-input" type="checkbox" value="" id="newsletterCheck" checked />
                <label class="form-check-label" for="newsletterCheck"> Subscribe to newsletter </label>
        </div>
    </div>
    <!-- Radio Buttons -->
    <div class="col-md-6">
            <small class="fw-medium d-block">Gender</small>
            <div class="form-check form-check-dark form-check-inline mt-2">
                <input name="genderRadioOptions" class="form-check-input" type="radio" id="genderMale" value="male" />
                <label class="form-check-label" for="genderMale">Male</label>
            </div>
            <div class="form-check form-check-dark form-check-inline">
                <input name="genderRadioOptions" class="form-check-input" type="radio" id="genderFemale" value="female" />
                <label class="form-check-label" for="genderFemale">Female</label>
            </div>
    </div>
</div>
<!-- Switches -->
<div class="row g-6 mt-4">
    <div class="col-md-6">
        <small class="fw-medium">Switches</small>
        <div class="form-check form-check-dark form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
            <label class="form-check-label" for="flexSwitchCheckDefault">Default switch</label>
        </div>
        <div class="form-check form-check-dark form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
            <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch</label>
        </div>
    </div>
    <div class="col-md-6">
        <small class="fw-medium">Switches with icon</small>
        <div class="mt-2">
            <label class="switch">
                <input type="checkbox" class="switch-input" />
                <span class="switch-toggle-slider">
                    <span class="switch-on">
                        <i class="icon-base bx bx-check"></i>
                    </span>
                    <span class="switch-off">
                        <i class="icon-base bx bx-x"></i>
                    </span>
                </span>
                <span class="switch-label">With icon</span>
            </label>
        </div>
    </div>
</div>
<!-- Switch sizes -->
<div class="row g-6 mt-4">
    <div class="col-12"><small class="fw-medium">Sizes</small></div>
    <div class="col-md-6">
        <div class="d-flex flex-column align-items-start gap-3">
            <label class="switch switch-sm">
                <input type="checkbox" class="switch-input" checked />
                <span class="switch-toggle-slider"></span>
            </label>
            <label class="switch">
                <input type="checkbox" class="switch-input" />
                <span class="switch-toggle-slider"></span>
            </label>
            <label class="switch switch-lg">
                <input type="checkbox" class="switch-input" checked />
                <span class="switch-toggle-slider"></span>
            </label>
        </div>
    </div>
</div>
    <!-- Dropdown -->
<div class="mt-4">
    <label for="exampleFormControlSelect1" class="form-label">Select Option</label>
    <select class="form-select" id="exampleFormControlSelect1">
        <option selected>Open this select menu</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>

Other Inputs

Comments

Rating

<!-- Text Area -->
<div class="mb-4">
    <label for="commentsTextarea" class="form-label">Comments</label>
    <textarea class="form-control" id="commentsTextarea" rows="3" placeholder="Enter your comments"></textarea>
</div>
<!-- Slider -->
<div>
    <label for="formRange1" class="form-label">Rating</label>
    <input type="range" class="form-range" id="formRange1" min="0" max="100" step="1" />
</div>

File Upload

Basic File Upload

Multiple File Upload

Standard File Inputs

Default file input

Multiple files input

Input group

Upload

<div class="row g-6">
    <div class="col-md-6">
            <h6 class="card-title">Basic File Upload</h6>
            <form action="/upload" class="dropzone needsclick" id="dropzone-basic">
                <div class="dz-message needsclick">
                    Drop files here or click to upload
                    <span class="note needsclick">(Single file upload)</span>
                </div>
                <div class="fallback">
                    <input name="file" type="file" />
                </div>
            </form>
    </div>
    <div class="col-md-6">
        <h6 class="card-title">Multiple File Upload</h6>
        <form action="/upload" class="dropzone needsclick" id="dropzone-multi">
            <div class="dz-message needsclick">
                Drop files here or click to upload
                <span class="note needsclick">(Multiple files upload)</span>
            </div>
            <div class="fallback">
                <input name="file" type="file" multiple/>
            </div>
        </form>
    </div>
</div>
<hr class="my-4" />
<div class="row g-6">
    <div class="col-12">
        <h6 class="card-title">Standard File Inputs</h6>
    </div>
    <div class="col-md-6">
        <div class="mb-4">
            <label for="formFile" class="form-label">Default file input</label>
            <input class="form-control" type="file" id="formFile" />
        </div>
        <div class="mb-0">
            <label for="formFileMultiple" class="form-label">Multiple files input</label>
            <input class="form-control" type="file" id="formFileMultiple" multiple />
        </div>
    </div>
    <div class="col-md-6">
            <div class="mb-4">
            <label class="form-label">Input group</label>
            <div class="input-group">
                <input type="file" class="form-control" id="inputGroupFile02" />
                <label class="input-group-text" for="inputGroupFile02">Upload</label>
            </div>
        </div>
    </div>
</div>

Accordion

Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder.

Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll.

Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin.

<div class="accordion" id="accordionExample">
    <div class="accordion-item active">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionOne" aria-expanded="true" aria-controls="accordionOne">
                Accordion Item 1
            </button>
        </h2>
        <div id="accordionOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionTwo" aria-expanded="false" aria-controls="accordionTwo">
                Accordion Item 2
            </button>
        </h2>
        <div id="accordionTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionThree" aria-expanded="false" aria-controls="accordionThree">
                Accordion Item 3
            </button>
        </h2>
        <div id="accordionThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin.
            </div>
        </div>
    </div>
</div>

Badges

Primary Secondary Danger outline Verified 8 9 16+

<div class="demo-inline-spacing">
    <span class="badge rounded-pill text-bg-primary">Primary</span>
    <span class="badge rounded-pill text-bg-secondary">Secondary</span>
    <span class="badge rounded-pill text-bg-danger">Danger</span>
    <span class="badge rounded-pill badge-outline-secondary">outline</span>
    <span class="badge rounded-pill text-bg-info"><i class='icon-basebx bx-badge-check'></i>Verified</span>
    <span class="badge badge-center rounded-pill text-bg-dark">8</span>
    <span class="badge badge-center rounded-pill text-bg-danger">9</span>
    <span class="badge rounded-pill badge-outline-secondary ms-1">16+</span>
</div>

Dropdowns

<div class="demo-inline-spacing">
    <div class="btn-group">
        <button type="button"
                class="btn btn-primary dropdown-toggle"
                data-bs-toggle="dropdown"
                aria-expanded="false">
            Primary
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
            <li>
                <hr class="dropdown-divider" />
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button"
                class="btn btn-primary btn-icon rounded-pill dropdown-toggle hide-arrow"
                data-bs-toggle="dropdown"
                aria-expanded="false">
            <i class="icon-base bx bx-dots-vertical-rounded"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
            <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
            <li>
                <hr class="dropdown-divider" />
            </li>
            <li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
        </ul>
    </div>
</div>

Modals

Default

<small class="fw-medium">Default</small>
<div class="mt-4">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
        Launch default modal
    </button>
</div>

<!-- Modal Markup -->
<div class="modal fade" id="basicModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel1">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col mb-6">
                        <label for="nameBasic" class="form-label">Name</label>
                        <input type="text" id="nameBasic" class="form-control" placeholder="Enter Name" />
                    </div>
                </div>
                <div class="row g-6">
                    <div class="col mb-0">
                        <label for="emailBasic" class="form-label">Email</label>
                        <input type="email" id="emailBasic" class="form-control" placeholder="xxxx@xxx.xx" />
                    </div>
                   
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Offcanvas

<div class="demo-inline-spacing">
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
        Toggle End
    </button>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
        Toggle Top
    </button>
</div>

<!-- Offcanvas Markup -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
    <div class="offcanvas-header">
        <h5 id="offcanvasEndLabel" class="offcanvas-title">Offcanvas End</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body my-auto mx-0 flex-grow-0">
        <p class="text-center">
            Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out
            print, graphic or web designs. The passage is attributed to an unknown typesetter in
            the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum
            et Malorum for use in a type specimen book.
        </p>
        <div class="demo-inline-spacing d-flex justify-content-end">
            <button type="button" class="btn btn-primary">Continue</button>
            <button type="button"
                    class="btn btn-light"
                    data-bs-dismiss="offcanvas">
                Cancel
            </button>
        </div>
    </div>
</div>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
    <div class="offcanvas-header">
        <h5 id="offcanvasTopLabel" class="offcanvas-title">Offcanvas Top</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>
            Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out
            print, graphic or web designs. The passage is attributed to an unknown typesetter in
            the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum
            et Malorum for use in a type specimen book.
        </p>
        <div class="demo-inline-spacing d-flex justify-content-end">
            <button type="button" class="btn btn-primary">Continue</button>
            <button type="button" class="btn btn-light" data-bs-dismiss="offcanvas">
                Cancel
            </button>
        </div>
    </div>
</div>

Tabs & Pills

Home tab content.

Profile tab content.

<div class="nav-align-top">
    <ul class="nav nav-pills mb-4" role="tablist">
        <li class="nav-item">
            <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-home" aria-controls="navs-pills-top-home" aria-selected="true">
                Home
            </button>
        </li>
        <li class="nav-item">
            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-profile" aria-controls="navs-pills-top-profile" aria-selected="false">
                Profile
            </button>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="navs-pills-top-home" role="tabpanel">
            <p>Home tab content.</p>
        </div>
        <div class="tab-pane fade" id="navs-pills-top-profile" role="tabpanel">
            <p>Profile tab content.</p>
        </div>
    </div>
</div>

Select2

Basic

Multiple

<div class="col-12">
  <div class="card">
    <h5 class="card-header">Select2</h5>
    <div class="card-body">
      <div class="row g-6">

        <!-- Basic -->
        <div class="col-md-6">
          <label class="form-label">Basic</label>
          <select class="select2 form-select form-select-lg">
            <option value="AK">Alaska</option>
            <option value="HI">Hawaii</option>
            <option value="CA">California</option>
            <option value="NV">Nevada</option>
          </select>
        </div>

        <!-- Multiple -->
        <div class="col-md-6">
          <label class="form-label">Multiple</label>
          <select class="select2 form-select" multiple>
            <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
            </optgroup>
            <optgroup label="Eastern Time Zone">
              <option value="FL">Florida</option>
              <option value="NY">New York</option>
            </optgroup>
          </select>
        </div>

      </div>
    </div>
  </div>
</div>

Tagify

Basic

Custom Inline Suggestions

Custom List Suggestions

Users List

Email List


<!-- Tagify -->
<div class="col-12">
  <div class="card">
    <h5 class="card-header">Tagify</h5>
    <div class="card-body">
      <div class="row g-6">

        <!-- Basic -->
        <div class="col-md-6">
          <label class="form-label">Basic</label>
          <input class="form-control"
                 value="Tag1, Tag2, Tag3" />
        </div>

        <!-- Custom Inline Suggestions -->
        <div class="col-md-6">
          <label class="form-label">Custom Inline Suggestions</label>
          <input class="form-control"
                 placeholder="select technologies"
                 value="css, html, javascript" />
        </div>

        <!-- Custom List Suggestions -->
        <div class="col-md-6">
          <label class="form-label">Custom List Suggestions</label>
          <input class="form-control"
                 placeholder="select technologies"
                 value="css, html, php" />
        </div>

        <!-- Users List -->
        <div class="col-md-6">
          <label class="form-label">Users List</label>
          <input class="form-control"
                 value="abatisse2@nih.gov, Justinian Hattersley" />
        </div>

        <!-- Email -->
        <div class="col-md-6">
          <label class="form-label d-block">Email List</label>
          <input class="tagify-email-list"
                 value="some56.name@website.com" />
          <button type="button"
                  class="btn btn-sm rounded-pill btn-icon btn-outline-primary">
            <i class="bx bx-plus"></i>
          </button>
        </div>

      </div>
    </div>
  </div>
</div>
<!-- /Tagify -->

Bootstrap Select

Basic

Multiple

Live Search

Select / Deselect All


<!-- Bootstrap Select -->
<div class="col-12">
  <div class="card">
    <h5 class="card-header">Bootstrap Select</h5>
    <div class="card-body">
      <div class="row g-6">

        <!-- Basic -->
        <div class="col-md-6">
          <label class="form-label">Basic</label>
          <select class="selectpicker w-100" data-style="btn-default">
            <option>Rocky</option>
            <option>Pulp Fiction</option>
            <option>The Godfather</option>
          </select>
        </div>

        <!-- Multiple -->
        <div class="col-md-6">
          <label class="form-label">Multiple</label>
          <select class="selectpicker w-100" data-style="btn-default" multiple
                  data-icon-base="icon-base bx" data-tick-icon="bx-check text-primary">
            <option>Rocky</option>
            <option>Pulp Fiction</option>
            <option>The Godfather</option>
          </select>
        </div>

        <!-- Live Search -->
        <div class="col-md-6">
          <label class="form-label">Live Search</label>
          <select class="selectpicker w-100" data-style="btn-default" data-live-search="true">
            <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
            <option data-tokens="mustard">Burger, Shake and a Smile</option>
            <option data-tokens="frosting">Sugar, Spice and all things nice</option>
          </select>
        </div>

        <!-- Select / Deselect All -->
        <div class="col-md-6">
          <label class="form-label">Select / Deselect All</label>
          <select class="selectpicker w-100" data-style="btn-default" multiple data-actions-box="true">
            <option>Rocky</option>
            <option>Pulp Fiction</option>
            <option>The Godfather</option>
          </select>
        </div>

      </div>
    </div>
  </div>
</div>
<!-- /Bootstrap Select -->

Flatpickr

Date Picker

Range Picker

Datetime Picker

Time Picker

<div class="row g-6">
    <!-- Date Picker-->
    <div class="col-md-6">
        <label for="flatpickr-friendly" class="form-label">Date Picker</label>
        <input type="text"
                class="form-control flatpickr-friendly"
                placeholder="15-Jan-2026">
    </div>
    <!-- /Date Picker-->
    <!-- Range Picker-->
    <div class="col-md-6">
        <label for="flatpickr-range" class="form-label">Range Picker</label>
        <input type="text"
                class="form-control flatpickr-range"
                placeholder="DD-MM-YYYY to DD-MM-YYYY" />
    </div>
    <!-- /Range Picker-->
    <!-- Datetime Picker-->
    <div class="col-md-6">
        <label for="flatpickr-datetime" class="form-label">Datetime Picker</label>
        <input type="text"
                class="form-control flatpickr-datetime"
                placeholder="DD-MM-YYYY HH:MM" />
    </div>
    <!-- /Datetime Picker-->
    <!-- Time Picker-->
    <div class="col-md-6">
        <label for="flatpickr-time" class="form-label">Time Picker</label>
        <input type="text" class="form-control flatpickr-time" placeholder="HH:MM"/>
    </div>
    <!-- /Time Picker -->
</div>

Alerts

This is a danger outline alert — check it out!

This is a dark outline alert — check it out!

This is a danger dismissible alert — check it out!

This is a dark dismissible alert — check it out!


<div class="row g-6 mb-6">
    <!-- Alerts -->
    <div class="col-md">
        <div class="card">
            <h5 class="card-header">Alerts</h5>
            <div class="card-body">

                <div class="alert alert-outline-danger" role="alert">
                    This is a danger outline alert — check it out!
                </div>

                <div class="alert alert-outline-dark" role="alert">
                    This is a dark outline alert — check it out!
                </div>

                <div class="alert alert-danger alert-dismissible" role="alert">
                    This is a danger dismissible alert — check it out!
                    <button type="button" class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>

                <div class="alert alert-dark alert-dismissible mb-0" role="alert">
                    This is a dark dismissible alert — check it out!
                    <button type="button" class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>

            </div>
        </div>
    </div>
    <!--/ Alerts -->
</div>

Breadcrumbs


<div class="col-lg-12">
  <div class="card">
    <h5 class="card-header">Breadcrumbs</h5>
    <div class="card-body">

      <!-- Basic Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>

      <!-- Custom Icon Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-custom-icon">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
            <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
            <i class="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>

      <!-- Custom Style Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
            <i class="breadcrumb-icon icon-base bx bx-chevron-down align-middle"></i>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>

    </div>
  </div>
</div>

Avatars

Sizes

Shapes

Avatar Group

Default

Pull Up with Tooltip

Avatar with count


<!-- Avatar Sizes -->
<h6 class="card-title">Sizes</h6>
<div class="d-flex align-items-center flex-wrap">
    <div class="avatar avatar-xs me-2">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm me-2">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
    </div>
    <div class="avatar me-2">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md me-2">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
    </div>
    <div class="avatar avatar-lg me-2">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
    </div>
    <div class="avatar avatar-xl">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
    </div>
</div>
<!-- Avatar Shapes -->
<h6 class="card-title">Shapes</h6>
<div class="d-flex align-items-center my-4">
    <div class="avatar me-2">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
    </div>
    <div class="avatar me-2">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" class="rounded" />
    </div>
    <div class="avatar">
        <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png" alt="Avatar" />
    </div>
</div>
<!-- Avatar Group -->
<h6 class="card-title">Avatar Group</h6>
<div class="row">
    <div class="col-md-4 col-sm-6">
        <small class="fw-medium">Default</small>
        <div class="d-flex align-items-center avatar-group my-4">
            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
            </div>
            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/12.png" alt="Avatar" class="rounded-circle" />
            </div>
            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
            </div>
            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/10.png" alt="Avatar" class="rounded-circle" />
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6">
        <small class="fw-medium">Pull Up with Tooltip</small>
        <ul class="list-unstyled m-0 d-flex align-items-center avatar-group my-4">
            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
                <img class="rounded-circle" src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/5.png" alt="Avatar" />
            </li>
            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
                <img class="rounded-circle" src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/12.png" alt="Avatar" />
            </li>
            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
                <img class="rounded-circle" src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/6.png" alt="Avatar" />
            </li>
            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner" class="avatar pull-up">
                <img class="rounded-circle" src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/10.png" alt="Avatar" />
            </li>
        </ul>
    </div>
    <div class="col-md-4 col-sm-6">
        <small class="fw-medium">Avatar with count </small>
        <div class="d-flex align-items-center avatar-group my-4">
            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/5.png" alt="Avatar" class="rounded-circle pull-up" />
            </div>
            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/12.png" alt="Avatar" class="rounded-circle pull-up" />
            </div>
            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/6.png" alt="Avatar" class="rounded-circle pull-up" />
            </div>
            <div class="avatar">
                <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
            </div>
        </div>
    </div>
</div>

Tooltips & Popovers

Tooltips


<div class="small fw-medium">Tooltips</div>
<div class="row demo-vertical-spacing">
    <div class="col">
        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-offset="0,6" data-bs-placement="right" data-bs-html="true" title="<i class='icon-base bx bx-trending-up icon-xs' ></i> <span>Tooltip on right</span>">
            Right
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-offset="0,6" data-bs-placement="top" data-bs-html="true" title="<i class='icon-base bx bx-bell icon-xs' ></i> <span>Tooltip on top</span>">
            Top
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-offset="0,6" data-bs-placement="bottom" data-bs-html="true" title="<i class='icon-base bx bx-heart icon-xs' ></i> <span>Tooltip on bottom</span>">
            Bottom
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-offset="0,6" data-bs-placement="left" data-bs-html="true" title="<i class='icon-base bx bx-dollar icon-xs' ></i> <span>Tooltip on left</span>">
            Left
        </button>
    </div>
</div>

SweetAlert2


// Success
Swal.fire({
    title: 'Good job!',
    text: 'You clicked the button!',
    icon: 'success',
    customClass: {
        confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
});

// Info
Swal.fire({
    title: 'Info!',
    text: 'You clicked the button!',
    icon: 'info',
    customClass: {
        confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
});

// Warning
Swal.fire({
    title: 'Warning!',
    text: 'You clicked the button!',
    icon: 'warning',
    customClass: {
        confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
});

// Error
Swal.fire({
    title: 'Error!',
    text: 'You clicked the button!',
    icon: 'error',
    customClass: {
        confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
});

// Question
Swal.fire({
    title: 'Question!',
    text: 'You clicked the button!',
    icon: 'question',
    customClass: {
        confirmButton: 'btn btn-primary'
    },
    buttonsStyling: false
});

// Auto Close
let timerInterval;
Swal.fire({
    title: 'Auto close alert!',
    html: 'I will close in <b></b> milliseconds.',
    timer: 2000,
    timerProgressBar: true,
    didOpen: () => {
        Swal.showLoading();
        const b = Swal.getHtmlContainer().querySelector('b');
        timerInterval = setInterval(() => {
            b.textContent = Swal.getTimerLeft();
        }, 100);
    },
    willClose: () => {
        clearInterval(timerInterval);
    }
});

// Confirm Color
Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!',
    customClass: {
        confirmButton: 'btn btn-primary me-3',
        cancelButton: 'btn btn-label-secondary'
    },
    buttonsStyling: false
}).then(function (result) {
    if (result.value) {
        Swal.fire({
            icon: 'success',
            title: 'Deleted!',
            text: 'Your file has been deleted.',
            customClass: {
                confirmButton: 'btn btn-success'
            }
        });
    }
});

Toastr


// Success
toastr.success('This is a success message!', 'Success');

// Info
toastr.info('This is an info message!', 'Info');

// Warning
toastr.warning('This is a warning message!', 'Warning');

// Error
toastr.error('This is an error message!', 'Error');

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

Congratulation Lettie 🎉

Charles Franklin

New Message ✉️

Whoo! You have new order 🛒

Application has been approved 🚀

Monthly report is generated

Send connection request

New message from Jane

CPU is running high

John Doe

Buttons

Inputs & Labels

Selection Controls

Other Inputs

File Upload

Basic File Upload

Multiple File Upload

Standard File Inputs

Accordion

Accordion Item 1

Accordion Item 2

Accordion Item 3

Badges

Dropdowns

Modals

Offcanvas

Tabs & Pills

Select2

Tagify

Bootstrap Select

Flatpickr

Alerts

Breadcrumbs

Avatars

Sizes

Shapes

Avatar Group

Tooltips & Popovers

SweetAlert2

Toastr

Offcanvas End

Offcanvas Top