A comprehensive collection of advanced Bootstrap 5.3 components and enhancements built with modern JavaScript, providing production-ready solutions for common web development needs.
This project extends Bootstrap 5.3.8 with custom components that maintain full compatibility with Bootstrap's design system while adding powerful functionality. All components are built using object-oriented JavaScript with customizable JSON configurations, following Bootstrap's conventions and accessibility standards.
11 components ready for production use with full documentation
Vanilla JavaScript drop-in replacement for jQuery ajaxForm()
Pure JavaScript form submission handler with file upload support (including multiple files) and real-time progress tracking. No jQuery dependency.
Advanced data tables without jQuery - sorting, filtering, pagination, and inline editing
A lightweight yet powerful data table implementation that rivals DataTables functionality with pure vanilla JavaScript. Features global search, column-specific filtering, sortable columns, customizable pagination, and built-in row editing capabilities.
Customizable rich text editor with full Bootstrap 5.3 integration
A fully-featured, modular WYSIWYG editor built with vanilla JavaScript. Provides rich text editing, media support, autosave, and advanced security features with seamless Bootstrap integration.
Automatically adjusts textarea height based on content
Smart textarea component that dynamically resizes as users type, providing a better user experience for content input. Features smooth animations, configurable constraints, and full Bootstrap integration.
Modern Bootstrap 5.3+ modal dialogs without jQuery
Vanilla JavaScript replacement for Bootbox providing alert, confirm, and prompt dialogs with extensive customization. Features multiple input types, validation, localization support, and seamless Bootstrap theming integration.
Advanced toast notification system with dynamic creation and queue management
Comprehensive toast notification system that extends Bootstrap's native toasts with dynamic creation, intelligent queueing, multiple positioning options, and advanced interaction features.
Real-time input formatting with pattern validation
Powerful input masking component that formats user input in real-time with customizable patterns, built-in presets for common formats, and comprehensive validation features.
Lightweight image lightbox with gallery support
Feature-rich yet lightweight image lightbox component with gallery support, zoom functionality, and mobile-friendly touch interactions for showcasing images.
Feature-rich right-click context menus with submenu support
Flexible context menu component that supports right-click, click, and hover triggers. Features nested submenus, dynamic content generation, conditional rendering, and seamless Bootstrap 5.3 integration with dark mode support.
Advanced multi-selection dropdown with search and grouping
Sophisticated multi-select dropdown component with search functionality, option grouping, custom rendering, and extensive customization options for complex selection interfaces.
Enhanced file upload with visual previews and validation
Comprehensive file upload enhancement that provides visual previews for images and videos, file validation, and management capabilities with full Bootstrap integration.
Advanced user behavior tracking and analytics
Comprehensive behavior tracking system that monitors user interactions, form engagement, and page analytics with built-in bot detection and human verification capabilities.
Bootstrap-compatible multi-level dropdown navigation
Needs to enable a auto placement to move the menu back in the viewport if screen resolution is small.
Advanced dropdown component that extends Bootstrap's dropdown with multi-level navigation support, responsive behavior, and intelligent positioning.
Interactive user onboarding and feature tours
Comprehensive onboarding tour system with multi-page support, form integration, and customizable styling to guide users through applications and features.
Client-side rate limiting for API calls
Client-side rate limiting system with queue management, backoff strategies, and priority handling for API calls and form submissions.
Advanced image lightbox with zoom and slideshow
Feature-rich image lightbox with advanced zoom functionality, slideshow capabilities, and extensive customization options.
ComponentName/
├── README.md
├── Example.html
├── js/
│ └── ComponentName.js
├── scss/
│ └── _component.scss
└── ExampleJS/
└── demo.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
<!-- Component CSS -->
<link href="ComponentName/scss/_component.css" rel="stylesheet">
<!-- Component JavaScript -->
<script src="ComponentName/js/ComponentName.js"></script>
// Basic initialization
const component = new ComponentName('#element');
// With custom options
const component = new ComponentName('#element', {
option1: 'value1',
option2: true,
callbacks: {
onEvent: (data) => console.log(data)
}
});
All components follow a consistent configuration pattern with JSON options, making them easy to customize and integrate.
{
enabled: true,
theme: 'default',
callbacks: {
onInit: null
}
}
Components seamlessly integrate with Bootstrap's theming system:
Create custom themes by overriding CSS variables:
:root {
--bs-primary: #your-color;
--bs-secondary: #your-color;
--component-bg: var(--bs-body-bg);
--component-border: var(--bs-border-color);
}