Colors
Buttons
Badges
Alerts
Inputs
Select2
Forms
Modals
Tooltips
Progress Bars
Spinners
Cards
Accordion
Tabs
Table
SweetAlert
Fancybox
Datepicker
Brand Colors
Primary Palette
Primary
#199bd7
Dark
#1580b3
Mid
#4db5e3
Light
#80ccec
Pale
#cceaf7
Bootstrap Semantic Colors
Primary
.bg-primary
Secondary
.bg-secondary
Success
.bg-success
Danger
.bg-danger
Warning
.bg-warning
Info
.bg-info
Light
.bg-light
Dark
.bg-dark
Text & Background Utilities
text-primary
text-success
text-danger
text-warning
text-info
text-muted
bg-primary 10%
bg-success 10%
bg-danger 10%
Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill Primary
99+
New
Pending
Alerts
This is a primary alert with icon.
Changes saved successfully!
Warning! Please review before continuing.
Error! Something went wrong. Please try again.
This alert can be dismissed — click the X.
Inputs & Form Controls
Looks good!
Please provide a valid value.
€
.00
@
Select2 Dropdowns
Auto-initialize: Bas
.select-2 class lagao —
panel.js
automatically Select2 initialize kar deta hai Bootstrap 5 theme ke saath.
<select class="select-2" data-placeholder="Select...">
Single selection with search
Multiple tags with search
Grouped options
Admin pre-selected
Disabled state
Bootstrap native select
Forms
Login Form
Form with Validation
Modals
Tooltips & Popovers
Bootstrap Tooltips
Tippy.js
Popovers
Progress Bars
Primary
60%
Success
80%
Warning
45%
Danger
25%
Info
70%
Striped Animated
Multi-color Stacked
Animated Demo
0%
Spinners & Loaders
Border Spinners
Grow Spinners
Sizes
Inside Buttons
Full Page Overlay
Cards
Featured
Card with a colored header and footer.
John Doe
Product Designer
Total Orders
1,240
+12% this month
Revenue
€48,290
↑ 8.5% this week
Active Users
3,812
↑ 5.3% today
Open Tickets
42
↓ 3 since yesterday
Task Progress
In ProgressWebsite redesign milestone Q2 2026.
65% complete13/20 tasks
Monthly Target
€95,000
78% achieved — €74,100 / €95,000
Accordion
Bootstrap 5 is the latest version of
the
popular CSS framework. It dropped jQuery as a dependency, improved
utilities,
added RTL support, and introduced new components like offcanvas and
modals
enhancements.
Add class
select-2 to
any
<select> element. panel.js auto-initializes it with Bootstrap 5
theme and
full search functionality. Supports single, multiple, and grouped
options.Use
swalWithBootstrapButtons.fire({...}) for styled alerts. The
swalWithBootstrapButtons mixin is defined in panel.js and
applies
Bootstrap button styles automatically.
Use
data-fancybox="gallery" on
anchor tags for image galleries. For inline HTML popups use
Fancybox.show([{ src: '#id', type: 'inline' }]). Bind:
Fancybox.bind('[data-fancybox]').
Tabs & Pills
Overview content — general summary of the selected item.
Details panel — specific information, specs, or logs.
Settings panel — configure preferences and options.
Showing all records.
Showing only active records.
Showing archived records.
Tables
User List
| # | Name | Role | Status | Progress | Actions | |
|---|---|---|---|---|---|---|
| 1 |
A
Alice Johnson
|
Admin | Active |
90%
|
|
|
| 2 |
B
Bob Smith
|
Editor | Pending |
55%
|
|
|
| 3 |
C
Carol White
|
Viewer | Inactive |
20%
|
|
|
| 4 |
D
David Brown
|
Editor | Active |
75%
|
|
|
| 5 |
E
Eve Davis
|
Admin | Review |
40%
|
|
Showing 1–5 of 24 records
SweetAlert2 (swalWithBootstrapButtons)
panel.js mein defined:
swalWithBootstrapButtons —
Bootstrap 5 styled buttons, custom animations. Swal.fire() directly
use mat
karo.
Fancybox — Image Gallery & Popups
Image Gallery (click any image)
AJAX File Popup Recommended
panel.js pattern:
data-popup-ajax attribute lagao
—
Fancybox automatically AJAX se page load karta hai.data-src="controller/method" — relative URL dena hai.
Inline HTML Popup