@enkitek/sveltestrap v5.11.12
Install
npm i @enkitek/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:
<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 '@enkitek/sveltestrap'ltestrap';
</script>
<Styles />Then use sveltestrap components in your svelte component:
<script>
import { Button, Col, Row } from '@enkitek/sveltestrap';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>Note on Icons
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 '@enkitek/sveltestrap';
</script>
<Styles />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:
<script>
import { Button, Col, Row } from '@enkitek/sveltestrap/src';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>if you prefer the '@enkitek/sveltestrap' import, you can move the package to devDependencies block in your package.json so that sapper will parse the es bundle
"devDependencies": {
"sveltestrap": "*.*.*",
...
},