how to install bootstrap 5 in svelte

How to Install Bootstrap 5 in Svelte

updated 18/05/22 By frontendshape

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 [email protected]

Choose svelte

✔ Project name: … svelte-bootstrap
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
  react
  preact
  lit
❯  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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>


App.svelte

<script>
  import { Button, Col, Row } from 'sveltestrap';
</script>

<main>
  <Row>
    <Col>
      <Button color="primary">Button</Button>
      <Button color="primary" outline>Button</Button>
      <Button color="danger">Button</Button>
      <Button color="danger" outline>Button</Button>
    </Col>
  </Row>
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
    margin: 0 auto;
  }
</style>
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:

<svelte:head>
	  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</svelte:head>
<div>
	<button class="btn btn-primary">
	Button	
	</button>
</div>

Enter Your Search Query