The philosophy of this library is to provide all Bootstrap 5 components for a Svelte app, without needing to use Bootstrap component classes or needing to include Bootstrap's JavaScript.
However, 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
The component names and interface are inspired by the reactstrap library for React.
npm install --save svelte 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/[email protected]/dist/css/bootstrap.min.css"
/>
</head>Or from your Svelte app, either:
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</svelte:head>or:
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css";
</style>or alternately, use the Styles component:
<script>
import { Styles } from 'sveltestrap';
</script>
<Styles />Then use sveltestrap components in your svelte component:
<script>
import { Button, Col, Row } from '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/[email protected]/font/bootstrap-icons.css">
</svelte:head>or:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>or the Styles component includes the Bootstrap Icon CSS by default:
<script>
import { Styles } from '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/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": "*.*.*",
...
},