Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bestguy/sveltestrap
Bootstrap 4 & 5 components for Svelte
https://github.com/bestguy/sveltestrap
bootstrap svelte
Last synced: 26 days ago
JSON representation
Bootstrap 4 & 5 components for Svelte
- Host: GitHub
- URL: https://github.com/bestguy/sveltestrap
- Owner: bestguy
- License: mit
- Created: 2017-03-19T15:46:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-07T09:50:10.000Z (10 months ago)
- Last Synced: 2024-05-22T01:13:21.248Z (6 months ago)
- Topics: bootstrap, svelte
- Language: Svelte
- Homepage: https://sveltestrap.js.org
- Size: 29.9 MB
- Stars: 1,295
- Watchers: 35
- Forks: 180
- Open Issues: 123
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - bestguy/sveltestrap - Bootstrap 4 & 5 components for Svelte (bootstrap)
- awesome-svelte - Sveltestrap - Bootstrap 4 & 5 components. (UI Libraries / Mobile)
- awesome-sveltekit - [code
README
# Important Note: This project is now hosted at [https://github.com/sveltestrap/sveltestrap](https://github.com/sveltestrap/sveltestrap)
## This repo is the legacy repo for Sveltestrap 5 for use with Svelte 3. No new development will happen here.
sveltestrap.js.org docs now point to @sveltestrap/sveltestrap v6, and the new install/import for sveltestrap v6+ is `npm install @sveltestrap/sveltestrap`
(You can still use sveltestrap v5.x via `npm install sveltestrap`)
We were unable to migrate this repo to the sponsor's org, so please update your imports, stars, bookmarks, etc to https://github.com/sveltestrap/sveltestrap. Our apologies for any confusion.
This repo will eventually be archived.
---
## Bootstrap 5 components for Svelte v3
The goal of this library is to provide all Bootstrap 5 components for a [Svelte](https://svelte.dev) app. Sveltestrap makes it easy to use Bootstrap since there is no need to use Bootstrap component classes, to include Bootstrap's JavaScript, nor depend on jQuery. Sveltestrap is free, open-source software published under the permissive [MIT license.](https://github.com/bestguy/sveltestrap/blob/master/LICENSE) This library was inspired by the [reactstrap](https://reactstrap.github.io) library for React.
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.
[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
@import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
```
or alternately, use the [Styles](https://sveltestrap.js.org/?path=/story/components--styles) component:
```html
import { Styles } from 'sveltestrap';
```
Then use sveltestrap components in your svelte component:
```html
import { Button, Col, Row } from 'sveltestrap';
Hello World!
```
### 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
import { Styles } from 'sveltestrap';
```
### 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
import { Button, Col, Row } from 'sveltestrap/src';
Hello World!
```
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": "*.*.*",
...
},
```