The first batch of Bootstrap snippets covered the pages every site needs — navbar, hero, pricing, login, cart. This second batch goes one layer deeper, into the details that separate a snippet that looks right from one that actually behaves right: a kanban board using the browser's real HTML5 Drag and Drop API instead of a library, a data table that sorts a currency column by its raw number instead of its formatted string, and a toast notification system that remembers to clean up its own DOM nodes after itself. Every one still loads the genuine bootstrap.min.css and bootstrap.bundle.min.js from a CDN and builds on Bootstrap's real component classes and JavaScript API.
Every one is a live, interactive preview you can try right here in the article, and each exports to React, Vue, Angular or Tailwind in one click from its snippet page.
What these ten get right
- Native browser APIs before reaching for a library. The kanban board's drag-and-drop is the actual HTML5 Drag and Drop API —
draggable="true"plusdragstart/dragover/droplisteners — with the one line (e.preventDefault()insidedragover) that's easy to leave out and that silently breaks every drop if you do. - Sorting the real value, not the formatted text. The data table's columns each carry a
data-typeoftext,num, ordate, and a per-type getter reads each row's raw, unformatted data attribute before comparing — so sorting "Total spent" actually orders by the number, not by a currency string that would silently sort wrong. - State recalculated from the DOM, not tracked in a separate variable. The kanban board's per-column counts and the notification dropdown's unread badge are both recomputed by reading what's actually in the DOM after every change, rather than incrementing or decrementing a number that could drift from reality.
- Cleanup that actually happens. Bootstrap's Toast component hides a dismissed toast but never removes its element — this collection's toast stack listens for the real
hidden.bs.toastevent and removes the node only once the hide animation has genuinely finished, so triggering dozens of toasts in a session never leaks stale elements. - One Bootstrap instance, reused correctly. The lightbox gallery uses a single real Bootstrap modal for all six images, opened to whichever thumbnail was clicked via a shared index — not six separate modal elements — and the notification dropdown's
data-bs-auto-close="outside"keeps the panel open across several clicks instead of Bootstrap's default of closing it on the very first one.
1. Bootstrap Mega Menu Dropdown Navbar
A real Bootstrap navbar dropdown expanded into a full-width mega menu with grouped link columns and a promo panel — using Bootstrap's own Dropdown component, not a custom-built panel.
How it works: the dropdown itself is entirely Bootstrap's real Dropdown component via data-bs-toggle="dropdown" — genuine open/close and outside-click handling, no custom JavaScript duplicating it. The full-width panel is a single CSS trick: setting position: static on the parent list item removes the positioning context the dropdown menu would normally anchor to, freeing the absolutely-positioned .dropdown-menu to stretch left: 0; right: 0 against the whole navbar instead of Bootstrap's default narrow menu.
Best for: SaaS marketing sites whose "Products" or "Solutions" nav item has outgrown a simple dropdown list. Tip: the promo column is a ready-made spot to spotlight a new feature every time a visitor opens the menu — swap it out without touching the link columns.
Grab the code: Bootstrap Mega Menu Dropdown Navbar
2. Bootstrap Two-Factor Verification Code Form
A real Bootstrap six-box code entry with auto-advancing focus, backspace-to-previous navigation, and full-code paste support — the standard 2FA input pattern, built correctly.
How it works: typing a digit auto-advances focus to the next of the six real Bootstrap form-control boxes, and pressing Backspace on an empty box moves focus back to the previous one, so deleting feels continuous in either direction. The detail most six-box demos skip: a paste event listener intercepts a pasted code and distributes all six digits across the boxes at once, starting from the first box — the way a password manager or a copied SMS code actually arrives, instead of dumping the whole string into whichever single box happened to be focused.
Best for: any real two-factor authentication or one-time-password flow. Tip: the same auto-advance/backspace/paste pattern works for any fixed-length code — invite codes, coupon codes — not just 2FA.
Grab the code: Bootstrap Two-Factor Verification Code Form
3. Bootstrap Team Member Card Grid
A real Bootstrap card grid for an "about" or careers page, with a working department filter — click a button and only the matching team cards stay visible.
How it works: every team card carries a data-dept attribute, and Bootstrap's real btn-group acts as the filter — clicking a button reads its own data-dept, restyles itself as the active choice by swapping Bootstrap's btn-dark/btn-outline-dark classes, and hides every card whose department doesn't match ("All" simply matches everything). The avatars are CSS gradients keyed off a per-card hue custom property, so the whole grid works immediately with zero headshot photography.
Best for: about, careers, and directory pages where a growing team benefits from narrowing by department instead of scrolling past everyone. Tip: the same data-attribute filter pattern reuses cleanly for a speaker list filterable by track, or a vendor directory filterable by category.
Grab the code: Bootstrap Team Member Card Grid
4. Bootstrap Testimonial Card Carousel
Bootstrap's real Carousel component, usually shown carrying images, repurposed to carry full testimonial cards instead — star rating, quote, and attribution, one per slide.
How it works: the prev/next arrows, the clickable indicator dots, and the slide transition are all Bootstrap's own .carousel/.carousel-inner/.carousel-indicators markup, wired through data-bs-target/data-bs-slide attributes exactly as documented. One deliberate setting: data-bs-ride="false" disables Bootstrap's default auto-advance — a testimonial needs to be read, not glanced at, so this carousel only moves when a visitor clicks an arrow or a dot.
Best for: customer testimonial and social-proof sections that need to rotate several quotes through the space a single one would otherwise occupy. Tip: pair this directly below the Bootstrap pricing table from the first batch — testimonials right under pricing reinforce the decision at the exact moment it matters.
Grab the code: Bootstrap Testimonial Card Carousel
5. Bootstrap Usage-Based Pricing Calculator
A real Bootstrap slider calculator that recomputes an estimated monthly bill live as you drag — API call volume and active seat count both feeding one running total.
How it works: two real Bootstrap form-range sliders each trigger the same shared recalc() function on every input event — not change, so the total updates continuously while dragging rather than only once you release the slider. The rate itself comes from two named constants (PER_CALL, PER_SEAT) read directly inside that one function, instead of the calculation being scattered as magic numbers across several places that could drift out of sync with each other.
Best for: usage-metered SaaS pricing pages — API, storage, or seat-based products all benefit from letting a prospect see a real estimated bill before ever signing up. Tip: add a third slider and rate constant (storage, for instance) by copying the existing pattern — one more term inside recalc() and it's fully wired in.
Grab the code: Bootstrap Usage-Based Pricing Calculator
6. Bootstrap Notification Center Dropdown
A real Bootstrap dropdown notification center with a live unread badge — click through several notifications in one open panel instead of it closing after the first click.
How it works: Bootstrap's Dropdown closes on any click by default, including a click inside the menu itself — left as-is, marking one notification read would dismiss the whole panel before a second one could be read. This snippet's trigger button carries data-bs-auto-close="outside", one of Bootstrap's own documented modes, so the panel now closes only on a genuine outside click. The badge count itself isn't hardcoded — updateBadge() recounts how many notifications currently carry an .bsnotif-unread class after every change, and hides itself entirely once that count reaches zero.
Best for: any app or dashboard header needing the standard bell-icon-with-badge pattern. Tip: pair with the Bootstrap admin dashboard sidebar from the first batch for a complete top-bar notification experience.
Grab the code: Bootstrap Notification Center Dropdown
7. Bootstrap Kanban Board with Drag-and-Drop Cards
A real Bootstrap kanban board where cards genuinely drag between columns using the browser's native HTML5 Drag and Drop API, with a live per-column count.
How it works: every card carries draggable="true", and the board is wired with genuine dragstart/dragend/dragover/drop listeners — no third-party drag library. The one line that's easy to leave out: a drop zone's dragover handler must call e.preventDefault(), because browsers reject drops everywhere by default — without it, the drop event simply never fires, no matter how the card is released. Dropping itself is one line, zone.appendChild(dragged), and a shared updateCounts() re-reads how many cards each column actually contains after every drag ends, so the badges can never go stale.
Best for: internal tools and lightweight project trackers needing the standard To Do / In Progress / Done pattern without a drag-and-drop dependency. Tip: relabel the three columns for a sales or hiring pipeline — the drag/drop logic doesn't care what the columns are called.
Grab the code: Bootstrap Kanban Board with Drag-and-Drop Cards
8. Bootstrap Data Table with Sortable Columns
A real Bootstrap table where clicking any column header sorts by that column's actual data type — text, number, or date — rather than by the formatted text on screen.
How it works: sorting the visible $3,120 text as a plain string breaks the moment currency formatting or a non-ISO date enters the picture. Every row instead carries its raw, unformatted value in a data attribute, and a per-type GETTERS object — Number() for numeric columns, new Date().getTime() for the date column — converts it correctly before comparing. Clicking the same header twice flips a shared ascending boolean to reverse direction; clicking a different header resets it back to true, so switching columns never carries over a stale direction from whichever was sorted last.
Best for: admin dashboards and any table of records past a handful of rows, where sortable columns are close to a baseline expectation. Tip: drop this straight into the Bootstrap admin dashboard's orders table from the first batch for a fully interactive records view.
Grab the code: Bootstrap Data Table with Sortable Columns
9. Bootstrap Image Lightbox Gallery Modal
A real Bootstrap modal reused as a shared lightbox for a whole thumbnail grid — click-to-enlarge with working prev/next and left/right arrow-key navigation.
How it works: there's exactly one real Bootstrap modal for the entire six-image gallery, not one per thumbnail — clicking a thumbnail sets a shared current index and opens the modal programmatically with modal.show(). One render() function updates both the full-size image and the "N / 6" counter from that same index, which is what keeps the counter, the image, and the prev/next buttons all consistent no matter how you got there — a thumbnail click, a nav button, or an arrow key, since a keydown listener scoped to the modal element adds left/right arrow support on top of what Bootstrap's Modal provides by itself.
Best for: portfolio, product, and documentation galleries needing click-to-enlarge without pulling in a dedicated lightbox library. Tip: the images are CSS gradients by default — swap .bslight-thumb and .bslight-full's backgrounds for real photo URLs when ready.
Grab the code: Bootstrap Image Lightbox Gallery Modal
10. Bootstrap Toast Notification Stack
Real Bootstrap toasts created on demand and stacked in the corner — each auto-dismisses after 4 seconds and removes itself from the DOM once its hide animation genuinely finishes.
How it works: most Toast demos show one static example — this one builds what a real app actually needs, creating a fresh <div class="toast"> on every trigger click, appending it into a shared .toast-container, and handing it to a new bootstrap.Toast instance with a real 4-second delay option rather than a custom setTimeout. The detail that matters past a single toast: Bootstrap hides a dismissed toast but never removes its element from the DOM. This snippet listens for Bootstrap's own hidden.bs.toast event — fired only once the hide animation has actually completed — and removes the node then, so triggering dozens of toasts across a session never leaves invisible elements behind.
Best for: save confirmations and any background action feedback that shouldn't interrupt what someone's doing. Tip: wire one of the trigger types directly to a real fetch() call's success/error branches instead of a button click.
Grab the code: Bootstrap Toast Notification Stack
Same as the first batch, each of these ten lives in the category that actually fits its shape — the mega menu under Navigation, the kanban board under Dashboards, the sortable table under Tables — so they surface alongside every other snippet of that kind rather than sitting in a library of their own. Find these ten, the first batch's ten, and every other Bootstrap snippet in the collection in one place via the Bootstrap tag. Open any of them above and you land straight in the live editor, HTML/CSS/JS tabs and all; click Save as to copy it into My Code and start changing it.
