RavensMove

By Vivek - April 16, 2023 · Updated July 10, 2026

Bootstrap 5 in SvelteKit: Install and Import CSS

Bootstrap works with SvelteKit through the normal Vite dependency pipeline. Install the package, import its CSS once from the root layout, and only load Bootstrap’s JavaScript if you actually use plugins such as dropdowns, popovers, or tooltips.

Table of Contents

  1. Create or open a SvelteKit project
  2. Install Bootstrap 5
  3. Import Bootstrap CSS
  4. Use Bootstrap classes
  5. Load optional Bootstrap JavaScript
  6. Common SvelteKit and Bootstrap errors
  7. Related SvelteKit references

Create or open a SvelteKit project

If you already have a SvelteKit app, open its directory and continue to the installation step. For a new project, use the current Svelte CLI:

npx sv create bootstrap-example
cd bootstrap-example
npm install

The official sv create documentation lists the available templates, type-checking options, package managers, and add-ons.

Install Bootstrap 5

Install Bootstrap as a project dependency:

npm install bootstrap

For CSS utilities and components such as grids, cards, buttons, and alerts, that is all you need. If you plan to use Bootstrap JavaScript plugins that position floating elements, install Popper too:

npm install bootstrap @popperjs/core

Bootstrap’s official Vite integration guide also covers Sass customization and selective JavaScript imports.

Import Bootstrap CSS in the root layout

Import Bootstrap once from src/routes/+layout.svelte so the stylesheet is available to every route. Keep any existing layout code and add the import near the top.

For a current Svelte 5 layout:

<script>
  import 'bootstrap/dist/css/bootstrap.min.css';

  let { children } = $props();
</script>

{@render children()}

If your project already imports src/app.css, you can instead add Bootstrap there:

@import 'bootstrap/dist/css/bootstrap.min.css';

Do not import the same global Bootstrap stylesheet from several components. A single root import keeps the cascade predictable and avoids duplicate CSS in development.

Use Bootstrap classes in Svelte components

After the root import, normal Bootstrap classes work in any Svelte component:

<div class="container py-5">
  <h1 class="display-5">Bootstrap in SvelteKit</h1>
  <p class="lead">This content uses Bootstrap's global stylesheet.</p>
  <button class="btn btn-primary">Continue</button>
</div>

If you also use Tailwind or another global CSS framework, inspect the rendered page carefully. Both frameworks define resets and utility classes, so source order can change the final result.

Load optional Bootstrap JavaScript safely

You do not need Bootstrap JavaScript for layout or styling. Prefer Svelte state for interactive components when practical.

If you need a Bootstrap JavaScript plugin, load it in the browser with onMount. This avoids accessing browser globals during server-side rendering:

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    await import('bootstrap');
  });
</script>

For a smaller client bundle, import only the plugin you use. Bootstrap documents its module options in the official JavaScript guide.

Common SvelteKit and Bootstrap errors

Bootstrap styles do not apply

Confirm the import is in src/routes/+layout.svelte or a global stylesheet loaded by that layout. Restart the development server after installing the package.

Cannot find package bootstrap

Run npm install bootstrap in the same directory as the SvelteKit app’s package.json. If you use a workspace or monorepo, make sure the dependency belongs to the app package.

document is not defined

Bootstrap JavaScript was loaded during server-side rendering. Move the dynamic import into onMount, or replace that plugin with a Svelte component.

Dropdowns or tooltips do not open

CSS alone only changes appearance. Install @popperjs/core where required and load the relevant Bootstrap JavaScript plugin in the browser.

Styles change after adding another CSS framework

Check stylesheet order and overlapping class names. Import global frameworks once, then put your own overrides after them.

Related Posts