# Bootstrap 5 components for Svelte 5

Source: https://bootstrap-svelte.vercel.app/ — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

Svelte 5 · Bootstrap 5 · TypeScript

`@winkintel/bootstrap-svelte` provides Bootstrap 5 components for Svelte 5 and SvelteKit with TypeScript-friendly, runes-ready APIs. Add Bootstrap CSS in your app; Bootstrap JavaScript is not required.

- [Browse components](https://bootstrap-svelte.vercel.app/components/accordion)
- [Install package](https://bootstrap-svelte.vercel.app/#installation)
- [npm](https://www.npmjs.com/package/@winkintel/bootstrap-svelte)
- [GitHub](https://github.com/WinkIntel/bootstrap-svelte)

## Installation

Add the package with Bootstrap. Svelte `^5.29.0` is a peer dependency, so keep your app on Svelte 5 separately from the package install command.

### 1 Install

```bash
pnpm add @winkintel/bootstrap-svelte bootstrap
```

Peer dependency: `svelte: ^5.29.0`

### 2 Use

```html
<script>
  import { Alert, Button, Card, Modal } from '@winkintel/bootstrap-svelte';
</script>

<Alert colorVariant="primary" isDismissible>
  Ship Bootstrap-native interfaces with Svelte 5.
</Alert>
```

## Everything in the box

Every route ships live examples, usage snippets, an interactive playground, and API notes.

### Guides

- [Theming](https://bootstrap-svelte.vercel.app/theming)
- [SvelteKit + Bootstrap 5](https://bootstrap-svelte.vercel.app/guides/sveltekit-bootstrap-5)
- [Bootstrap Svelte vs Sveltestrap](https://bootstrap-svelte.vercel.app/guides/compare-sveltestrap)

### Layout

- [Breakpoint](https://bootstrap-svelte.vercel.app/layout/breakpoint)
- [Container](https://bootstrap-svelte.vercel.app/layout/container)
- [Grid](https://bootstrap-svelte.vercel.app/layout/grid)
- [Columns](https://bootstrap-svelte.vercel.app/layout/columns)

### Components

- [Accordion](https://bootstrap-svelte.vercel.app/components/accordion)
- [Alert](https://bootstrap-svelte.vercel.app/components/alert)
- [Badge](https://bootstrap-svelte.vercel.app/components/badge)
- [Breadcrumb](https://bootstrap-svelte.vercel.app/components/breadcrumb)
- [Button](https://bootstrap-svelte.vercel.app/components/button)
- [Button Group](https://bootstrap-svelte.vercel.app/components/button-group)
- [Card](https://bootstrap-svelte.vercel.app/components/card)
- [Carousel](https://bootstrap-svelte.vercel.app/components/carousel)
- [Close Button](https://bootstrap-svelte.vercel.app/components/close-button)
- [Collapse](https://bootstrap-svelte.vercel.app/components/collapse)
- [Dropdown](https://bootstrap-svelte.vercel.app/components/dropdown)
- [List Group](https://bootstrap-svelte.vercel.app/components/list-group)
- [Modal](https://bootstrap-svelte.vercel.app/components/modal)
- [Nav](https://bootstrap-svelte.vercel.app/components/nav)
- [Navbar](https://bootstrap-svelte.vercel.app/components/navbar)
- [Offcanvas](https://bootstrap-svelte.vercel.app/components/offcanvas)
- [Pagination](https://bootstrap-svelte.vercel.app/components/pagination)
- [Placeholder](https://bootstrap-svelte.vercel.app/components/placeholder)
- [Popover](https://bootstrap-svelte.vercel.app/components/popover)
- [Progress](https://bootstrap-svelte.vercel.app/components/progress)
- [Scrollspy](https://bootstrap-svelte.vercel.app/components/scrollspy)
- [Spinner](https://bootstrap-svelte.vercel.app/components/spinner)
- [Tab](https://bootstrap-svelte.vercel.app/components/tab)
- [Table](https://bootstrap-svelte.vercel.app/components/table)
- [Toast](https://bootstrap-svelte.vercel.app/components/toast)
- [Tooltip](https://bootstrap-svelte.vercel.app/components/tooltip)

### Form

- [Form Controls](https://bootstrap-svelte.vercel.app/form/form-controls)
- [Form Input Group](https://bootstrap-svelte.vercel.app/form/form-input-group)
- [Form Layout](https://bootstrap-svelte.vercel.app/form/form-layout)
- [Form Validation](https://bootstrap-svelte.vercel.app/form/form-validation)

## Design principles

The showcase is structured to make public package review fast: installation first, examples second, and API details close by.

### Bootstrap-compatible

Component props and generated markup are designed to stay close to Bootstrap conventions.

### Svelte-native

Use Svelte 5 components, snippets, bindings, and TypeScript-friendly public APIs.

## What to review

Review the license, npm package metadata, component API consistency, accessibility notes, and showcase visual direction.

[Open first component](https://bootstrap-svelte.vercel.app/components/accordion)