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

Read More

How to include external CSS and Scripts in Svelte

 One of the problem I was faced in Reactjs and Vue is linking external style sheets and script from CDN which may require special approach.
 

In Svelte we can include the CSS and Script using the dedicated <svelte:head> tag.

<svelte:head>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" ...>

</svelte:head>

Sometimes we also need to add external script which provide special functionality to our app, such as bootstrap carousel actions.  drop the script at the head section.

<svelte:head>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" ... crossorigin="anonymous"></script>

</svelte:head>

Svelte also let us import external CSS using the import statement in styles.

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css");

Read More