# Bootstrap Svelte > Bootstrap 5 components for Svelte 5 with TypeScript support, published on npm as `@winkintel/bootstrap-svelte` (version 2.1.0, Apache-2.0). This site is the component documentation and live showcase; every page is also available as Markdown. Bootstrap Svelte is maintained by Wink, Inc. (WinkIntel). Source code and issue tracker: https://github.com/WinkIntel/bootstrap-svelte. Package: https://www.npmjs.com/package/@winkintel/bootstrap-svelte. **When to use Bootstrap Svelte:** - You are building a Svelte 5 (runes) or SvelteKit application on Bootstrap 5 CSS and want typed, composable components instead of hand-written Bootstrap markup and Bootstrap's JavaScript plugins. - You are porting a Bootstrap-based interface or team to Svelte 5 and want to keep Bootstrap's class names, color variants, grid, and utilities. - You need forms, tables, modals, offcanvas panels, dropdowns, navigation, tabs, toasts, tooltips, and popovers that render safely on the server and hydrate in Svelte 5. **When not to use it:** - Svelte 4 or earlier: the peer dependency is `svelte ^5.29.0`. - Tailwind, shadcn-style copy-in components, or fully custom design systems: this package follows Bootstrap's design language on purpose. - Pages that also load Bootstrap's own JavaScript bundle: the components replace it, so do not load both. **How to use it:** - Install the package together with Bootstrap CSS: `pnpm add @winkintel/bootstrap-svelte bootstrap`. The package does not bundle CSS, so import Bootstrap once in your app entry (`import 'bootstrap/dist/css/bootstrap.min.css';`) or include it through your Sass pipeline. - Import components from the package root: `import { Button, Card, Modal } from '@winkintel/bootstrap-svelte'`. Compound namespaces start at their `Root` component (``, ``, ``) and then use sub-components such as ``, ``, and ``; `Alert`, `Badge`, `Button`, and `Spinner` are standalone. - Props are typed. Import flat public types such as `ButtonRootProps` from the package root. For compound namespaces, import the namespace type and use exported part aliases such as `Card.RootProps` or `Modal.RootProps`; read each component page for its props table, CSS classes, and accessibility notes. **How to read this site as an agent:** - Request any page with `Accept: text/markdown` to receive Markdown from the same URL, or append `.md` to its path (the home page is https://bootstrap-svelte.vercel.app/index.md). - https://bootstrap-svelte.vercel.app/llms-full.txt contains every page in one file, https://bootstrap-svelte.vercel.app/agents.md contains integration instructions, and https://bootstrap-svelte.vercel.app/sitemap.xml lists every URL with last-modified dates. - Paths that do not exist return HTTP 404 with a Markdown body that links back to this index. ## Start here - [Overview](https://bootstrap-svelte.vercel.app/index.md): Bootstrap components for Svelte 5 with TypeScript support, live examples, and package-local documentation. ## Guides - [Theming](https://bootstrap-svelte.vercel.app/theming.md): Bootstrap Svelte follows Bootstrap's design tokens instead of shipping a separate theme layer. - [SvelteKit + Bootstrap 5](https://bootstrap-svelte.vercel.app/guides/sveltekit-bootstrap-5.md): Add @winkintel/bootstrap-svelte to a SvelteKit app with Svelte 5, TypeScript/runes APIs, and Bootstrap 5 CSS while leaving Bootstrap JavaScript out of the bundle. - [Bootstrap Svelte vs Sveltestrap](https://bootstrap-svelte.vercel.app/guides/compare-sveltestrap.md): Both projects provide Bootstrap 5 components for Svelte. The practical difference is whether you want a Svelte 5-first, TypeScript-authored API or a library that also supports Svelte 4 and keeps a classic Svelte component style. ## Layout - [Breakpoint](https://bootstrap-svelte.vercel.app/layout/breakpoint.md): Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. - [Container](https://bootstrap-svelte.vercel.app/layout/container.md): Bootstrap's basic container component built with Svelte 5. Containers are used to contain, pad, and center content within a given viewport. - [Grid](https://bootstrap-svelte.vercel.app/layout/grid.md): Use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. - [Columns](https://bootstrap-svelte.vercel.app/layout/columns.md): Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements. ## Components - [Accordion](https://bootstrap-svelte.vercel.app/components/accordion.md): Bootstrap's accordion component built with Svelte 5. Use the accordion component to build vertically collapsing accordions. - [Alert](https://bootstrap-svelte.vercel.app/components/alert.md): Bootstrap's alert component built with Svelte 5. Use alerts to provide contextual feedback messages for typical user actions. - [Badge](https://bootstrap-svelte.vercel.app/components/badge.md): Bootstrap's badge component built with Svelte 5. Use badges to highlight elements, add counts, or display status. - [Breadcrumb](https://bootstrap-svelte.vercel.app/components/breadcrumb.md): Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. - [Button](https://bootstrap-svelte.vercel.app/components/button.md): Bootstrap's button component built with Svelte 5. Use it for actions in forms, dialogs, and more. - [Button Group](https://bootstrap-svelte.vercel.app/components/button-group.md): Group a series of buttons together on a single line with the button group. - [Card](https://bootstrap-svelte.vercel.app/components/card.md): Bootstrap's card component provides a flexible and extensible content container with multiple variants and options. - [Carousel](https://bootstrap-svelte.vercel.app/components/carousel.md): A slideshow component for cycling through elements—images or slides of text—like a carousel. - [Close Button](https://bootstrap-svelte.vercel.app/components/close-button.md): Bootstrap's close button component built with Svelte 5. Use it to dismiss components like alerts, modals, and toasts. - [Collapse](https://bootstrap-svelte.vercel.app/components/collapse.md): Bootstrap's collapse component built with Svelte 5. Toggle the visibility of content across your project with the Collapse component. - [Dropdown](https://bootstrap-svelte.vercel.app/components/dropdown.md): Bootstrap's dropdown component built with Svelte 5. Use it to toggle contextual overlays for displaying lists, links, and more. - [List Group](https://bootstrap-svelte.vercel.app/components/list-group.md): List groups are a flexible component for displaying a series of content. Modify and extend them to support just about any content within. - [Modal](https://bootstrap-svelte.vercel.app/components/modal.md): Add dialogs to your site for lightboxes, user notifications, or completely custom content. - [Nav](https://bootstrap-svelte.vercel.app/components/nav.md): Navigation components for building various types of navigation interfaces, including tabs and pills. - [Navbar](https://bootstrap-svelte.vercel.app/components/navbar.md): Bootstrap's powerful, responsive navigation header that includes support for branding, navigation, and more. - [Offcanvas](https://bootstrap-svelte.vercel.app/components/offcanvas.md): Build hidden sidebars into your project for navigation, shopping carts, and more with the offcanvas component. - [Pagination](https://bootstrap-svelte.vercel.app/components/pagination.md): Pagination component for indicating a series of related content exists across multiple pages. - [Placeholder](https://bootstrap-svelte.vercel.app/components/placeholder.md): Use loading placeholders for your components or pages to indicate something may still be loading. - [Popover](https://bootstrap-svelte.vercel.app/components/popover.md): Documentation and examples for adding custom Bootstrap popovers with content and positioning. - [Progress](https://bootstrap-svelte.vercel.app/components/progress.md): Bootstrap's progress component built with Svelte 5. Use it to display progress indicators with support for stacked bars, animated backgrounds, and text labels. - [Scrollspy](https://bootstrap-svelte.vercel.app/components/scrollspy.md): An attachment-based scrollspy component that automatically updates navigation or list group components based on scroll position to indicate which section of the page is currently active in the viewport. - [Spinner](https://bootstrap-svelte.vercel.app/components/spinner.md): Bootstrap's spinner component built with Svelte 5. Use it to indicate a loading state in your projects. - [Tab](https://bootstrap-svelte.vercel.app/components/tab.md): Tab components provide dynamic tabbed interfaces for organizing content into separate views that users can switch between. - [Table](https://bootstrap-svelte.vercel.app/components/table.md): Documentation and examples for opt-in styling of tables. - [Toast](https://bootstrap-svelte.vercel.app/components/toast.md): Push notifications to your visitors with a toast, a lightweight and easily customizable alert message using Svelte components. - [Tooltip](https://bootstrap-svelte.vercel.app/components/tooltip.md): Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using Svelte components. ## Form - [Form Controls](https://bootstrap-svelte.vercel.app/form/form-controls.md): Give textual form controls like s and