# BootstrapPlanet > Free Bootstrap 5, React + shadcn/ui and Angular + Bootstrap UI components with copy-paste code. 200+ components, live previews, tutorials and framework comparisons. No signup needed. ## About BootstrapPlanet is a free UI component library covering Bootstrap 5, React 19 + Tailwind CSS + shadcn/ui, and Angular 22 + Bootstrap 5. Built by Gagan Singh, Founder of LettStart Design (lettstartdesign.com). - Site: https://bootstrapplanet.com - Templates: https://lettstartdesign.com (use code FIRST30 for 30% off) - Frameworks covered: Bootstrap 5.3.3, Angular 22, React 19, Next.js 15, Tailwind CSS 4, shadcn/ui - Total pages: 180 - Updated: June 2026 ## Bootstrap 5 Components (80 pages) Free Bootstrap 5 component examples with live preview and copy-paste HTML code. Categories: Navigation, Cards, Forms, Tables, Modals, Layout, Buttons, Misc. - Listing: https://bootstrapplanet.com/components - [Bootstrap 5 Accordion Example](https://bootstrapplanet.com/components/bootstrap-5-accordion-example): 4 Bootstrap 5 accordion examples with live preview and copy-paste code. Basic, flush, always open and icon accordion. - [Bootstrap 5 Alert Example](https://bootstrapplanet.com/components/bootstrap-5-alert-example): 4 Bootstrap 5 alert examples with live preview and copy-paste code. Basic alerts, dismissible alerts, alerts with icons and custom styled alerts. - [Bootstrap 5 Avatar Component](https://bootstrapplanet.com/components/bootstrap-5-avatar): 4 Bootstrap 5 avatar examples with live preview. Initials avatar, image avatar, avatar group stack and avatar with status badge. - [Bootstrap 5 Badge Example](https://bootstrapplanet.com/components/bootstrap-5-badge-example): 4 Bootstrap 5 badge examples with live preview and copy-paste code. Basic badges, pill badges, button badges and positioned notification badges. - [Bootstrap 5 Blog Card](https://bootstrapplanet.com/components/bootstrap-5-blog-card): 4 Bootstrap 5 blog card examples with live preview and copy-paste code. Basic blog card, horizontal blog card, blog grid and featured post card. - [Bootstrap 5 Breadcrumb Example](https://bootstrapplanet.com/components/bootstrap-5-breadcrumb-example): 4 Bootstrap 5 breadcrumb examples with live preview and copy-paste code. Basic breadcrumb, custom dividers, breadcrumb with icons and styled breadcrumbs. - [Bootstrap 5 Button Group](https://bootstrapplanet.com/components/bootstrap-5-button-group): 4 Bootstrap 5 button group examples with live preview and copy-paste code. Basic group, toolbar, vertical group and radio/checkbox button groups. - [Bootstrap 5 Button Styles](https://bootstrapplanet.com/components/bootstrap-5-button-styles): 5 Bootstrap 5 button examples with live preview and copy-paste code. All variants, sizes, states, outline buttons and icon buttons. - [Bootstrap 5 Card Example](https://bootstrapplanet.com/components/bootstrap-5-card-example): 8 Bootstrap 5 card examples with live preview and copy-paste code. Basic card, card with image, pricing card, profile card, product card, blog card, hover effect and horizontal card. - [Bootstrap 5 Card Hover Effect](https://bootstrapplanet.com/components/bootstrap-5-card-hover-effect): 4 Bootstrap 5 card hover effect examples with live preview and copy-paste code. Lift effect, border color change, image zoom and overlay reveal on hover. - [Bootstrap 5 Carousel Example](https://bootstrapplanet.com/components/bootstrap-5-carousel-example): 4 Bootstrap 5 carousel examples with live preview and copy-paste code. Basic image carousel, card carousel, fade carousel and auto-play carousel. - [Bootstrap 5 Chart Card](https://bootstrapplanet.com/components/bootstrap-5-chart-card): 4 Bootstrap 5 chart card examples using Chart.js. Line chart card, bar chart card, doughnut chart card and mini sparkline stat cards. - [Bootstrap 5 Checkbox Example](https://bootstrapplanet.com/components/bootstrap-5-checkbox-example): 4 Bootstrap 5 checkbox and radio button examples with live preview and copy-paste code. Basic checkboxes, inline checkboxes, radio buttons and toggle switches. - [Bootstrap 5 Collapse Example](https://bootstrapplanet.com/components/bootstrap-5-collapse-example): 4 Bootstrap 5 collapse examples with live preview and copy-paste code. Basic collapse, multi-target collapse, accordion-style collapse and animated collapse card. - [Bootstrap 5 Command Menu](https://bootstrapplanet.com/components/bootstrap-5-command-menu): 3 Bootstrap 5 command menu and quick search examples. Spotlight-style search, command palette with keyboard shortcuts and filtered quick navigation. - [Bootstrap 5 Contact Form](https://bootstrapplanet.com/components/bootstrap-5-contact-form): 4 Bootstrap 5 contact form examples with live preview and copy-paste code. Basic, card, with map sidebar and floating label contact forms. - [Bootstrap 5 Cookie Consent Banner](https://bootstrapplanet.com/components/bootstrap-5-cookie-consent): 4 Bootstrap 5 cookie consent banner examples. Bottom bar, floating card, modal dialog and granular consent with accept/reject options — all GDPR-style. - [Bootstrap 5 Copy to Clipboard Button](https://bootstrapplanet.com/components/bootstrap-5-copy-to-clipboard): 4 Bootstrap 5 copy to clipboard examples. Basic copy button, copy code block, copy URL share button and copy with toast confirmation. - [Bootstrap 5 Dark Mode Toggle](https://bootstrapplanet.com/components/bootstrap-5-dark-mode-toggle): 4 Bootstrap 5 dark mode toggle examples. Button toggle, switch toggle, navbar toggle with localStorage persistence and auto system preference detection. - [Bootstrap 5 Dashboard Layout](https://bootstrapplanet.com/components/bootstrap-5-dashboard-layout): 4 Bootstrap 5 dashboard layout examples with live preview. Sidebar + content, dark sidebar, collapsible sidebar and top navigation dashboard layout. - [Bootstrap 5 Data Table](https://bootstrapplanet.com/components/bootstrap-5-data-table): 4 Bootstrap 5 data table examples with live preview and copy-paste code. Sortable table, table with search, paginated table and table with actions. - [Bootstrap 5 Dropdown Example](https://bootstrapplanet.com/components/bootstrap-5-dropdown-example): 4 Bootstrap 5 dropdown examples with live preview and copy-paste code. Basic dropdown, split button dropdown, dropdown directions and dropdown with icons. - [Bootstrap 5 Empty State](https://bootstrapplanet.com/components/bootstrap-5-empty-state): 4 Bootstrap 5 empty state examples. Basic no-data state, search no results, first-time onboarding and error state — all with icons and CTA buttons. - [Bootstrap 5 File Upload Input](https://bootstrapplanet.com/components/bootstrap-5-file-upload-input): 4 Bootstrap 5 file upload examples with live preview and copy-paste code. Basic file input, multiple files, drag and drop zone and file upload with preview. - [Bootstrap 5 Flexbox Example](https://bootstrapplanet.com/components/bootstrap-5-flexbox-example): 4 Bootstrap 5 flexbox utility examples with live preview and copy-paste code. Flex direction, alignment, justify content and flex wrapping patterns. - [Bootstrap 5 Floating Label Form](https://bootstrapplanet.com/components/bootstrap-5-floating-label-form): 4 Bootstrap 5 floating label form examples. Basic floating labels, floating label with validation, floating label select and full login form with floating labels. - [Bootstrap 5 Footer Example](https://bootstrapplanet.com/components/bootstrap-5-footer-example): 5 Bootstrap 5 footer examples with live preview and copy-paste code. Basic, multi-column, dark, minimal and sticky footer layouts. - [Bootstrap 5 Form Validation](https://bootstrapplanet.com/components/bootstrap-5-form-validation): 4 Bootstrap 5 form validation examples with live preview and copy-paste code. Browser validation, custom validation, inline errors and real-time validation. - [Bootstrap 5 Grid System Example](https://bootstrapplanet.com/components/bootstrap-5-grid-system-example): 5 Bootstrap 5 grid system examples with live preview and copy-paste code. Basic grid, responsive columns, auto layout, nesting and offset columns. - [Bootstrap 5 Hero Section](https://bootstrapplanet.com/components/bootstrap-5-hero-section): 5 Bootstrap 5 hero section examples with live preview and copy-paste code. Basic, gradient, image background, split screen and video hero sections. - [Bootstrap 5 Horizontal Card](https://bootstrapplanet.com/components/bootstrap-5-horizontal-card): 4 Bootstrap 5 horizontal card examples with live preview and copy-paste code. Basic horizontal card, media object, horizontal product and horizontal profile. - [Bootstrap 5 Icon Button](https://bootstrapplanet.com/components/bootstrap-5-icon-button): 4 Bootstrap 5 icon button examples with live preview and copy-paste code. Icon-only buttons, buttons with text and icons, social buttons and floating action buttons. - [Bootstrap 5 Image Gallery](https://bootstrapplanet.com/components/bootstrap-5-image-gallery): 4 Bootstrap 5 image gallery examples with live preview and copy-paste code. Grid gallery, masonry gallery, hover overlay gallery and lightbox gallery. - [Bootstrap 5 Input Group](https://bootstrapplanet.com/components/bootstrap-5-input-group): 4 Bootstrap 5 input group examples with live preview and copy-paste code. Text addons, button addons, icon addons and segmented input groups. - [Bootstrap 5 Kanban Board](https://bootstrapplanet.com/components/bootstrap-5-kanban-board): 3 Bootstrap 5 kanban board examples. Basic kanban columns, draggable kanban board with drag-and-drop and compact task kanban. - [Bootstrap 5 List Group](https://bootstrapplanet.com/components/bootstrap-5-list-group): 4 Bootstrap 5 list group examples with live preview and copy-paste code. Basic list group, list group with badges, linked list group and list group tabs. - [Bootstrap 5 Login Form](https://bootstrapplanet.com/components/bootstrap-5-login-form): 5 Bootstrap 5 login form examples with live preview and copy-paste code. Basic, card, split screen, social login and floating label login forms. - [Bootstrap 5 Login Page — 4 Complete Examples](https://bootstrapplanet.com/components/bootstrap-5-login-page): 4 Bootstrap 5 login page examples with live preview. Basic login, split layout, dark login and social login — all with form validation and copy-paste HTML. - [Bootstrap 5 Masonry Layout](https://bootstrapplanet.com/components/bootstrap-5-masonry-layout): 4 Bootstrap 5 masonry layout examples with live preview and copy-paste code. CSS columns masonry, Bootstrap masonry, card masonry and Pinterest-style grid. - [Bootstrap 5 Mega Menu](https://bootstrapplanet.com/components/bootstrap-5-mega-menu): 4 Bootstrap 5 mega menu examples with live preview and copy-paste code. Multi-column mega menu, mega menu with icons, full-width mega menu and hover mega menu. - [Bootstrap 5 Modal Example](https://bootstrapplanet.com/components/bootstrap-5-modal-example): 6 Bootstrap 5 modal examples with live preview and copy-paste code. Basic, form, confirmation, fullscreen, sized and scrollable modals. - [Bootstrap 5 Multi-Step Form](https://bootstrapplanet.com/components/bootstrap-5-multi-step-form): 4 Bootstrap 5 multi-step form examples with live preview. Progress steps wizard, tab-style stepper, card stepper and vertical step form. - [Bootstrap 5 Navbar Example](https://bootstrapplanet.com/components/bootstrap-5-navbar-example): 10 Bootstrap 5 navbar examples with live preview and copy-paste code. Basic, sticky, dark, dropdown, logo, search bar and more. - [Bootstrap 5 Fixed Top Navbar](https://bootstrapplanet.com/components/bootstrap-5-navbar-fixed-top): 4 Bootstrap 5 fixed-top navbar examples with live preview and copy-paste code. fixed-top navbar, fixed-bottom navbar, shrink on scroll and hide on scroll down. - [Bootstrap 5 Navbar with Search](https://bootstrapplanet.com/components/bootstrap-5-navbar-search): 4 Bootstrap 5 navbar with search examples. Inline search, expanding search, search with autocomplete suggestions and full-width search overlay. - [Bootstrap 5 Navbar with Dropdown](https://bootstrapplanet.com/components/bootstrap-5-navbar-with-dropdown): 5 Bootstrap 5 navbar dropdown examples with live preview and copy-paste code. Single dropdown, multi-level, mega menu, dropdown with icons and dropdown with dividers. - [Bootstrap 5 Navbar with Logo](https://bootstrapplanet.com/components/bootstrap-5-navbar-with-logo): 4 Bootstrap 5 navbar with logo examples. Image logo, SVG logo, text+icon logo and full branding navbar with tagline. - [Bootstrap 5 Notification Bell Dropdown](https://bootstrapplanet.com/components/bootstrap-5-notification-bell): 4 Bootstrap 5 notification bell dropdown examples. Basic notification list, grouped notifications, mark-all-read and dark notification panel. - [Bootstrap 5 Off-Canvas Sidebar](https://bootstrapplanet.com/components/bootstrap-5-off-canvas-sidebar): 4 Bootstrap 5 off-canvas examples with live preview and copy-paste code. Basic off-canvas, dark off-canvas, off-canvas with nav menu and off-canvas from top/bottom. - [Bootstrap 5 Off-Canvas Top and Bottom](https://bootstrapplanet.com/components/bootstrap-5-offcanvas-top-bottom): 4 Bootstrap 5 off-canvas examples sliding from top and bottom. Cookie banner, search overlay, mobile filter drawer and notification tray. - [Bootstrap 5 Pagination Example](https://bootstrapplanet.com/components/bootstrap-5-pagination-example): 4 Bootstrap 5 pagination examples with live preview and copy-paste code. Basic pagination, sized pagination, pill pagination and pagination with prev/next text. - [Bootstrap 5 Popover Example](https://bootstrapplanet.com/components/bootstrap-5-popover-example): 4 Bootstrap 5 popover examples with live preview and copy-paste code. Basic popovers, popovers on all sides, HTML popovers and custom styled popovers. - [Bootstrap 5 Pricing Card](https://bootstrapplanet.com/components/bootstrap-5-pricing-card): 4 Bootstrap 5 pricing card examples with live preview and copy-paste code. Basic pricing, featured plan, comparison table and toggle monthly/annual pricing. - [Bootstrap 5 Pricing Table](https://bootstrapplanet.com/components/bootstrap-5-pricing-table): 4 Bootstrap 5 pricing table examples. 3-column pricing, toggle monthly/yearly, dark pricing table and feature comparison table. - [Bootstrap 5 Product Card](https://bootstrapplanet.com/components/bootstrap-5-product-card): 4 Bootstrap 5 product card examples with live preview and copy-paste code. Basic product card, product with badge, product list view and product comparison card. - [Bootstrap 5 Profile Card](https://bootstrapplanet.com/components/bootstrap-5-profile-card): 4 Bootstrap 5 profile card examples with live preview and copy-paste code. Basic profile, team member card, social profile and horizontal profile card. - [Bootstrap 5 Progress Bar](https://bootstrapplanet.com/components/bootstrap-5-progress-bar): 4 Bootstrap 5 progress bar examples with live preview and copy-paste code. Basic, striped, animated and multi-bar progress bars. - [Bootstrap 5 Range Slider](https://bootstrapplanet.com/components/bootstrap-5-range-slider): 4 Bootstrap 5 range slider examples with live preview and copy-paste code. Basic range, range with value display, price range slider and custom styled range. - [Bootstrap 5 Rating Component](https://bootstrapplanet.com/components/bootstrap-5-rating): 4 Bootstrap 5 rating component examples. Star rating display, interactive star rating, product review rating and rating with count breakdown. - [Bootstrap 5 Registration Form](https://bootstrapplanet.com/components/bootstrap-5-registration-form): 4 Bootstrap 5 registration form examples with live preview and copy-paste code. Basic, card, multi-step and social registration forms. - [Bootstrap 5 Responsive Table](https://bootstrapplanet.com/components/bootstrap-5-responsive-table): 4 Bootstrap 5 responsive table examples with live preview and copy-paste code. Horizontal scroll, column priority, responsive breakpoints and card view on mobile. - [Bootstrap 5 Scroll to Top Button](https://bootstrapplanet.com/components/bootstrap-5-scroll-to-top): 4 Bootstrap 5 scroll to top button examples. Fixed round button, smooth scroll progress button, side bar scroll indicator and reading progress bar. - [Bootstrap 5 Search Form](https://bootstrapplanet.com/components/bootstrap-5-search-form): 4 Bootstrap 5 search form examples with live preview and copy-paste code. Basic search, search with filter, search bar with autocomplete and full-width search. - [Bootstrap 5 Select Dropdown](https://bootstrapplanet.com/components/bootstrap-5-select-dropdown): 4 Bootstrap 5 select dropdown examples with live preview and copy-paste code. Basic select, multiple select, select with optgroups and custom styled select. - [Bootstrap 5 Sidebar Navigation](https://bootstrapplanet.com/components/bootstrap-5-sidebar-navigation): 4 Bootstrap 5 sidebar navigation examples with live preview and copy-paste code. Basic sidebar, dark sidebar, collapsible sidebar and dashboard sidebar with icons. - [Bootstrap 5 Skeleton Loader](https://bootstrapplanet.com/components/bootstrap-5-skeleton-loader): 4 Bootstrap 5 skeleton loading examples. Card skeleton, table skeleton, profile skeleton and dashboard skeleton — using Bootstrap's built-in placeholder utilities. - [Bootstrap 5 Sortable Table](https://bootstrapplanet.com/components/bootstrap-5-sortable-table): 3 Bootstrap 5 sortable table examples. Click-to-sort table, sortable with icons and sortable with search filter — all in vanilla JavaScript. - [Bootstrap 5 Spinner Loading](https://bootstrapplanet.com/components/bootstrap-5-spinner-loading): 4 Bootstrap 5 spinner examples with live preview and copy-paste code. Border spinner, grow spinner, colored spinners and button loading states. - [Bootstrap 5 Stat Card](https://bootstrapplanet.com/components/bootstrap-5-stat-card): 4 Bootstrap 5 stat card examples for dashboards. Basic metric card, trend indicator card, icon stat card and horizontal stat row. - [Bootstrap 5 Stepper Component](https://bootstrapplanet.com/components/bootstrap-5-stepper): 4 Bootstrap 5 stepper examples. Horizontal stepper, vertical stepper, numbered stepper and icon stepper — all with active state and completed state styling. - [Bootstrap 5 Sticky Navbar](https://bootstrapplanet.com/components/bootstrap-5-sticky-navbar): 4 Bootstrap 5 sticky navbar examples with live preview and copy-paste code. sticky-top navbar, fixed-top navbar, shrink on scroll and transparent to solid navbar. - [Bootstrap 5 Dark Table](https://bootstrapplanet.com/components/bootstrap-5-table-dark): 4 Bootstrap 5 dark table examples with live preview. Full dark table, dark header only, custom dark table and dark table with badges. - [Bootstrap 5 Table Example](https://bootstrapplanet.com/components/bootstrap-5-table-example): 6 Bootstrap 5 table examples with live preview and copy-paste code. Basic, striped, bordered, hover, dark and responsive tables. - [Bootstrap 5 Tabs Example](https://bootstrapplanet.com/components/bootstrap-5-tabs-example): 4 Bootstrap 5 tabs examples with live preview and copy-paste code. Basic tabs, pill tabs, vertical tabs and icon tabs. - [Bootstrap 5 Three Column Layout](https://bootstrapplanet.com/components/bootstrap-5-three-column-layout): 4 Bootstrap 5 three column layout examples. Equal thirds, sidebar + main + sidebar, content + two sidebars and responsive three column grid. - [Bootstrap 5 Timeline](https://bootstrapplanet.com/components/bootstrap-5-timeline): 4 Bootstrap 5 timeline examples with live preview. Vertical activity timeline, left-aligned timeline, alternating timeline and horizontal timeline. - [Bootstrap 5 Toast Notification](https://bootstrapplanet.com/components/bootstrap-5-toast-notification): 4 Bootstrap 5 toast notification examples with live preview and copy-paste code. Basic toast, colored toasts, toast with progress bar and toast stack. - [Bootstrap 5 Tooltip Example](https://bootstrapplanet.com/components/bootstrap-5-tooltip-example): 4 Bootstrap 5 tooltip examples with live preview and copy-paste code. Basic tooltips, tooltips on all sides, HTML tooltips and custom styled tooltips. - [Bootstrap 5 Two Column Layout](https://bootstrapplanet.com/components/bootstrap-5-two-column-layout): 4 Bootstrap 5 two column layout examples with live preview and copy-paste code. Equal columns, sidebar layout, content-heavy and sticky sidebar layouts. - [Bootstrap 5 User Menu Dropdown](https://bootstrapplanet.com/components/bootstrap-5-user-menu): 4 Bootstrap 5 user menu dropdown examples. Basic user menu, dark user menu, avatar with dropdown, and full account panel dropdown. ## Angular + Bootstrap 5 Components (16 pages) Angular 22 standalone components styled with Bootstrap 5. Covers signals, reactive forms, routing, HttpClient and more. The Angular + Bootstrap combination most other sites have abandoned — which is exactly why this content ranks. - Listing: https://bootstrapplanet.com/angular - [Angular 21 + Bootstrap 5 Navbar Component — The Right Way](https://bootstrapplanet.com/angular/angular-21-bootstrap-5-navbar-component): How to build a proper Angular 21 navbar with Bootstrap 5. Covers standalone components, active route detection, mobile toggle and dark mode — with real working code. - [Angular 22 — Key Features and What's New](https://bootstrapplanet.com/tutorials/angular-22-new-features-tutorial): Complete guide to Angular 22's new features: OnPush by default, Signal Forms stable, resource() and httpResource() stable, @Service decorator, injectAsync, WebMCP and router improvements. - [Angular 21 Bootstrap 5 Accordion Component](https://bootstrapplanet.com/angular/angular-bootstrap-accordion): Build a reusable Angular 21 accordion with Bootstrap 5. FAQ accordion, always-open mode, programmatic control and animated transitions. - [Angular Bootstrap 5 Breadcrumb Component](https://bootstrapplanet.com/angular/angular-bootstrap-breadcrumb): Build a reusable Angular 22 breadcrumb component with Bootstrap 5. Covers router-linked breadcrumbs, dynamic breadcrumbs from route data, custom separators and truncated breadcrumbs. - [Angular Bootstrap 5 Card Component — Reusable with @Input](https://bootstrapplanet.com/angular/angular-bootstrap-card-component): How to build a reusable Bootstrap 5 card component in Angular 21 with @Input props. Covers basic card, stat card, profile card and card grid with proper TypeScript typing. - [Angular Bootstrap 5 Dark Theme — Using Signals](https://bootstrapplanet.com/angular/angular-bootstrap-dark-theme): How to implement dark mode in an Angular 21 + Bootstrap 5 app using Angular signals and localStorage persistence. Clean service-based approach. - [Angular Bootstrap 5 Data Table — Sort, Filter, Paginate](https://bootstrapplanet.com/angular/angular-bootstrap-data-table): How to build a feature-rich data table in Angular 21 with Bootstrap 5. Covers sorting, client-side filtering, pagination and column management with Angular signals. - [Angular Bootstrap 5 Form Validation — Reactive Forms Guide](https://bootstrapplanet.com/angular/angular-bootstrap-form-validation): How to implement form validation in Angular 21 with Bootstrap 5 styling. Covers reactive forms, custom validators, async validation and Bootstrap's is-invalid classes. - [Angular Bootstrap 5 Hero Section Component](https://bootstrapplanet.com/angular/angular-bootstrap-hero-section): Build reusable Angular 22 hero section components with Bootstrap 5. Covers centered hero, split layout, gradient background, video background and animated hero with signals. - [Angular 21 Bootstrap 5 Login Page](https://bootstrapplanet.com/angular/angular-bootstrap-login-page): Build a complete Angular 21 login page with Bootstrap 5. Reactive forms, validation, password toggle, loading state and JWT auth pattern included. - [Angular Bootstrap 5 Modal — The Right Way](https://bootstrapplanet.com/angular/angular-bootstrap-modal-example): How to use Bootstrap 5 modals in Angular 21. Covers opening modals with a service, passing data, form inside modal, confirmation dialog and avoiding change detection issues. - [Angular Bootstrap 5 Pricing Table Component](https://bootstrapplanet.com/angular/angular-bootstrap-pricing-table): Build a reusable Angular 22 pricing table with Bootstrap 5. Covers basic pricing cards, highlighted plan, billing toggle with signals, and a feature comparison table. - [Angular 21 Bootstrap 5 Progress Bar Component](https://bootstrapplanet.com/angular/angular-bootstrap-progress-bar): Build reusable Angular 21 progress bar components with Bootstrap 5. Covers animated progress, skill bars, multi-step wizard progress and signal-driven updates. - [Angular 21 Bootstrap 5 Sidebar Component](https://bootstrapplanet.com/angular/angular-bootstrap-sidebar-component): Build a responsive Angular 21 sidebar with Bootstrap 5. Covers collapsible menu, active route detection, icon-only mode and mobile off-canvas sidebar. - [Angular Bootstrap 5 Stats Dashboard Component](https://bootstrapplanet.com/angular/angular-bootstrap-stats-dashboard): Build a reusable Angular 22 stats dashboard with Bootstrap 5. Covers stat cards with signals, sparkline charts, revenue chart with Chart.js and a complete dashboard layout. - [Angular Bootstrap 5 Tabs Component](https://bootstrapplanet.com/angular/angular-bootstrap-tabs): Build reusable Angular 22 tab components with Bootstrap 5. Covers basic tabs, router-linked tabs, dynamic tab generation, vertical tabs and tabs with lazy-loaded content. - [Angular 21 Bootstrap 5 Toast Notifications](https://bootstrapplanet.com/angular/angular-bootstrap-toast-notification): Build a reusable Angular 21 toast notification service using Bootstrap 5 toasts. Covers success, error, warning and info toasts with auto-dismiss and a global toast container. ## React Components (16 pages) React 19 components built with Tailwind CSS 4 and shadcn/ui. Copy-paste JSX code with live examples. - Listing: https://bootstrapplanet.com/react - [React Accordion Component — shadcn/ui + Tailwind CSS](https://bootstrapplanet.com/react/react-accordion-component): 4 React accordion examples using shadcn/ui. Basic FAQ accordion, always-open accordion, nested accordion and custom styled accordion. - [React Badge Component — shadcn/ui + Tailwind CSS](https://bootstrapplanet.com/react/react-badge-component): 4 React badge examples using shadcn/ui and Tailwind CSS. Status badges, notification counts, tag badges and icon badges with all variants. - [React Button Component — shadcn/ui + Tailwind CSS](https://bootstrapplanet.com/react/react-button-component): React button examples using shadcn/ui and Tailwind CSS. All variants, sizes, states, icon buttons and loading buttons with copy-paste JSX code. - [React Card Component — Tailwind CSS + shadcn/ui](https://bootstrapplanet.com/react/react-card-component): 5 React card examples using shadcn/ui and Tailwind CSS. Basic card, profile card, stats card, pricing card and interactive hover card. - [React Data Table — TanStack Table + shadcn/ui + Tailwind](https://bootstrapplanet.com/react/react-data-table): Feature-rich React data table using TanStack Table v8 and shadcn/ui. Covers sorting, filtering, pagination, column visibility and row selection. - [React Dropdown Component — Tailwind CSS + shadcn/ui](https://bootstrapplanet.com/react/react-dropdown-component): 5 React dropdown examples using shadcn/ui and Tailwind CSS. Basic dropdown, user menu, multi-level, command palette and context menu. - [React Form Validation — React Hook Form + Zod + shadcn/ui](https://bootstrapplanet.com/react/react-form-validation): 5 React form validation examples using React Hook Form, Zod and shadcn/ui. Login form, registration form, multi-step form, inline validation and async validation. - [React Input Component — shadcn/ui + Tailwind CSS](https://bootstrapplanet.com/react/react-input-component): 4 React input field examples using shadcn/ui and Tailwind CSS. Input with icons, input with addons, floating label input and OTP/PIN input. - [React Login Form — shadcn/ui + Tailwind CSS + react-hook-form](https://bootstrapplanet.com/react/react-login-form): 4 React login form examples using shadcn/ui, Tailwind CSS and react-hook-form with zod validation. Basic, card, social login and split layout. - [React Modal Dialog — shadcn/ui + Tailwind CSS](https://bootstrapplanet.com/react/react-modal-dialog): 4 React modal examples using shadcn/ui Dialog. Basic modal, form modal, confirmation dialog and full-screen modal with copy-paste JSX code. - [React Navbar Component — Tailwind CSS + shadcn/ui](https://bootstrapplanet.com/react/react-navbar-component): 5 React navbar examples with Tailwind CSS and shadcn/ui. Basic navbar, dark navbar, navbar with dropdown, mobile menu and sticky transparent navbar. - [React Pricing Card Component — Tailwind CSS + shadcn/ui](https://bootstrapplanet.com/react/react-pricing-card): 5 React pricing card examples using shadcn/ui and Tailwind CSS. Basic pricing, highlighted plan, billing toggle, comparison table and dark pricing card. - [React Profile Card Component — Tailwind CSS + shadcn/ui](https://bootstrapplanet.com/react/react-profile-card): 5 React profile card examples using shadcn/ui and Tailwind CSS. Basic profile, team member card, stats card, horizontal card and editable profile card. - [React Sidebar Navigation — Tailwind CSS + shadcn/ui](https://bootstrapplanet.com/react/react-sidebar-navigation): 4 React sidebar navigation examples using Tailwind CSS and shadcn/ui. Collapsible sidebar, icon-only sidebar, dark sidebar and mobile-responsive sidebar with Sheet. - [React Tabs Component — Tailwind CSS + shadcn/ui](https://bootstrapplanet.com/react/react-tabs-component): 5 React tab examples using shadcn/ui and Tailwind CSS. Basic tabs, vertical tabs, icon tabs, scrollable tabs and tabs with content panels. - [React Toast Notification — shadcn/ui Sonner + Tailwind CSS](https://bootstrapplanet.com/react/react-toast-notification): 4 React toast notification examples using shadcn/ui Sonner. Success, error, promise and custom toasts with auto-dismiss and positioning options. ## Tutorials (42 pages) Step-by-step guides covering Bootstrap 5, Angular 22, React 19, Next.js 15 and Tailwind CSS. Written by developers, for developers. - Listing: https://bootstrapplanet.com/tutorials - [Angular 21 Standalone Components — Complete Guide](https://bootstrapplanet.com/tutorials/angular-21-standalone-components-tutorial): How Angular 21 standalone components work. Drop NgModules, use imports directly in the component decorator, and migrate existing code — with practical examples. - [Angular 22 to Angular 22 Migration Guide — Step by Step](https://bootstrapplanet.com/tutorials/angular-21-to-22-migration-guide): Complete Angular 22 to Angular 22 upgrade guide. Run the CLI migration, fix breaking changes — ComponentFactoryResolver, provideRoutes, CanMatchFn, data-* bindings, HTTP fetch default — and verify your app works. - [Angular HttpClient Tutorial — HTTP Requests, Interceptors & Error Handling](https://bootstrapplanet.com/tutorials/angular-http-client-tutorial): Complete Angular HttpClient guide. GET, POST, PUT, DELETE requests, typed responses, interceptors, error handling, loading state, and cancellation with signals. - [Angular Reactive Forms Tutorial — FormBuilder, Validators & Dynamic Forms](https://bootstrapplanet.com/tutorials/angular-reactive-forms-tutorial): Complete Angular reactive forms guide. FormBuilder, FormGroup, FormArray, built-in validators, custom validators and dynamic form fields — with Bootstrap 5 styling. - [Angular Routing Tutorial — Routes, Guards, Lazy Loading & Route Params](https://bootstrapplanet.com/tutorials/angular-routing-tutorial): Complete Angular routing guide for Angular 21. Define routes, navigate programmatically, use route params, lazy load modules, and protect routes with guards. - [Angular Signals Tutorial — Reactive State Without RxJS](https://bootstrapplanet.com/tutorials/angular-signals-tutorial): Learn Angular signals from scratch. signal(), computed(), effect(), input signals, and when to use signals vs RxJS observables — with practical examples. - [Bootstrap 5 Accessibility Guide — Building Accessible Bootstrap Sites](https://bootstrapplanet.com/tutorials/bootstrap-5-accessibility-guide): Complete accessibility guide for Bootstrap 5. ARIA attributes, keyboard navigation, screen reader support, color contrast and accessible components — with code examples. - [Bootstrap 5 Accordion Tutorial — Complete Guide](https://bootstrapplanet.com/tutorials/bootstrap-5-accordion-tutorial): Master Bootstrap 5 accordions. Basic accordion, always-open accordion, flush accordion, custom styled accordion and accordion with icons — full code examples. - [Bootstrap 5 Best Practices — Write Better Bootstrap Code](https://bootstrapplanet.com/tutorials/bootstrap-5-best-practices): 10 Bootstrap 5 best practices from a developer who has shipped dozens of projects. Covers performance, accessibility, customization and code organization. - [Bootstrap 5 Card Tutorial — Complete Guide with Examples](https://bootstrapplanet.com/tutorials/bootstrap-5-card-tutorial): Master Bootstrap 5 cards. Card anatomy, image cards, horizontal cards, card groups, card grids, hover effects and custom card patterns — with full code. - [Bootstrap 5 CDN Link — The Fastest Way to Add Bootstrap to Any Project](https://bootstrapplanet.com/tutorials/bootstrap-5-cdn-link): How to add Bootstrap 5 via CDN. The correct CSS and JS links for Bootstrap 5.3, what each link does and when to use CDN vs npm. - [Bootstrap 5 Color Utilities — Text, Background and Border Colors](https://bootstrapplanet.com/tutorials/bootstrap-5-color-utilities): Complete guide to Bootstrap 5 color utilities. Text colors, background colors, border colors, opacity modifiers and how to use Bootstrap 5.3 CSS variables for custom colors. - [How to Customize Bootstrap 5 with Sass Variables](https://bootstrapplanet.com/tutorials/bootstrap-5-custom-sass-variables): How to override Bootstrap 5 Sass variables to change colors, fonts, spacing and components. Step-by-step with Vite and webpack setups. - [Bootstrap 5 Dark Mode Tutorial — The Right Way](https://bootstrapplanet.com/tutorials/bootstrap-5-dark-mode-tutorial): How to implement dark mode in Bootstrap 5 using data-bs-theme. Covers toggle switch, localStorage persistence, system preference detection and custom colors. - [Bootstrap 5 Flexbox Tutorial — Complete Guide with Examples](https://bootstrapplanet.com/tutorials/bootstrap-5-flexbox-tutorial): Master Bootstrap 5 flexbox utilities. How to align, justify, wrap and order elements using Bootstrap's flex classes — with real examples for every utility. - [Bootstrap 5 Folder Structure — How to Organise a Bootstrap Project](https://bootstrapplanet.com/tutorials/bootstrap-5-folder-structure): Best practices for Bootstrap 5 project folder structure. Simple HTML projects, Vite + Sass projects and Angular + Bootstrap structure — with real examples. - [How to Use Font Awesome with Bootstrap 5](https://bootstrapplanet.com/tutorials/bootstrap-5-font-awesome-icons): Add Font Awesome icons to Bootstrap 5 using CDN or npm. Covers buttons, navbars, alerts and custom sizing with Bootstrap utilities. - [Bootstrap 5 Form Tutorial — Complete Guide](https://bootstrapplanet.com/tutorials/bootstrap-5-form-tutorial): Master Bootstrap 5 forms. Form controls, input groups, validation, select dropdowns, checkboxes, radio buttons, floating labels and form layouts — with full code examples. - [Bootstrap 5 Google Fonts — How to Add Custom Fonts](https://bootstrapplanet.com/tutorials/bootstrap-5-google-fonts): How to add Google Fonts to Bootstrap 5. CDN link method, self-hosted fonts, Sass variable override and which fonts pair best with Bootstrap's design system. - [Bootstrap 5 Grid System Tutorial — Everything You Need to Know](https://bootstrapplanet.com/tutorials/bootstrap-5-grid-system-tutorial): Complete Bootstrap 5 grid tutorial. Covers the 12-column system, breakpoints, nesting, offset, auto layout and real-world layout patterns with examples. - [Bootstrap 5 Landing Page Tutorial — Build a Complete Landing Page](https://bootstrapplanet.com/tutorials/bootstrap-5-landing-page-tutorial): Build a complete Bootstrap 5 landing page from scratch. Hero section, features grid, pricing, testimonials and footer — full HTML with copy-paste code. - [Bootstrap 5 Login Page Tutorial — Build It From Scratch](https://bootstrapplanet.com/tutorials/bootstrap-5-login-page-tutorial): How to build a clean Bootstrap 5 login page with form validation, remember me and social login buttons. Full HTML code included. - [Bootstrap 5 Modal Tutorial — Everything You Need to Know](https://bootstrapplanet.com/tutorials/bootstrap-5-modal-tutorial): Complete Bootstrap 5 modal guide. Covers basic usage, JavaScript API, form inside modal, confirmation dialog, events and common gotchas. - [Bootstrap 5 Responsive Breakpoints — Complete Guide](https://bootstrapplanet.com/tutorials/bootstrap-5-responsive-breakpoints): Master Bootstrap 5's responsive breakpoints. All 6 breakpoints, how to use them, mobile-first logic and real examples for grids, utilities and navbar. - [Bootstrap 5 SEO Tips — How to Make Bootstrap Sites Rank Better](https://bootstrapplanet.com/tutorials/bootstrap-5-seo-tips): Practical SEO tips for Bootstrap 5 websites. Semantic HTML, image optimization, Core Web Vitals, schema markup and common Bootstrap SEO mistakes to avoid. - [Bootstrap 5 Table Tutorial — Complete Guide with Examples](https://bootstrapplanet.com/tutorials/bootstrap-5-table-tutorial): Master Bootstrap 5 tables. Striped tables, hover rows, bordered, dark table, responsive tables, sortable and how to style tables for admin dashboards. - [Bootstrap 5 Typography Tutorial — Headings, Text and Font Utilities](https://bootstrapplanet.com/tutorials/bootstrap-5-typography-tutorial): Complete Bootstrap 5 typography guide. Heading classes, display headings, text utilities, font weight, line height, truncation and how to use Google Fonts with Bootstrap. - [Bootstrap 5 with JavaScript — Using the Bootstrap JS API](https://bootstrapplanet.com/tutorials/bootstrap-5-with-javascript): How to use Bootstrap 5 JavaScript programmatically. Initialize components, call methods, listen to events and use the data API vs the JS API — with full examples. - [Bootstrap 5 with React — How to Use Bootstrap in a React Project](https://bootstrapplanet.com/tutorials/bootstrap-5-with-react): How to add Bootstrap 5 to a React project. Import CSS, use classes in JSX, react-bootstrap library, Bootstrap + Tailwind together and when to use each approach. - [Bootstrap 5 with Vite — Complete Setup Guide (2026)](https://bootstrapplanet.com/tutorials/bootstrap-5-with-vite): Set up Bootstrap 5 with Vite from scratch. Covers CSS import, Sass customization, JavaScript components and hot module replacement. - [How to Build an Admin Dashboard with Bootstrap 5 — Step by Step](https://bootstrapplanet.com/tutorials/how-to-build-admin-dashboard-bootstrap-5): Build a complete admin dashboard with Bootstrap 5 from scratch. Covers sidebar navigation, stats cards, data tables, charts and responsive layout — with full HTML code. - [How to Center a Div in Bootstrap 5 — Every Method](https://bootstrapplanet.com/tutorials/how-to-center-div-bootstrap-5): All ways to center a div in Bootstrap 5. Horizontal centering, vertical centering, center in viewport and center within a card — with copy-paste code. - [How to Create a Responsive Navbar in Bootstrap 5](https://bootstrapplanet.com/tutorials/how-to-create-responsive-navbar-bootstrap-5): Step-by-step guide to building a responsive Bootstrap 5 navbar from scratch. Covers collapse, active states, dropdowns, sticky positioning and mobile toggle. - [How to Create a Sidebar in Bootstrap 5](https://bootstrapplanet.com/tutorials/how-to-create-sidebar-bootstrap-5): Build a Bootstrap 5 sidebar from scratch. Fixed sidebar, collapsible sidebar, responsive off-canvas sidebar for mobile — complete HTML and CSS code. - [How to Install Bootstrap 5 — 4 Ways (CDN, npm, Sass, Vite)](https://bootstrapplanet.com/tutorials/how-to-install-bootstrap-5): Learn how to install Bootstrap 5 using CDN, npm, Sass customization or Vite. Step-by-step guide with working code examples for beginners and advanced developers. - [How to Make a Sticky Navbar in Bootstrap 5](https://bootstrapplanet.com/tutorials/how-to-make-sticky-navbar-bootstrap-5): 3 ways to create a sticky navbar in Bootstrap 5. sticky-top vs fixed-top, shrink on scroll with JavaScript and auto-hide on scroll down — with full code. - [Next.js 15 App Router Tutorial — Server Components, Layouts & Data Fetching](https://bootstrapplanet.com/tutorials/nextjs-app-router-tutorial): Complete Next.js 15 App Router guide. Server vs client components, layouts, nested routes, data fetching, metadata API, and static vs dynamic rendering. - [React Context API Tutorial — Global State Without Redux](https://bootstrapplanet.com/tutorials/react-context-api-tutorial): How to use React Context for global state. Create context, useContext hook, combining with useReducer, when Context is the wrong tool, and performance tips. - [React Custom Hooks Tutorial — Build Reusable Logic with Hooks](https://bootstrapplanet.com/tutorials/react-custom-hooks-tutorial): How to build React custom hooks. useDebounce, useLocalStorage, useFetch, useMediaQuery, useOnClickOutside — practical examples you can copy into any project. - [React Hooks Tutorial — useState, useEffect, useMemo, useCallback & More](https://bootstrapplanet.com/tutorials/react-hooks-tutorial): Complete React hooks guide with practical examples. useState, useEffect, useRef, useMemo, useCallback, useContext — when to use each and common mistakes to avoid. - [React Server Components Tutorial — RSC Mental Model & Data Fetching](https://bootstrapplanet.com/tutorials/react-server-components-tutorial): Understand React Server Components from scratch. How RSC works, server vs client components, data fetching patterns, serialization rules and common mistakes. ## Framework & Library Comparisons (20 pages) Honest, opinionated comparisons between frameworks, UI libraries, CSS tools and developer tooling. - Listing: https://bootstrapplanet.com/vs - [Angular 21 vs React 19 — An Honest Comparison for 2026](https://bootstrapplanet.com/vs/angular-21-vs-react-19): Angular 21 vs React 19 compared honestly by a developer who has shipped both. Covers learning curve, performance, ecosystem, job market and when to use each. - [Angular Material vs Bootstrap — Which to Use for Angular Apps in 2026](https://bootstrapplanet.com/vs/angular-material-vs-bootstrap): Honest comparison of Angular Material and Bootstrap for Angular projects. Covers design systems, components, customization, bundle size and when to use each. - [Bootstrap 5 Grid vs CSS Grid — When to Use Each](https://bootstrapplanet.com/vs/bootstrap-5-grid-vs-css-grid): Comparing Bootstrap 5's 12-column grid with native CSS Grid. When Bootstrap wins, when CSS Grid wins, and why they're not actually competing. - [Bootstrap 5 Utility Classes vs Custom CSS — When to Use Each](https://bootstrapplanet.com/vs/bootstrap-5-utility-classes-vs-custom-css): Should you use Bootstrap 5 utility classes or write custom CSS? An honest breakdown of when utilities are enough and when custom CSS is the right call. - [Bootstrap 5 vs Bootstrap 4 — What Actually Changed](https://bootstrapplanet.com/vs/bootstrap-5-vs-bootstrap-4): Everything that changed from Bootstrap 4 to Bootstrap 5. jQuery removal, new utilities, grid updates, forms overhaul, RTL support and what got removed. - [Bootstrap 5 vs Bulma — Which CSS Framework to Use in 2026](https://bootstrapplanet.com/vs/bootstrap-5-vs-bulma): Bootstrap 5 vs Bulma honestly compared. Flexbox-only Bulma vs Bootstrap's complete ecosystem — who wins and for which projects. - [Bootstrap 5 vs Foundation — Is Foundation Still Worth Using in 2026?](https://bootstrapplanet.com/vs/bootstrap-5-vs-foundation): Bootstrap 5 vs Foundation CSS framework honestly compared. Community, components, customization and the real reason most developers stopped using Foundation. - [Bootstrap 5 vs Materialize CSS — Material Design vs Bootstrap in 2026](https://bootstrapplanet.com/vs/bootstrap-5-vs-materialize-css): Bootstrap 5 vs Materialize CSS honestly compared. Who still uses Materialize, what Bootstrap does better and whether Material Design on the web still makes sense. - [Bootstrap 5 vs Semantic UI — Is Semantic UI Still Relevant in 2026?](https://bootstrapplanet.com/vs/bootstrap-5-vs-semantic-ui): Bootstrap 5 vs Semantic UI compared. What made Semantic UI interesting, why it fell behind and whether Fomantic UI is a viable alternative today. - [Bootstrap 5 vs Tailwind CSS — An Honest Comparison (2026)](https://bootstrapplanet.com/vs/bootstrap-5-vs-tailwind-css): Bootstrap 5 vs Tailwind CSS compared honestly. Which is better for your project? Covers learning curve, bundle size, customization, component support and when to use each. - [Bootstrap Icons vs Font Awesome — Which Icon Library for Bootstrap 5](https://bootstrapplanet.com/vs/bootstrap-icons-vs-font-awesome): Bootstrap Icons vs Font Awesome honestly compared for Bootstrap 5 projects. Coverage, quality, free tier limitations and which one to actually use. - [Free Bootstrap Templates vs Paid — When Free Is Enough and When to Pay](https://bootstrapplanet.com/vs/free-bootstrap-templates-vs-paid): Honest comparison of free vs paid Bootstrap templates. What you actually get for the money, when free templates work fine and when paying is worth it. - [Next.js vs Angular — For Building Web Applications in 2026](https://bootstrapplanet.com/vs/next-js-vs-angular): Next.js vs Angular compared honestly. Different tools solving different problems — covers SSR, developer experience, use cases and which to choose for your project. - [ng-bootstrap vs ngx-bootstrap — Which to Use in 2026](https://bootstrapplanet.com/vs/ng-bootstrap-vs-ngx-bootstrap): Honest comparison of ng-bootstrap and ngx-bootstrap for Angular projects. Covers API differences, Angular version support, bundle size and which to use in 2026. - [react-bootstrap vs reactstrap — Which Bootstrap React Library in 2026](https://bootstrapplanet.com/vs/react-bootstrap-vs-reactstrap): Honest comparison of react-bootstrap and reactstrap for React projects. API quality, maintenance, bundle size and which one to actually use in 2026. - [react-hook-form vs Formik — Which React Form Library in 2026](https://bootstrapplanet.com/vs/react-hook-form-vs-formik): react-hook-form vs Formik honestly compared. Performance, API design, zod integration and which one to use for React forms in 2026. - [shadcn/ui vs Chakra UI — Which React Component Library in 2026](https://bootstrapplanet.com/vs/shadcn-ui-vs-chakra-ui): Honest comparison of shadcn/ui and Chakra UI for React projects. Ownership model, styling approach, component coverage, customization and which to use in 2026. - [Tailwind CSS vs CSS Modules — Which Styling Approach for React in 2026](https://bootstrapplanet.com/vs/tailwind-css-vs-css-modules): Tailwind CSS vs CSS Modules compared for React projects. When utility classes make sense, when scoped CSS wins and how they fit into modern React development. - [TanStack Table vs AG Grid — Which React Data Table in 2026](https://bootstrapplanet.com/vs/tanstack-table-vs-ag-grid): TanStack Table vs AG Grid honestly compared for React projects. Bundle size, features, free tier limits and when each makes sense for your dashboard. - [Vite vs Webpack — Why Everyone Switched and When Webpack Still Wins](https://bootstrapplanet.com/vs/vite-vs-webpack): Vite vs Webpack honestly compared. Why Vite won the developer experience battle, what Webpack still does better and which to use for your project in 2026. ## Premium Templates Full admin dashboard templates built by the same team: - https://lettstartdesign.com — Angular 22 + Bootstrap 5 and React + Next.js admin templates - Use code FIRST30 for 30% off all templates ## Permissions All content on BootstrapPlanet is free to read, reference and use in your projects. Code examples are provided as-is under a permissive use policy.