Skip to content

bestguy/sveltestrap

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
September 22, 2023 06:06
August 30, 2023 19:05
August 30, 2023 19:12
August 7, 2023 14:11
v4
May 13, 2021 19:32
July 17, 2020 16:48
July 17, 2020 16:48
July 26, 2020 09:20
January 20, 2021 19:47
September 3, 2021 21:59
October 25, 2020 12:47

sveltestrap

Bootstrap 5 components for Svelte v3

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

Demo page


Install

npm install svelte 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 '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>

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 '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 '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": "*.*.*",
    ...
  },