@sveltestrap/sveltestrap
Advanced tools
The goal of this library is to provide all Bootstrap 5 components for a Svelte 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. This library was inspired by the reactstrap 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.
Note: Bootstrap 4 CSS users must use Sveltestrap 4 - see docs here: Sveltestrap version 4
npm install svelte @sveltestrap/sveltestrap
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:
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
/>
</head>
Or from your Svelte app, either:
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</svelte:head>
or:
<style>
@import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css';
</style>
or alternately, use the Styles component:
<script>
import { Styles } from '@sveltestrap/sveltestrap';
</script>
<Styles />
Then use sveltestrap components in your svelte component:
<script>
import { Button, Col, Row } from '@sveltestrap/sveltestrap';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>
If you wish to use the Icon component, you also must include a link to Bootstrap Icon CSS, for example:
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</svelte:head>
or:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
or the Styles component includes the Bootstrap Icon CSS by default:
<script>
import { Styles } from '@sveltestrap/sveltestrap';
</script>
<Styles />
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:
<script>
import { Button, Col, Row } from '@sveltestrap/sveltestrap/src';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>
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
"devDependencies": {
"@sveltestrap/sveltestrap": "*.*.*",
...
},
FAQs
Bootstrap components for Svelte
The npm package @sveltestrap/sveltestrap receives a total of 0 weekly downloads. As such, @sveltestrap/sveltestrap popularity was classified as not popular.
We found that @sveltestrap/sveltestrap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.