How to Install Bootstrap 5 in SvelteKit: A Step-by-Step Guide

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.

Feel free to reach out to us for any website or software development needs. If you enjoyed our content, don’t forget to explore our products as well!

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.