## Bootstrap 5 Components for Svelte 4+
Sveltestrap is a library designed to simplify the integration of [Bootstrap 5](https://getbootstrap.com) components into your [Svelte](https://svelte.dev) applications. It eliminates the need for Bootstrap component classes, the inclusion of Bootstrap's JavaScript, and reliance on jQuery.
This open-source software is freely available under the permissive MIT license. It draws inspiration from the [reactstrap](https://reactstrap.github.io/?path=/story/home-installation--page) library for [React](https://react.dev/).
Please note that Sveltestrap **does not directly embed Bootstrap style**. To use Bootstrap themes effectively, you must include Bootstrap 5 CSS using one of the methods outlined below.
**Note**
If you looking for Svelte 3.x support, you can use the original [sveltestrap](https://github.com/bestguy/sveltestrap) package.
---
## Install
```js
# npm
> npm install svelte @sveltestrap/sveltestrap
# pnpm
> pnpm install svelte @sveltestrap/sveltestrap
# yarn
> yarn add svelte @sveltestrap/sveltestrap
```
## Bootstrap CSS
It's essential to note that Bootstrap 5 components do not come with Bootstrap styles preloaded, so you'll need to add the stylesheet manually. Here's how you can add them:
1. Add to your apps static `index.html` file
```html
```
2. Add to your main `App.svelte` file
```html
```
3. Import the styles directly in your CSS bundle
```html
```
4. Use the provided [Styles](/docs/components-styles--docs) component
```html
```
Then use Sveltestrap components in your svelte component:
```html
```
## Bootstrap Icons
If you want to use the [Icon component](/docs/components-styles--docs),
you also must include a link to Bootstrap Icon CSS, for example:
Include it in your app's `App.svelte`:
```html
```
or you can include it in your app's `index.html`:
```html
```
or the [Styles](https://sveltestrap.js.org/?path=/story/components--styles) component includes the Bootstrap Icon CSS by default:
```html
```
If you prefer the `@sveltestrap/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/sveltestrap": "*.*.*",
...
},
```