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
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.