April 16, 2023

How to install Bootstrap in Sveltekit? A Step-by-Step Guide

In this tutorial, I’ll demonstrate how to integrate Bootstrap with SvelteKit to help you create responsive and visually appealing web applications.

Table of Contents

  1. Setting up the SvelteKit project
  2. Integrating Bootstrap CSS
  3. Video Tutorial

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.

Video Tutorial: