How to use Bootstrap in Svelte apps (using CDN)

 Bootstrap is one of most used CSS/Sass framework nowadays, even though the bundle size is larger than that of TailwindCSS.

 

So how do we use Bootstrap in Svelte and Svelte kit. Importing the CDN link from the entry point would be an ideal approach.

Svelte

In Svelte apps we can use the app.svelte to import the Link and scripts. Svelte provides svelte:head component for including external links or just use a regular head tag.

<svelte:head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

</svelte:head> 

Svelte Kit

In Svelte Kit there is no entry point, so we can use +page.svelte component file for including bootstrap CSS. For global css , +layout.svelte would be the right place. 

Additionally you may require Sass which require configure svelte preprocess. See the Sass guides. 📖