RavensMove

By Vivek - April 16, 2023

Install Bootstrap in SvelteKit

This guide shows how to install Bootstrap in a SvelteKit project and import the Bootstrap CSS in the right place. The safest setup is to import Bootstrap once from the root layout so every route can use Bootstrap classes without duplicating styles.

Table of Contents

  1. Setting up the SvelteKit project
  2. Integrating Bootstrap CSS
  3. Using Bootstrap classes
  4. Common errors
  5. Video Tutorial
  6. Related SvelteKit guides

Setting up the SvelteKit project:

npx degit sveltejs/kit-template bootstrap-example
cd bootstrap-example
npm install

move into the project directory, and install bootstrap.

npm install bootstrap

Integrating Bootstrap CSS:

To apply Bootstrap styles, it’s necessary to import the CSS file. Head over to src/routes/ directory and create a new file called +layout.svelte and add the following lines:

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

<slot />

Congratulations! You’ve now successfully installed Bootstrap in your SvelteKit project.

Using Bootstrap classes

After the CSS import is in the root layout, Bootstrap utility classes and components can be used in any Svelte route or component.

<div class="container py-5">
  <h1 class="display-5">Bootstrap in SvelteKit</h1>
  <p class="lead">This content is styled by Bootstrap CSS.</p>
  <button class="btn btn-primary">Continue</button>
</div>

If you also use Tailwind or another utility framework, check the final page carefully because class names and reset styles can overlap.

Common errors

Bootstrap styles do not apply

Confirm that the import is inside src/routes/+layout.svelte or another file that is loaded by the route you are testing.

The package cannot be resolved

Run npm install bootstrap or yarn add bootstrap, then restart the dev server so Vite can pick up the new package.

JavaScript components do not work

This guide imports only Bootstrap CSS. Interactive Bootstrap components such as modals and dropdowns need JavaScript behavior. In Svelte, it is often better to build that behavior with Svelte state instead of importing Bootstrap’s browser JavaScript.

Video Tutorial:

Related Posts