Product
Socket Now Supports pylock.toml Files
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
By Trevor Norris - Jun 05, 2025
🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@sveltestrap/sveltestrap
Advanced tools
Bootstrap 5 Components for Svelte 4+
Sveltestrap is a library designed to simplify the integration of Bootstrap 5 components into your Svelte 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 library for React.
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 package.
Join the Community
Install
# 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:
- Add to your apps static
index.htmlfile
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
</head>
- Add to your main
App.sveltefile
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</svelte:head>
- Import the styles directly in your CSS bundle
<style>
@import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css';
</style>
- Use the provided 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>
Bootstrap Icons
If you want to use the Icon component, you also must include a link to Bootstrap Icon CSS, for example:
Include it in your app's App.svelte:
<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:
<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 />
Sponsors
Maintainers
Contributors
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.
Package last updated on 20 Jan 2025
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.
Related posts
Security News
Research
Destructive npm Packages Disguised as Utilities Enable Remote System Wipe
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.
By Kush Pandya - Jun 05, 2025
Research
Security News
Malicious Ruby Gems Exfiltrate Telegram Tokens and Messages Following Vietnam Ban
Malicious Ruby gems typosquat Fastlane plugins to steal Telegram bot tokens, messages, and files, exploiting demand after Vietnam’s Telegram ban.
By Kirill Boychenko - Jun 03, 2025