how to install bootstrap 5 in svelte

How to Install Bootstrap 5 in Svelte

May 18, 2022 By Aaronn

Hello everyone, Today in this section we will install & setup bootstrap 5 in svelte. For this this section we will use vite tool and Svelte 3.

Install Bootstrap 5 in Svelte

Create Svelte Project

npm create vite@latest

Choose svelte

✔ Project name: … svelte-bootstrap
? Select a framework: › - Use arrow-keys. Return to submit.
❯  svelte

There are two way you can install bootstrap 5 in svelte. using sveltestrap and npm install bootstrap.

1) Install Bootstrap 5 in svelte with sveltestrap

First you need to install sveltestrap via NPM

npm install sveltestrap svelte

Adding Bootstrap

Sveltestrap does not include or embed Bootstrap CSS so this needs to be installed by you, either by including Bootstrap CSS to your layout (1) , or installed from npm (2).

Either static HTML layout

 <link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css">


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Svelte + Vite App + Bootstrap 5</title>
    <link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>


  import { Button, Col, Row } from 'sveltestrap';

      <Button color="primary">Button</Button>
      <Button color="primary" outline>Button</Button>
      <Button color="danger">Button</Button>
      <Button color="danger" outline>Button</Button>

  main {
    text-align: center;
    padding: 1em;
    margin: 0 auto;
Bootstrap 5 Svelte button

Bootstrap 5 Svelte button

2. or install via npm

npm install bootstrap

Import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

3. Install Bootstrap 5 in Svelte Via CDN

You can use svelte <svelte:head> element allows you to insert elements inside the <head> of your document:

	  <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<button class="btn btn-primary">