How to add bootstrap module in a svelte JS app?

Asked 21/1, 2020 at 13:44 Answered 15/5 at 5:0

I'm very new to svelte ( like many of us ^^ ), and I didn't manage to add bootstrap to my app. Tried to run 'npm add bootstrap' but it said that I need peer jquery dependencie. Here is the terminal render

What I don't understand is why the package has been added and I can't still use the bootstrap classes. Second point, why does it talk about peer dependencies? What's the link here? I don't know if I'm missing something but if you guys got the solution it will help a lot. Thank you

npm add bootstrap

npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

+ [email protected]
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```

Straighten answered 21/1, 2020 at 13:44 Comment(2)

it's just a warning. Your bootstrap was downloaded to a node_modules folder. – Banyan 21/1, 2020 at 13:46

Sure that what I thought but like I said I still can't use bootstrap classes – Straighten 21/1, 2020 at 13:47

Your problem is that installing bootstrap into node_modules doesn't automatically include the files in your application. There are a few different ways you can accomplish this.

Option 1: Copy the files to `/public` manually

Download the bootstrap files and place them inside the public folder of your svelte project.
Add the css link in public/index.html. <link rel='stylesheet' href='bootstrap/dist/css/bootstrap.min.css'>.

The downside of this approach is that you will need to commit the bootstrap folder to your version control system, which is generally frowned upon.

Option 2: Copy the files to `/public` using rollup

install rollup-plugin-copy
Update rollup.config.js to include the copy plugin. Here is a snippet of the important parts from a rollup.config.js file from a fresh svelte install.

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

export default {
    //...
    plugins: [
        //...
        copy({
            targets: [{ 
                src: 'node_modules/bootstrap/dist/**/*', 
                dest: 'public/vendor/bootstrap' 
            }]
        }),
       //...
    ],
    //...
};

Add the css link in public/index.html. <link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>

Misericord answered 21/1, 2020 at 16:52 Comment(4)

StackOverflow should allow two positive votes when someone saves our lives like that! :-) – Mullins 5/3, 2021 at 22:52

I'd love to see the official Svelte docs show ways to handle this type of scenario, because this is an extremely common thing to do! Glad I could help. :) – Misericord 6/3, 2021 at 23:43

If you created the app using vite, you need to add this to vite.config.ts instead. In the export default defineConfig, in plugins, add the copy command and copy targets. You may want also want to just include the bootstrap.min.css and bootstrap.min.css.map to save space. – Intercalary 28/3, 2023 at 10:49

I was using vite and had to use import { viteStaticCopy } from 'vite-plugin-static-copy' instead of rollup-plugin-copy, but otherwise it didn't work. – Antonyantonym 10/10, 2023 at 10:16

This answer is an addition to the accepted answer's second option. (I cannot comment yet..)

Instead of copying all of Bootstrap's files to the public folder, you can also pick and choose. For example, I only needed the minified CSS and the bundled minified JavaScript, so I configured the copy plugin like this:

//...
import copy from "rollup-plugin-copy";

export default {
  //...
  plugins: [
    //...
    copy({
      targets: [
        {
          src: "node_modules/bootstrap/dist/css/bootstrap.min.css",
          dest: "public/vendor/bootstrap/css",
        },
        {
          src: "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          dest: "public/vendor/bootstrap/js",
        },
      ],
    }),
    //...
  ],
  //...
};

The CSS can be included in the <head> tag in public/index.html:

<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>

The JavaScript can be included inside of the <body> tag (at the end) in public/index.html:

<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

Alvar answered 20/10, 2021 at 13:6 Comment(0)

There is also sveltestrap as one of the Svelte Society design systems

Bred answered 24/3, 2022 at 13:57 Comment(0)

-1

I successfully added Bootstrap 5 to my Svelte project, here is how to do this:

You need to have Svelte project, see for Svelte and for SvelteKit
Enter the project directory.
Run npm install or yarn (if you prefer yarn) to download dependencies listed in package.json.
Then add Bootstrap with npm install bootstrap (or npm i bootstrap) or yarn add bootstrap. You can specify version if you want. Its folder will appear among other dependencies in node_modules.
Since Bootstrap requires popper.js and jQuery we also need to add them: npm i @popperjs/core jquery.
Now that we have Bootstrap installed (its source code is in node_modules folder) we need to link it to our application. Since Svelte app is basically an html page we can simply add links to Bootstrap CSS and JS in src/app.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    %sveltekit.head%
</head>

<body>
    <div>%sveltekit.body%</div>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Using aliases for node_modules is not preconfigured in vite.config.js by default.

That's it, this worked for me.

Kori answered 16/7, 2022 at 15:44 Comment(1)

This works until you try npm run build and discover that the bootstrap files aren't find anywhere under build/. – Antonyantonym 6/10, 2023 at 6:33

-1

This is what I did:

import { onMount } from 'svelte';

onMount(async () => {
    await import('bootstrap/dist/css/bootstrap.css')
    window.bootstrap = await import('bootstrap/dist/js/bootstrap.esm.js')
    // Some code that uses bootstrep - e.g.:
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})

Saffian answered 10/10, 2023 at 10:19 Comment(0)

-1

In Sveltekite, steps need to be followed:

Add the bootstrap scripts file in the static folder as shown in screenshot.
Add the script tag in HTML head of the root app.html or index.html as per your project configuration.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="%sveltekit.assets%/dist/js/bootstrap.bundle.min.js"></script>
        %sveltekit.head%
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>

    </body>
</html>

Voilla, your bootstrap components that depends on bootstrap bundle dist files start working as required.

All steps in this single screenshot.

Daria answered 15/5 at 5:0 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Option 1: Copy the files to /public manually

Option 2: Copy the files to /public using rollup

Recommended topics

Hot tags

Option 1: Copy the files to `/public` manually

Option 2: Copy the files to `/public` using rollup