Svelte : works with Bootstrap

2 min readApr 19, 2020

Use UI library makes our life much easier while we developing user interface, save tons of time for prototyping !!!

It makes your development much easier if you install ui library like bootstrap in your sapper project.

First download sapper template to your local drive - npx degit "svelte/sapper-template#webpack" my-app
Then install bootstrap library - npm i bootstrap
Copy node_modules/bootstrap/dist/css/bootstrap.min.css and paste under static directory
Then include it in template.html <link href="bootstrap.min.css" rel="style" />

Now we are good to to. To test it, we go to getbootstrap.com copy a form component and paste into our index.svelte file.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

The results

Since bootstrap.min.css takes about 155KB, which is kinda big, we can remove unused css with purgecss

First we install purgecss - npm i purgecss -D
Then we create a dist foler under static directory
In package.json we add scripts to execute purge command

// the command targets all .svelte files under `src` directory and remove all unused css, rebuild the `bootstrap.min.css` and put the production build under `src/dist` directory"scripts": {
  "purgecss": "purgecss --css static/bootstrap.min.css --content src/*.svelte --output static/dist"
}

Finally in src/template.html we include the build css file

<head>
  <!-- for development -->
  <link ref="bootstrap.min.css" rel="stylesheet" />  <!-- for production -->
  <link ref="dist/bootstrap.min.css" rel="stylesheet" />  
</head>

If we want a production build we run npm run purgecss to generate a purged bootstrap.min.css file under static/dist directory. During development the bootstrap.min.css we use is under static directory !

And now we are ready to get our project up and running !!!

Svelte : works with Bootstrap

The results

Written by Stephen Lai