Using Bootstrap with Svelte
Tags: svelte, beginners, javascript
Published: 2021-09-24 12:36:48

---
title: Using Bootstrap with Svelte
published: true
date: 
tags: svelte, beginners, javascript
canonical_url: https://eternaldev.com/blog/using-bootstrap-with-svelte
cover_image: https://www.eternaldev.com/static/e41a586253f7d345fb24f4b1ed5c243b/aa1b3/sveltebootstrapposter.webp
---

## What is Bootstrap?

Bootstrap is an open-source CSS framework that helps in building mobile-first front-end web development. It comes with lots of templates and CSS classes which helps in reducing our application development time and effort.

## Create the Svelte project

```
npx degit sveltejs/template svelte-bootstrap
cd my-svelte-project

npm install
npm run dev
```

Create a new project with svelte using the above commands

You can also look up the official documentation for getting started with Svelte - [https://svelte.dev/blog/the-easiest-way-to-get-started](https://svelte.dev/blog/the-easiest-way-to-get-started)

## Option 1 - Adding Bootstrap via CDN

Bootstrap has a simple CDN link that contains all the bundled CSS and js files needed for your project. This is probably the easiest option to include Bootstrap in your project. Just add the below links to your `public/index.html`

Go to the bootstrap website and copy the CDN links present. As of writing this tutorial, the latest version of Bootstrap is 5

[https://getbootstrap.com/docs/5.0/getting-started/download/](https://getbootstrap.com/docs/5.0/getting-started/download/)

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

## Option 2 - Adding via Node Modules

You can add the bootstrap as an npm package and add it to your application after updating the rollup config files.

### Installing bootstrap package

```
npm install bootstrap
```

After running this command, Bootstrap will be added to your `node_modules` folder. We need to copy it to the `public` folder for svelte. We can automate this using the copy plugin of rollup

### Installing rollup copy plugin

```
npm install rollup-plugin-copy -D
```

### Update the rollup config file

```
//...........
import copy from 'rollup-plugin-copy'

//...........
export default {
	//...........
	plugins: [
		
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),
		// Add bootstrap files to public folder
		copy({
            targets: [{ 
                src: 'node_modules/bootstrap/dist/**/*', 
                dest: 'public/vendor/bootstrap' 
            }]
        }),

		//...........
};
//...........
```

After adding this copy plugin, you can verify the public folder to make sure `vendor` folder is created and `bootstrap` folder is available.

Most of the config is done. We just have to add the link to these files in our `index.html` folder

```
<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
```

That's it. Start using bootstrap classes in your application

Join our discord channel for more discussion or questions

Discord - [https://discord.gg/AUjrcK6eep](https://discord.gg/AUjrcK6eep)