A comprehensive collection of advanced Bootstrap 5.3 components and enhancements built with modern JavaScript, providing production-ready solutions for common web development needs.
| Component | Demo | Documentation |
|---|---|---|
| JSON Table | 🎯 Demo | 📖 README |
| YoBox | 🎯 Demo | 📖 README |
| Auto Textarea | 🎯 Demo | 📖 README |
| Input Mask | 🎯 Demo | 📖 README |
| Multi Select | 🎯 Demo | 📖 README |
| File Upload Preview | 🎯 Demo | 📖 README |
| WYSIWYG Editor | 🎯 Demo | 📖 README |
| Toast Alerts | 🎯 Demo | 📖 README |
| Simple Lightbox | 🎯 Demo | 📖 README |
| Context Menu | 🎯 Demo | 📖 README |
| Component | Demo | Documentation |
|---|---|---|
| Human Verified | 🎯 Demo | 📖 README |
| Behavior Tracker | 🎯 Demo | 📖 README |
| Multi Level Dropdown | 🎯 Demo | 📖 README |
| Onboarding Tour | 🎯 Demo | 📖 README |
| Component | Demo | Documentation |
|---|---|---|
| Rate Limiter | 🎯 Demo | 📖 README |
| Image Lightbox | 🎯 Demo | 📖 README |
This project extends Bootstrap 5.3.7 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.
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. Less than 600 lines of code with zero dependencies beyond Bootstrap.
- Key Features: JSON data loading, global/column search, custom sort functions, inline editing, dynamic pagination, rows per page selector
- Use Cases: Admin panels, data dashboards, reporting interfaces, content management, user directories
- Special Features: Floating labels in edit modals, toast notifications, event system for all actions, custom sort functions for dates/currency
- 📖 Documentation | 🎯 Demo
Modern Bootstrap modal dialogs - a vanilla JS replacement for Bootbox
Pure JavaScript modal dialog system that provides alert, confirm, and prompt dialogs using Bootstrap 5.3 modals. No jQuery dependency, fully customizable with support for dynamic content, custom buttons, and internationalization. Perfect drop-in replacement for Bootbox with a cleaner API.
- Key Features: Alert/confirm/prompt dialogs, custom buttons, nested modals, i18n support, promise-based API, various input types
- Use Cases: User confirmations, form prompts, notifications, interactive dialogs, input collection
- Input Types: text, textarea, email, number, password, select, checkbox, radio
- 📖 Documentation | 🎯 Demo
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 with support for reduced motion preferences.
- Key Features: Auto-resizing, min/max height limits, smooth animations, form validation integration, scroll threshold management
- Use Cases: Message forms, comment boxes, content management systems, feedback forms
- Accessibility: Respects prefers-reduced-motion, high contrast mode support, proper ARIA attributes
- 📖 Documentation | 🎯 Demo
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. Includes Luhn algorithm for credit card validation.
- Key Features: Real-time formatting, built-in patterns (phone, SSN, credit card, date, time), custom validation, Bootstrap integration
- Use Cases: Forms with formatted inputs, payment forms, contact information, data entry, international phone numbers
- Built-in Patterns: US/International phone, SSN, credit cards, dates, times, postal codes, IP addresses
- 📖 Documentation | 🎯 Demo
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. Supports virtual scrolling for large datasets.
- Key Features: Search filtering, option grouping, custom renderers, tag display, bulk operations, keyboard navigation
- Use Cases: Multi-choice forms, filter interfaces, user permissions, category selection, tag management
- Advanced Options: Maximum selections, sort selected to top, select all/none, disabled options
- 📖 Documentation | 🎯 Demo
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. Supports drag-and-drop, multiple files, and various display modes.
- Key Features: Visual previews, file validation, multiple display modes (list/grid), file management, type detection
- Use Cases: Media uploads, document management, profile pictures, content creation, gallery uploads
- Supported Types: Images (JPG, PNG, GIF, WebP), Videos (MP4, WebM, AVI), Documents (PDF, DOCX, XLSX), Archives
- 📖 Documentation | 🎯 Demo
Full-featured rich text editor with Bootstrap 5.3 integration
A fully-featured, modular WYSIWYG editor built with vanilla JavaScript. Includes text formatting, tables, media insertion, code view, fullscreen mode, autosave, and comprehensive HTML sanitization for security. Completely customizable toolbar.
- Key Features: Rich text formatting, table support, media insertion, autosave, code view, XSS prevention, undo/redo
- Use Cases: Content management, blog editors, messaging systems, form builders, documentation
- Security: XSS prevention, HTML sanitization, tag whitelisting, URL validation, safe paste handling
- 📖 Documentation | 🎯 Demo
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. Includes touch gestures and progress indicators.
- Key Features: Dynamic creation, priority queueing, 7 position options, touch gestures, progress indicators, keyboard navigation
- Use Cases: User notifications, status updates, feedback messages, alert systems, real-time updates
- Accessibility: WCAG 2.1 compliant, ARIA live regions, screen reader support, reduced motion support
- 📖 Documentation | 🎯 Demo
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. Clean, minimalist design that works on all devices.
- Key Features: Gallery support, zoom functionality, touch/swipe gestures, keyboard navigation, responsive design
- Use Cases: Image galleries, product showcases, portfolio displays, photo viewers, media presentations
- Interactions: Hover zoom preview, mouse wheel zoom, pinch-to-zoom, swipe navigation, keyboard shortcuts
- 📖 Documentation | 🎯 Demo
Feature-rich right-click context menus with submenu support
Flexible context menu component that supports right-click, click, and hover triggers. Includes nested submenus, dynamic content generation, conditional rendering, and element-specific data fetching for context-aware menus.
- Key Features: Multiple trigger events, nested submenus, dynamic items, conditional visibility, Font Awesome icons
- Use Cases: Data tables, file managers, admin interfaces, custom toolbars, interactive applications
- Advanced: Element-specific data, isShown/isEnabled callbacks, custom styling functions, multiple positioning
- 📖 Documentation | 🎯 Demo
Advanced bot detection and human verification for forms
Sophisticated form verification system that uses behavior analysis, typing patterns, mouse movements, and timing to distinguish humans from bots without requiring CAPTCHAs. Non-intrusive security layer.
- Key Features: Behavior tracking, typing pattern analysis, mouse movement detection, timing validation, bot fingerprinting
- Use Cases: Form security, bot prevention, signup protection, authentication, spam prevention
- Detection Methods: Typing rhythm, mouse trajectories, interaction timing, automation flags
- 📖 Documentation | 🎯 Demo
Comprehensive user behavior tracking and analytics
Advanced behavior tracking system that monitors user interactions, form engagement, and page analytics with built-in bot detection and human verification capabilities. Privacy-focused with configurable tracking levels.
- Key Features: Interaction tracking, form analytics, heatmap generation, engagement metrics, privacy controls
- Use Cases: User analytics, form optimization, UX research, conversion tracking, A/B testing
- Metrics: Click tracking, scroll depth, time on page, form field interactions, navigation patterns
- 📖 Documentation | 🎯 Demo
Bootstrap-compatible multi-level dropdown navigation
Advanced dropdown component that extends Bootstrap's dropdown with multi-level navigation support, responsive behavior, and intelligent positioning for complex menu structures. Handles hover and click triggers.
- Key Features: Nested menu levels, responsive collapse, hover/click triggers, smart positioning, mobile optimization
- Use Cases: Complex navigation menus, category trees, hierarchical data display, mega menus
- Responsive: Auto-collapses on mobile, adjusts direction based on viewport, handles nested levels gracefully
- 📖 Documentation | 🎯 Demo
Interactive user onboarding and feature tours
Comprehensive onboarding tour system with multi-page support, form integration, progress tracking, and customizable styling to guide users through applications and features. Remembers user progress.
- Key Features: Multi-page tours, form integration, progress indicators, responsive design, keyboard navigation, storage
- Use Cases: User onboarding, feature introduction, tutorial systems, guided workflows, product demos
- Integration: Form validation, multi-step processes, conditional steps, custom callbacks
- 📖 Documentation | 🎯 Demo
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. Prevents API abuse and manages request throttling.
- Status: Under development - API refinements and UI improvements needed
- Planned Features: Exponential backoff, request priority, queue visualization, metrics tracking
- 📖 Documentation | 🎯 Demo
Advanced image lightbox with zoom and slideshow
Feature-rich image lightbox with advanced zoom functionality, slideshow capabilities, thumbnail navigation, and extensive customization options. More advanced than Simple Lightbox.
- Status: Under development - performance optimizations and feature stabilization needed
- Planned Features: Advanced zoom controls, slideshow transitions, thumbnail strip, fullscreen mode
- 📖 Documentation | 🎯 Demo
- Tab Indentation: All code uses tabs for consistent formatting
- Object-Oriented Design: Clean class-based architecture with proper encapsulation
- JSON Configuration: Customizable options via JSON objects for easy integration
- Bootstrap Integration: Uses Bootstrap 5.3 CSS variables for seamless theming
- Accessibility First: WCAG 2.1 compliant with screen reader support
- Performance Optimized: Efficient DOM manipulation and event handling
- Vanilla JavaScript: No jQuery or other dependencies required
Each component follows a standardized directory structure:
ComponentName/
├── README.md # Complete documentation
├── Example.html # Bootstrap 5.3 dark mode demo
├── js/
│ └── ComponentName.js # Main component class
├── scss/
│ └── _component.scss # SCSS using Bootstrap variables
└── ExampleJS/
└── demo.js # Demo-specific functionality
- Include Bootstrap 5.3.7:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>- Include Component Files:
<!-- Component CSS -->
<link href="ComponentName/scss/_component.css" rel="stylesheet">
<!-- Component JavaScript -->
<script src="ComponentName/js/ComponentName.js"></script>- Initialize Component:
// 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:
const component = new ComponentName(selector, {
// Core options
enabled: true,
theme: 'default',
// Feature toggles
feature1: true,
feature2: false,
// Customization
customClass: '',
customTemplate: null,
// Event callbacks
callbacks: {
onInit: null,
onChange: null,
onDestroy: null
}
});Components seamlessly integrate with Bootstrap's theming system:
- CSS Variables: All styling uses Bootstrap's CSS custom properties
- Dark Mode: Full support for Bootstrap's dark mode via
data-bs-theme - Color System: Consistent with Bootstrap's color palette
- Responsive: Built with Bootstrap's responsive breakpoints
Create custom themes by overriding CSS variables:
:root {
--bs-primary: #your-color;
--bs-secondary: #your-color;
/* Component-specific variables */
--component-bg: var(--bs-body-bg);
--component-border: var(--bs-border-color);
}
[data-bs-theme="dark"] {
--component-bg: var(--bs-dark);
}- WCAG 2.1 AA: All components meet accessibility guidelines
- Section 508: Government accessibility standards
- ARIA Support: Proper ARIA labels, roles, and states
- Keyboard Navigation: Full keyboard accessibility
- Screen reader announcements via ARIA live regions
- High contrast mode support
- Reduced motion preferences (
prefers-reduced-motion) - Focus management and visible focus indicators
- Semantic HTML structure
- Proper tab order and focus trapping
- Chrome: 60+
- Firefox: 55+
- Safari: 12+
- Edge: 79+
- iOS Safari: 12+
- Android Chrome: 60+
Modern browser with ES6+ support required.
Each component includes comprehensive documentation:
- Getting Started: Quick setup guide
- Configuration Options: All available options with detailed descriptions
- API Reference: Methods, events, and properties
- Usage Examples: Common use cases and patterns
- Accessibility: Accessibility features and considerations
- Browser Support: Compatibility information
All components follow these standards:
- Tab Indentation: Consistent 4-space tab indentation
- OOP Principles: Encapsulation, inheritance, polymorphism
- JSDoc Comments: Comprehensive code documentation
- Bootstrap Conventions: Follows Bootstrap's naming patterns
- ES6+ Syntax: Modern JavaScript features
-
Code Standards:
- Use tab indentation
- Follow OOP principles
- Use Bootstrap 5.3 conventions
- Add JSDoc comments
-
Testing:
- Test in all supported browsers
- Validate accessibility compliance
- Test with keyboard navigation
- Test dark mode compatibility
-
Documentation:
- Update README files
- Include usage examples
- Document all configuration options
- Add inline code comments
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Follow the coding standards
- Add tests for new features
- Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is released under the MIT License. See LICENSE for details.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Performance: Further optimization for mobile devices
- Accessibility: Enhanced screen reader support and ARIA implementation
- Testing: Comprehensive automated testing suite
- Documentation: Interactive documentation site with live code examples
- TypeScript: TypeScript definitions for all components
- Internationalization: Multi-language support across all components
- Date Picker: Advanced date/time selection with range support
- Charts: Data visualization components using Chart.js
- Form Builder: Dynamic form generation with validation
- Kanban Board: Drag-and-drop task management
- Notification Center: Centralized notification management
| Category | Count | Percentage |
|---|---|---|
| Production Ready | 10 | 62.5% |
| Needs Testing | 4 | 25% |
| Needs Improvements | 2 | 12.5% |
| Total | 16 | 100% |
Built with ❤️ for the Bootstrap community