@sveltestrap/sveltestrap
Version:
Bootstrap components for Svelte
185 lines (149 loc) • 13.3 kB
Markdown
[](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 <u>**does not directly embed Bootstrap style**</u>. 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
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
</head>
```
2. Add to your main `App.svelte` file
```html
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</svelte:head>
```
3. Import the styles directly in your CSS bundle
```html
<style>
@import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css';
</style>
```
4. Use the provided [Styles](/?path=/docs/components-styles--docs) component
```html
<script>
import { Styles } from '@sveltestrap/sveltestrap';
</script>
<Styles />
```
Then use Sveltestrap components in your svelte component:
```html
<script>
import { Button, Col, Row } from '@sveltestrap/sveltestrap';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>
```
## 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
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</svelte:head>
```
or you can include it in your app's `index.html`:
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
```
or the [Styles](https://sveltestrap.js.org/?path=/story/components--styles) component includes the Bootstrap Icon CSS by default:
```html
<script>
import { Styles } from '@sveltestrap/sveltestrap';
</script>
<Styles />
```
## 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)