CODEWITHSUNDEEP
npmbootstrap-4svelte
Louis Chamaillard
Louis Chamaillard

Reputation: 113

How to add bootstrap module in a svelte JS app?

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

Upvotes: 10

Views: 21217

Answers (6)

Developer Mayank
Developer Mayank

Reputation: 21

In Sveltekite, steps need to be followed:

  1. Add the bootstrap scripts file in the static folder as shown in screenshot.
  2. 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>

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

All steps in this single screenshot.

Upvotes: -1

Peter V. M&#248;rch
Peter V. M&#248;rch

Reputation: 15907

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))
})

Upvotes: -1

hot_penguin
hot_penguin

Reputation: 165

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

  1. You need to have Svelte project, see for Svelte and for SvelteKit
  2. Enter the project directory.
  3. Run npm install or yarn (if you prefer yarn) to download dependencies listed in package.json.
  4. 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.
  5. Since Bootstrap requires popper.js and jQuery we also need to add them: npm i @popperjs/core jquery.
  6. 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.

Upvotes: -1

Clemens Tolboom
Clemens Tolboom

Reputation: 1962

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

Upvotes: 1

Han
Han

Reputation: 51

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>

Upvotes: 4

TwitchBronBron
TwitchBronBron

Reputation: 3186

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

  1. Download the bootstrap files and place them inside the public folder of your svelte project.
  2. 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

  1. install rollup-plugin-copy
  2. 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' 
            }]
        }),
       //...
    ],
    //...
};
  1. Add the css link in public/index.html. <link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>

Upvotes: 27

Related Questions