Bootstrap 4 & 5 components for Svelte

  • By Gary Thomas
  • Last update: Dec 31, 2022
  • Comments: 17

sveltestrap

Bootstrap 5 components for Svelte v3

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.

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/[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>

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/[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 />

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

Github

https://github.com/bestguy/sveltestrap

Comments(17)

  • 1

    Typescript types support?

    I would like to use this lib in my svelte + typescript(preprocess) project, yet i'm having trouble importing it due to lack of types. Can someone provide @types/sveltestrap any soon? <3

  • 2

    test: improve alert

    Changelog

    • Add @babel/plugin-transform-runtime to be able to use async/await
    • Add @testing-library/jest-dom/extend-expect to be able to use the expect extentions
    • Update alert test to cover all the cases
      • Prevent use classes to get the elements, instead I used the queryByRole.
      • Add dismissible, controllable and without fade cases
  • 3

    error under "Svelte DevTools"

    While trying 1st sample from https://bestguy.github.io/sveltestrap/?path=/story/components--navbar under "Svelte DevTools" (https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn?hl=en-US) I get the error below on console.

    <script>
  import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    UncontrolledDropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
  } from 'sveltestrap';

  let isOpen = false;

  function handleUpdate(event) {
    isOpen = event.detail.isOpen;
  }
</script>

<Navbar color="light" light expand="md">
  <NavbarBrand href="/">sveltestrap</NavbarBrand>
  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
  <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
    <Nav class="ml-auto" navbar>
      <NavItem>
        <NavLink href="#components/">Components</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="https://github.com/bestguy/sveltestrap">GitHub</NavLink>
      </NavItem>
      <UncontrolledDropdown nav inNavbar>
        <DropdownToggle nav caret>Options</DropdownToggle>
        <DropdownMenu right>
          <DropdownItem>Option 1</DropdownItem>
          <DropdownItem>Option 2</DropdownItem>
          <DropdownItem divider />
          <DropdownItem>Reset</DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    </Nav>
  </Collapse>
</Navbar>

VM997:644 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': function fill() { [native code] } could not be cloned.
    at Object.add (<anonymous>:644:14)
    at add (<anonymous>:11:51)
    at addNode (<anonymous>:104:5)
    at Object.block.m (<anonymous>:244:11)
    at mount_component (http://localhost:5000/build/bundle.js:534:30)
    at mount (http://localhost:5000/build/bundle.js:6151:8)
    at updateProfile (<anonymous>:49:7)
    at Object.block.m (<anonymous>:248:9)
    at mount (http://localhost:5000/build/bundle.js:2177:22)
    at updateProfile (<anonymous>:49:7)
  • 4

    WIP: Typescript support

    i made a PR to enable typescript support writing the .svelte files and copied the type definitions straight from ReactStrap.

    This isn't a complete repo, i just needed an area to converse about adding type definitions.

  • 5

    Dependency error with SvelteKit v1.0.0-next.137

    Getting this error twice when I run the dev server npm run dev -- --host --open...

    ENOENT: no such file or directory, open '/Users/nates/dev/shy-svelte/node_modules/sveltestrap/src/node_modules/sveltestrap/src/InlineContainer.svelte'

    I am not referencing InlineContainer.svelte in any of my code but I am using Modal and Offcanvas which both reference it.

    Using [email protected], SvelteKit 1.0.0-next.137, Svelte 3.40.2, vite 2.4.3, node 16.5.0

    Got the same error creating a pristine project putting Offcanvas in the boilerplate index.svelte...

    • `npm init [email protected] my-app' (setup the demo app with TypeScript, eslint and prettier)
    • cd my-app
    • npm install --saveDev sveltestrap
    • Added code to /src/routes/index.svelte script tag...
    import { Offcanvas } from 'sveltestrap/src'
let isOpen = true
const toggle = () => {
    isOpen = !isOpen
  }

    Added this to the section tag...

    <Offcanvas {isOpen} {toggle} placement="end" header="This is a test">
Test
</Offcanvas>
  • 6

    Unused export properties...

    Some of them...

    (!) Plugin svelte: ButtonToolbar has unused export property 'role'. If it is for external reference only, please consider using `export const 'role'`
node_modules\sveltestrap\src\ButtonToolbar.svelte
 6:   export { className as class };
 7:   export let ariaLabel = '';
 8:   export let role = 'toolbar';
                 ^
 9:
10:   const props = clean($$props);
(!) Plugin svelte: ButtonDropdown has unused export property 'group'. If it is for external reference only, please consider using `export const 'group'`
node_modules\sveltestrap\src\ButtonDropdown.svelte
10:   export let disabled = false;
11:   export let dropup = false;
12:   export let group = false;
                 ^
13:   export let inNavbar = false;
14:   export let isOpen = false;
(!) Plugin svelte: CustomInput has unused export property 'multiple'. If it is for external reference only, please consider using `export const 'multiple'`
node_modules\sveltestrap\src\CustomInput.svelte
15:   export let value = '';
16:   export let invalid = false;
17:   export let multiple = false;
                 ^
18:   export let bsSize = '';
19:   export let placeholder = '';
(!) Plugin svelte: Dropdown has unused export property 'disabled'. If it is for external reference only, please consider using `export const 'disabled'`
node_modules\sveltestrap\src\Dropdown.svelte
11:   let className = '';
12:   export { className as class };
13:   export let disabled = false;
                 ^
14:   export let direction = 'down';
15:   export let group = false;
(!) Plugin svelte: DropdownMenu has unused export property 'flip'. If it is for external reference only, please consider using `export const 'flip'`
node_modules\sveltestrap\src\DropdownMenu.svelte
 9:   export { className as class };
10:   export let right = false;
11:   export let flip = true;
                 ^
12:   export let persist = false;
13:
(!) Plugin svelte: DropdownMenu has unused export property 'persist'. If it is for external reference only, please consider using `export const 'persist'`
node_modules\sveltestrap\src\DropdownMenu.svelte
10:   export let right = false;
11:   export let flip = true;
12:   export let persist = false;
                 ^
13:
14:   const props = clean($$props);
(!) Plugin svelte: DropdownToggle has unused export property 'ariaHaspopup'. If it is for external reference only, please consider using `export const 'ariaHaspopup'`
node_modules\sveltestrap\src\DropdownToggle.svelte
13:   export let color = 'secondary';
14:   export let disabled = false;
15:   export let ariaHaspopup = false;
                 ^
16:   export let ariaLabel = 'Toggle Dropdown';
17:   export let split = false;
(!) Plugin svelte: Label has unused export property 'xs'. If it is for external reference only, please consider using `export const 'xs'`
node_modules\sveltestrap\src\Label.svelte
18:   export { fore as for };
19:   export let id = '';
20:   export let xs = '';
                 ^
21:   export let sm = '';
22:   export let md = '';
(!) Plugin svelte: Label has unused export property 'sm'. If it is for external reference only, please consider using `export const 'sm'`
node_modules\sveltestrap\src\Label.svelte
19:   export let id = '';
20:   export let xs = '';
21:   export let sm = '';
                 ^
22:   export let md = '';
23:   export let lg = '';
(!) Plugin svelte: Label has unused export property 'md'. If it is for external reference only, please consider using `export const 'md'`
node_modules\sveltestrap\src\Label.svelte
20:   export let xs = '';
21:   export let sm = '';
22:   export let md = '';
                 ^
23:   export let lg = '';
24:   export let xl = '';
(!) Plugin svelte: Label has unused export property 'lg'. If it is for external reference only, please consider using `export const 'lg'`
node_modules\sveltestrap\src\Label.svelte
21:   export let sm = '';
22:   export let md = '';
23:   export let lg = '';
                 ^
24:   export let xl = '';
25:   export let widths = colWidths;
(!) Plugin svelte: Label has unused export property 'xl'. If it is for external reference only, please consider using `export const 'xl'`
node_modules\sveltestrap\src\Label.svelte
22:   export let md = '';
23:   export let lg = '';
24:   export let xl = '';
                 ^
25:   export let widths = colWidths;
26:
(!) Plugin svelte: Label has unused export property 'widths'. If it is for external reference only, please consider using `export const 'widths'`
node_modules\sveltestrap\src\Label.svelte
23:   export let lg = '';
24:   export let xl = '';
25:   export let widths = colWidths;
                 ^
26:
27:   const colClasses = [];
(!) Plugin svelte: Modal has unused export property 'keyboard'. If it is for external reference only, please consider using `export const 'keyboard'`
node_modules\sveltestrap\src\Modal.svelte
24:   export let size = '';
25:   export let toggle = undefined;
26:   export let keyboard = true;
                 ^
27:   export let role = 'dialog';
28:   export let labelledBy = '';
(!) Plugin svelte: Modal has unused export property 'role'. If it is for external reference only, please consider using `export const 'role'`
node_modules\sveltestrap\src\Modal.svelte
25:   export let toggle = undefined;
26:   export let keyboard = true;
27:   export let role = 'dialog';
                 ^
28:   export let labelledBy = '';
29:   export let backdrop = true;
(!) Plugin svelte: Modal has unused export property 'labelledBy'. If it is for external reference only, please consider using `export const 'labelledBy'`
node_modules\sveltestrap\src\Modal.svelte
26:   export let keyboard = true;
27:   export let role = 'dialog';
28:   export let labelledBy = '';
                 ^
29:   export let backdrop = true;
30:   export let onEnter = undefined;
(!) Plugin svelte: Modal has unused export property 'onOpened'. If it is for external reference only, please consider using `export const 'onOpened'`
node_modules\sveltestrap\src\Modal.svelte
30:   export let onEnter = undefined;
31:   export let onExit = undefined;
32:   export let onOpened = noop;
                 ^
33:   export let onClosed = noop;
34:   export let wrapClassName = '';
(!) Plugin svelte: Modal has unused export property 'external'. If it is for external reference only, please consider using `export const 'external'`
node_modules\sveltestrap\src\Modal.svelte
36:   export let backdropClassName = '';
37:   export let contentClassName = '';
38:   export let external = undefined;
                 ^
39:   export let zIndex = 1050;
40:   export let backdropTransition = '';
(!) Plugin svelte: Modal has unused export property 'backdropTransition'. If it is for external reference only, please consider using `export const 'backdropTransition'`
node_modules\sveltestrap\src\Modal.svelte
38:   export let external = undefined;
39:   export let zIndex = 1050;
40:   export let backdropTransition = '';
                 ^
41:   export let modalTransition = '';
42:   export let unmountOnClose = true;
(!) Plugin svelte: Modal has unused export property 'modalTransition'. If it is for external reference only, please consider using `export const 'modalTransition'`
node_modules\sveltestrap\src\Modal.svelte
39:   export let zIndex = 1050;
40:   export let backdropTransition = '';
41:   export let modalTransition = '';
                 ^
42:   export let unmountOnClose = true;
43:   export let returnFocusAfterClose = true;
(!) Plugin svelte: Navbar has unused export property 'full'. If it is for external reference only, please consider using `export const 'full'`
node_modules\sveltestrap\src\Navbar.svelte
 7:   export let light = false;
 8:   export let dark = false;
 9:   export let full = false;
                 ^
10:   export let fixed = '';
11:   export let sticky = '';
(!) Plugin svelte: Navbar has unused export property 'role'. If it is for external reference only, please consider using `export const 'role'`
node_modules\sveltestrap\src\Navbar.svelte
11:   export let sticky = '';
12:   export let color = '';
13:   export let role = '';
                 ^
14:   export let expand = false;
15:
(!) Plugin svelte: NavbarToggler has unused export property 'type'. If it is for external reference only, please consider using `export const 'type'`
node_modules\sveltestrap\src\NavbarToggler.svelte
 7:   let className = '';
 8:   export {className as class};
 9:   export let type = 'button';
                 ^
10:
11:   const props = clean($$props);
(!) Plugin svelte: Toast has unused export property 'fade'. If it is for external reference only, please consider using `export const 'fade'`
node_modules\sveltestrap\src\Toast.svelte
 6:   let className = '';
 7:   export { className as class };
 8:   export let fade = true;
                 ^
 9:   export let isOpen = true;
10:
(!) Plugin svelte: TabPane has unused export property 'activeTab'. If it is for external reference only, please consider using `export const 'activeTab'`
node_modules\sveltestrap\src\TabPane.svelte
 6:   let className = '';
 7:   export { className as class };
 8:   export let activeTab;
                 ^
 9:   export let tabId;
10:
(!) Plugin svelte: UncontrolledCollapse has unused export property 'navbar'. If it is for external reference only, please consider using `export const 'navbar'`
node_modules\sveltestrap\src\UncontrolledCollapse.svelte
11:   let className = '';
12:   export { className as class };
13:   export let navbar = false;
                 ^
14:   export let defaultOpen = false;
15:   export let toggler;
(!) Plugin svelte: UncontrolledFade has unused export property 'navbar'. If it is for external reference only, please consider using `export const 'navbar'`
node_modules\sveltestrap\src\UncontrolledFade.svelte
11:   let className = '';
12:   export { className as class };
13:   export let navbar = false;
                 ^
14:   export let defaultOpen = false;
15:   export let toggler;
(!) Plugin svelte: UncontrolledButtonDropdown has unused export property 'direction'. If it is for external reference only, please consider using `export const 'direction'`
node_modules\sveltestrap\src\UncontrolledButtonDropdown.svelte
 6:   export { className as class };
 7:   export let disabled = false;
 8:   export let direction = 'down';
                 ^
 9:   export let group = false;
10:   export let nav = false;
(!) Plugin svelte: UncontrolledButtonDropdown has unused export property 'toggle'. If it is for external reference only, please consider using `export const 'toggle'`
node_modules\sveltestrap\src\UncontrolledButtonDropdown.svelte
12:   export let addonType = false;
13:   export let size = '';
14:   export let toggle = undefined;
                 ^
15:   export let inNavbar = false;
16:   export let setActiveFromChild = false;
(!) Plugin svelte: UncontrolledDropdown has unused export property 'toggle'. If it is for external reference only, please consider using `export const 'toggle'`
node_modules\sveltestrap\src\UncontrolledDropdown.svelte
13:   export let addonType = false;
14:   export let size = '';
15:   export let toggle = undefined;
                 ^
16:   export let inNavbar = false;
17:   export let setActiveFromChild = false;
...
  • 7

    throws HTMLElement is not defined

    Hello, It looks like since the latest update the <ToolTip/> element is broken and throws HTMLElement is not defined when server-side rendered.

    Initially reported in https://github.com/lovasoa/sanipasse/issues/145

  • 8

    Empty IDs invalidate HTML markup

    Sveltestrap components like Container, Row etc. generate an empty id="" attribute on DOM nodes which is invalid according to the W3C spec. It would be great if this empty attribute could just be omitted if it's not set.

  • 9

    Custom Modal transitions

    What do you think about this?

    I'm using it like below:

    import { scale } from "svelte/transition";

<Modal
  ...
  fade={true}
  backdropDuration={300}
  transitionType={scale}
  transitionOptions={{ duration: 300, opacity: 0, start: 0.9 }}
  ...
>
Content
</Modal>

    It works good!

  • 10

    Page JS weight

    Svelte newby here, so please forgive me if this seems like a silly question. Isn't Svelte supposed to reduce the overall page weight? I'm seeing the sveltestrap page JS weight is many times the size of jQuery/Bootstrap 4 version. What am I missing?

  • 11

    Support SSR

    I have created a simple Svelte starter for Meteor, and it was reported that sveltestrap doesn't work with my SSR solution. I believe this is because your component is published in a pre-compiled state, instead of providing raw source and exposing that through a svelte key in package.json as is demonstrated in sveltejs/component-template.

    Svelte's SSR support works by using an entirely different compiler for server rendering, and would seem to require raw source in order to function properly.

  • 12

    Disable transition (on Accordion)

    It seems to me that it is currently impossible to easily disable transition of Sveltestrap components? I have two pages with the same <Accordion stayOpen>. When a user switches between those pages the Accordion slides open each time (you can also see this when switching back and forth to the Accordion component page). This can be distracting. Maybe I overlooked an easy way to disable these transitions? Or is there a more complex/hacky way to disable it?

  • 13

    A11y: Modal and Offcanvas don't get keyboard focus

    When you open a Sveltestrap Modal or Offcanvas with your keyboard, the focus stays on the background instead of moving to the Modal/Offcanvas (so you can interact with any forms/buttons there). This makes navigating using a keyboard really hard/impossible.

    The Bootstrap Modal and Offcanvas do get keyboard focus when I try them out on the Bootstrap website.

    Tested on Firefox 108.0.1 and Chromium 108.0.5359.124.

  • 14

    How do justify tab pane in sveltestrap

    So I have tabs with three element

    <script>
  import { TabContent, TabPane } from 'sveltestrap';
</script>

<TabContent>
  <TabPane tabId="alpha" tab="Alpha" active>
    <h2>Alpha</h2>
  </TabPane>
  <TabPane tabId="bravo" tab="Bravo">
    <h2>Bravo</h2>
  </TabPane>
  <TabPane tabId="charlie" tab="Charlie">
    <h2>Charlie</h2>
  </TabPane>
</TabContent>

    The problem is it defaults the tab alignment to left, how do I set it to justify, I tried adding nav-justified class in TabPane but it doesn't work

    <TabPane class="nav-justified" tabId="alpha" tab="Proses" active>

    Last resort would be to have native html tag with bootstrap class to do it, but I was wondering if it was possible with sveltestrap

  • 15

    Navigation CSS

    I am using the standard navigation code. I have the hover-underline-animation and it works but there is a built in 8px padding that I am unable to override. Any suggestions on any way to have the animation work properly? <div class="hover-underline-animation"> <Dropdown nav inNavbar> <DropdownToggle nav caret>Options </DropdownToggle> <DropdownMenu end> <DropdownItem>Option 1</DropdownItem> <DropdownItem>Option 2</DropdownItem> <DropdownItem divider /> <DropdownItem>Reset</DropdownItem> </DropdownMenu> </Dropdown> </div>

  • 16

    Property not updating as expected in Modal

    I am a React user, and am having trouble understanding how and when values get updated in svelte. I'm just trying to pass a value into a component updated via a user action. Here are the basics of my code:

    <script>
import {Modal, ModalBody} from 'sveltestrap';

let currentPollType = null;

const myPoll = {
    type: 1,
    // ...
};

const onClickBroadcast = function(e, poll) {
    console.log(poll.type);
    currentPollType = poll.type;
    console.log('currentPollType', currentPollType);  // set correctly here
};
</script>

<button
    type="button"
    class="btn btn-primary btn-sm"
    on:click={(e) => onClickBroadcast(e, myPoll)}>
    Broadcast
</button>

<Modal isOpen={true} size="lg">
    <ModalBody>
        {currentPollType}
    </ModalBody>
</Modal>

    So, what am I doing wrong here? The currentPollType prop is always null in the child component. If I put <PollResponses> outside the Modal, it updates as expected.

    StackOverflow issue: https://stackoverflow.com/q/74868657/173630

  • 17

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related