# 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`

```xml
<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:

```xml
<!-- 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:

```svelte
<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](https://sveltestrap.js.org/?path=/story/components--get-started)

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.

![Screenshot from 2023-03-08](https://cdn.hashnode.com/res/hashnode/image/upload/v1678254560080/79e292bf-bef2-4584-a9d7-48da60728789.png align="center")

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](https://makeinfo.co/products) as well!

### Reference

[https://stackoverflow.com/questions/71952922/how-to-add-bootstrap-5-and-other-global-packages-to-a-sveltekit-project](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.