# sveltestrap
**Repository Path**: mirrors_jfinal/sveltestrap
## Basic Information
- **Project Name**: sveltestrap
- **Description**: Bootstrap 4 & 5 components for Svelte
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-26
- **Last Updated**: 2025-11-22
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## Bootstrap 5 components for Svelte v3
The philosophy of this library is to provide all Bootstrap 5 components for a [Svelte](https://svelte.dev) app, without needing to use Bootstrap component classes or needing to include Bootstrap's JavaScript.
However, to make using Bootstrap themes easier, this library does _not_ embed Bootstrap styles directly and you will need to include Bootstrap 5 CSS in your page.
**Note:** Bootstrap 4 CSS users must use Sveltestrap 4 - see docs here: Sveltestrap version 4
The component names and interface are inspired by the [reactstrap](https://reactstrap.github.io) library for React.
[Demo page](https://sveltestrap.js.org/)
---
## Install
`npm install svelte sveltestrap`
## Usage
_You need to include a link to Bootstrap 5 stylesheet in your page - these components do not include or embed any Bootstrap styles automatically._
Either in your HTML layout:
```html
```
Or from your Svelte app, either:
```html
```
or:
```html
```
or alternately, use the [Styles](https://sveltestrap.js.org/?path=/story/components--styles) component:
```html
```
Then use sveltestrap components in your svelte component:
```html
```
### Note on Icons
If you wish to use the [Icon component](https://sveltestrap.js.org/?path=/story/components--icon),
you also must include a link to Bootstrap Icon CSS, for example:
```html
```
or:
```html
```
or the [Styles](https://sveltestrap.js.org/?path=/story/components--styles) component includes the Bootstrap Icon CSS by default:
```html
```
### Note on usage with Sapper
If you are using Sveltestrap with Sapper, it's recommended you import the component source directly.
Note that this issue does not affect SvelteKit. For example:
```html
```
if you prefer the 'sveltestrap' import, you can move the package to `devDependencies` block in your `package.json` so that sapper will parse the es bundle
```json
"devDependencies": {
"sveltestrap": "*.*.*",
...
},
```