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