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.
5 components ready for production use with full documentation
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.
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.
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.
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
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.
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.
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);
}