PVR Tech Studio

Taxi CRM 2026

Components

Reusable Bootstrap 5 UI blocks bundled with the template and where to find live examples.

2 min read

Updated June 20, 2026

Reusable UI blocks. Each is standard Bootstrap 5 plus the kit's own classes, already styled by assets/css/style.css. A live example of every component lives on the page named in each heading — open it to see more variants.

Cards / panels (used everywhere)

The card/panel pattern wraps nearly every screen — see it live on any page, e.g. the Widgets gallery.

Each panel has a title and subtitle in its header, plus refresh/expand actions:

<div class="card panel-card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div>
      <h5 class="card-title">Role Master</h5>
      <p class="card-subtitle text-muted mb-0">Manage user roles and permissions</p>
    </div>
    <div class="panel-actions">
      <button class="btn btn-sm btn-icon panel-refresh" type="button" title="Refresh">
        <span class="material-symbols-sharp">refresh</span>
      </button>
      <button class="btn btn-sm btn-icon panel-expand" type="button" title="Expand">
        <span class="material-symbols-sharp">fullscreen</span>
      </button>
    </div>
  </div>
  <div class="card-body">
    <!-- content -->
  </div>
</div>

Buttons — `buttons.html`

↗ View live demo

<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-outline-primary" type="button">Outline</button>
<button class="btn btn-lg" type="button">Large</button>
<button class="btn btn-sm" type="button">Small</button>
<button class="btn btn-primary" type="button" disabled>Disabled</button>
 
<div class="btn-group" role="group" aria-label="Basic button group">
  <button class="btn btn-primary" type="button">Left</button>
  <button class="btn btn-primary" type="button">Middle</button>
  <button class="btn btn-primary" type="button">Right</button>
</div>

Colors: btn-primary / secondary / success / danger / warning / info / light / dark / link
Outline: btn-outline-* · Sizes: btn-lg, btn-sm · Icon-only: btn-icon
Groups: .btn-group, .btn-group-vertical

Spinner / loading buttons — `spinnerButtons.html`

↗ View live demo

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm me-2" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

Badges — `badges.html`

↗ View live demo

Use the kit's named colors (not Bootstrap's bg-*):

<span class="badge badge-green">Green</span>
<span class="badge badge-blue">Blue</span>
<span class="badge badge-yellow">Yellow</span>
<span class="badge badge-red">Red</span>
<span class="badge badge-purple">Purple</span>
<span class="badge badge-teal">Teal</span>
<span class="badge badge-orange">Orange</span>
 
<span class="badge badge-pill badge-blue">Pill</span>
<span class="badge badge-blue-light">Light</span>
<span class="badge badge-outline-blue">Outline</span>
<span class="badge badge-sm badge-blue">Small</span>
<span class="badge badge-lg badge-blue">Large</span>

Variants: badge-{color}, badge-{color}-light, badge-outline-{color}, badge-pill, badge-sm, badge-lg. Full palette and hex values in 07 — CSS system.

Alerts — `alerts.html`

↗ View live demo

<div class="alert alert-primary mb-0" role="alert">A simple primary alert—check it out!</div>
 
<div class="alert alert-success alert-icon mb-0" role="alert">
  <i class="fa-solid fa-circle-check"></i><span>Your changes have been saved!</span>
</div>
 
<div class="alert alert-success alert-dismissible fade show mb-0" role="alert">
  <i class="fa-solid fa-circle-check me-2"></i>Successfully submitted your form!
  <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Variants: Bootstrap alert-{primary…dark}, the kit's alert-{blue/purple/teal/orange/green/red}, alert-outline-*, alert-icon, and alert-dismissible (with a .btn-close).

Modals — `modals.html`

↗ View live demo

Trigger with data-bs-toggle="modal" + data-bs-target:

<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalDefault">Open</button>
 
<div class="modal fade" id="modalDefault" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">Body content…</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary" type="button">Save</button>
      </div>
    </div>
  </div>
</div>

Size/behavior modifiers on .modal-dialog: modal-sm, modal-lg, modal-xl, modal-fullscreen, modal-dialog-centered, modal-dialog-scrollable.

Dropdowns — `dropdowns.html`

↗ View live demo

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Directions: wrap in .dropup, .dropend, .dropstart. Split button: add a second toggle with .dropdown-toggle-split. Align the menu with .dropdown-menu-end.

Tabs & pills — `tabs.html`

↗ View live demo

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabHome" type="button" role="tab">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabProfile" type="button" role="tab">Profile</button>
  </li>
</ul>
<div class="tab-content pt-3">
  <div class="tab-pane fade show active" id="tabHome" role="tabpanel">Home content</div>
  <div class="tab-pane fade" id="tabProfile" role="tabpanel">Profile content</div>
</div>

Use .nav-pills + data-bs-toggle="pill" for pill-style tabs; add .flex-column for a vertical set.

Accordion — `accordion.html`

↗ View live demo

<div class="accordion" id="accordionBasic">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <span class="material-symbols-sharp">folder</span>
        <div class="accordion-title-wrap">
          <span class="accordion-title">Accordion Item #1</span>
          <span class="accordion-subtitle">Click to expand</span>
        </div>
        <span class="accordion-arrow"><span class="material-symbols-sharp">keyboard_arrow_down</span></span>
      </button>
    </h2>
    <div class="accordion-collapse collapse show" id="collapseOne" data-bs-parent="#accordionBasic">
      <div class="accordion-body"><p class="mb-0">Content…</p></div>
    </div>
  </div>
</div>

Add .accordion-flush to the wrapper for an edge-to-edge (borderless) accordion.

Carousel — `carousel.html`

↗ View live demo

<div class="carousel slide carousel-basic" id="carouselWithControls" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button class="active" type="button" data-bs-target="#carouselWithControls" data-bs-slide-to="0"></button>
    <button type="button" data-bs-target="#carouselWithControls" data-bs-slide-to="1"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active"> … </div>
    <div class="carousel-item"> … </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselWithControls" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Pagination — `pagination.html`

↗ View live demo

<nav aria-label="Pagination">
  <ul class="pagination mb-0">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item disabled"><a class="page-link" href="#" aria-disabled="true">Next</a></li>
  </ul>
</nav>

Sizes: .pagination-sm, .pagination-lg. States: .active, .disabled.

Progress bars — `progressBar.html`

↗ View live demo

<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 100%">Success</div>
</div>

Color the bar with bg-{primary/success/info/warning/danger}; add progress-bar-striped progress-bar-animated for the animated stripe.

Tree view — `treeView.html`

↗ View live demo

Uses the same accordion-style nav primitives as the sidebar:

<li class="nav-item nav-accordion">
  <span class="nav-link">
    <span class="make_icon material-symbols-sharp">database</span>
    <span class="nav-title">Masters</span>
    <span class="nav-arrow"></span>
  </span>
  <div class="nav-sub nav-sub-accordion">
    <a class="nav-link" href="#">Item 1</a>
    <a class="nav-link" href="#">Item 2</a>
  </div>
</li>

Typography — `typography.html`

↗ View live demo

<h1 class="display-1">Display 1</h1>
<p class="lead">Lead paragraph for emphasis.</p>
<small class="text-muted">Small muted text</small>

Headings h1–h6, display sizes display-1…display-6, helpers .lead, .text-{muted/primary/success/danger/warning/info}.

Icons

The kit uses two main icon sets (plus Simple Line Icons):

<!-- Google Material Symbols (preferred in this kit) -->
<span class="material-symbols-sharp">refresh</span>
<span class="material-symbols-sharp">home</span>
 
<!-- Font Awesome (loaded via the FA kit) -->
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-gear"></i>
 
<!-- Simple Line Icons -->
<i class="icon-settings"></i>

See materialIcons.html, fontAwesome.html, and simpleLineIcons.html for the full sets.

Toasts & SweetAlert (JavaScript-driven)

Toasts and confirmation dialogs are triggered from JavaScript, not static markup:

app.toast.success('Saved successfully');     // see toastNotifications.html
Swal.fire({ title: 'Delete?', icon: 'warning', showCancelButton: true });  // sweetAlerts.html

Toast helpers are documented in 08 — JavaScript; SweetAlert2 is bundled under assets/plugins/sweetalert2/.

Was this page helpful?

PreviousLayout NextForms

Components

Cards / panels (used everywhere)

Buttons — buttons.html

Spinner / loading buttons — spinnerButtons.html

Badges — badges.html

Alerts — alerts.html

Modals — modals.html

Dropdowns — dropdowns.html

Tabs & pills — tabs.html

Accordion — accordion.html

Carousel — carousel.html

Pagination — pagination.html

Progress bars — progressBar.html

Tree view — treeView.html

Typography — typography.html

Icons

Toasts & SweetAlert (JavaScript-driven)

Buttons — `buttons.html`

Spinner / loading buttons — `spinnerButtons.html`

Badges — `badges.html`

Alerts — `alerts.html`

Modals — `modals.html`

Dropdowns — `dropdowns.html`

Tabs & pills — `tabs.html`

Accordion — `accordion.html`

Carousel — `carousel.html`

Pagination — `pagination.html`

Progress bars — `progressBar.html`

Tree view — `treeView.html`

Typography — `typography.html`