https://github.com/sveltestrap/sveltestrap
Bootstrap 5 components for Svelte 4+
https://github.com/sveltestrap/sveltestrap
bootstrap components javascript svelte sveltekit ui ux
Last synced: 8 days ago
JSON representation
Bootstrap 5 components for Svelte 4+
- Host: GitHub
- URL: https://github.com/sveltestrap/sveltestrap
- Owner: sveltestrap
- License: mit
- Created: 2023-12-05T04:50:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-29T17:48:54.000Z (6 months ago)
- Last Synced: 2024-10-30T02:36:45.168Z (6 months ago)
- Topics: bootstrap, components, javascript, svelte, sveltekit, ui, ux
- Language: Svelte
- Homepage: https://sveltestrap.js.org
- Size: 5 MB
- Stars: 139
- Watchers: 6
- Forks: 16
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-svelte - Sveltestrap - Bootstrap 4 & 5 components. (UI Libraries / Mobile)
- trackawesomelist - Sveltestrap (⭐138) - Bootstrap 4 & 5 components. (Recently Updated / [Oct 27, 2024](/content/2024/10/27/README.md))
README
[](https://github.com/sveltestrap/sveltestrap/blob/main/LICENSE)
[](https://www.npmjs.com/package/@sveltestrap/sveltestrap)
## 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.
### Join the Community
[](https://discord.gg/VS9T72ucaU)
---
## Install
```bash
# 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
@import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
```
4. Use the provided [Styles](/?path=/docs/components-styles--docs) component
```html
import { Styles } from '@sveltestrap/sveltestrap';
```
Then use Sveltestrap components in your svelte component:
```html
import { Button, Col, Row } from '@sveltestrap/sveltestrap';
Hello World!
```
## Bootstrap Icons
If you want 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:
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
import { Styles } from '@sveltestrap/sveltestrap';
```
## Sponsors
[](https://www.opensense.com?utm_source=github)
## Maintainers
[](https://github.com/dysfunc)
[](https://github.com/bestguy)
## Contributors
[](https://github.com/msmauric)
[](https://github.com/eddie0329)
[](https://github.com/BlackFenix2)
[](https://github.com/frederikhors)
[](https://github.com/thomatha)
[](https://github.com/mohe2015)
[](https://github.com/daytonlowell)
[](https://github.com/apps/dependabot)
[](https://github.com/benmccann)
[](https://github.com/Renerick)
[](https://github.com/rornic)
[](https://github.com/DaniAcu)
[](https://github.com/ladeiko)
[](https://github.com/kaipaysen)
[](https://github.com/dym-sh)
[](https://github.com/GorbulasDev)
[](https://github.com/lovasoa)
[](https://github.com/geoffreymugnier)
[](https://github.com/coyotte508)
[](https://github.com/javajudt)
[](https://github.com/demetrius-mp)
[](https://github.com/deshartman)
[](https://github.com/OJFord)
[](https://github.com/mopeneko)
[](https://github.com/baileyherbert)
[](https://github.com/ondrap)
[](https://github.com/brocococonut)
[](https://github.com/lgirma)
[](https://github.com/grantyap)
[](https://github.com/33KK)
[](https://github.com/frantp)
[](https://github.com/gryckelynck)
[](https://github.com/davidroeca)
[](https://github.com/IAL32)
[](https://github.com/Florian-Schoenherr)
[](https://github.com/newbyca)
[](https://github.com/ubersan)
[](https://github.com/farskid)
[](https://github.com/masrlinu)
[](https://github.com/thecodejack)
[](https://github.com/nextinterfaces)
[](https://github.com/jlith)
[](https://github.com/larryosborn)
[](https://github.com/TheBosZ)
[](https://github.com/infanf)
[](https://github.com/RoryDuncan)
[](https://github.com/splimter)
[](https://github.com/glominashvili)
[](https://github.com/urispmts)
[](https://github.com/sebastienwarin)
[](https://github.com/Inqnuam)
[](https://github.com/lachlancollins)
[](https://github.com/vostrnad)
[](https://github.com/x64v)
[](https://github.com/hutchisr)
[](https://github.com/valmarv)
[](https://github.com/StagnantIce)