Using Bootstrap with Svelte

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

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/

<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