If you want to create a modern and responsive web application with SvelteKit, you can easily integrate Bootstrap 5 into your project. In this blog post, we will guide you through the process of installing Bootstrap 5 in your SvelteKit application, step-by-step.

To install Bootstrap 5 in SvelteKit, you can follow these steps:

First, create a new SvelteKit project by running the following command in your terminal:

The easiest way to start building a SvelteKit app is to run npm create:

npm create svelte@latest my-app cd my-app npm install npm run dev

Next, navigate to your project directory and add the bootstrap links on the head tag to the src/app.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Alternative Solution without CDN

Now if don't want to use the CDN solution, then another way is to install Bootstrap 5 using npm:

cd my-sveltekit-app
npm install bootstrap@next

Once Bootstrap is installed, you need to import its styles and JavaScript into your SvelteKit app. To do this, open the src/app.html file and add the following code to the head section:

<!-- Add these styles to the head of your HTML file --> 
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"> <!-- Add these scripts to the bottom of your HTML file, just before the closing body tag -->
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Finally, you can use Bootstrap classes and components in your SvelteKit app. For example, you can add a Bootstrap navbar to your app by creating a new Svelte component and adding the following Svelte code:

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

  // Add this to initialize the Bootstrap tooltip
  onMount(() => {
    window.$('[data-bs-toggle="tooltip"]').tooltip()
  });
</script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">My SvelteKit App</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Note that you need to initialize Bootstrap components that require JavaScript, like tooltips or modals, in the onMount function using the window.$ function.

That's it! You can now use Bootstrap 5 in your SvelteKit app.

My Experience with Sveltestrap

Before using the above method, I used the Sveltestrap library to add Bootstrap and use the components. It was not working as I expected and will not suggest from my side.

Reference

https://stackoverflow.com/questions/71952922/how-to-add-bootstrap-5-and-other-global-packages-to-a-sveltekit-project

I was inspired by Stack Overflow to write this content, which discusses various ways to solve a particular problem. However, I chose to present a simple and easy-to-understand approach.