Being a CSS newbie, I regard Bootstrap as my 'training wheels'. I'm not confident enough with CSS to create clean-looking designs so I welcome help from wherever I can get it. I like the simplicity of Bootstrap.

In a previous post I demonstrated how to populate the Google Apps sidebar with a Svelte app. The obvious question then is how to add Bootstrap into the equation; do I add Bootstrap into the Svelte app and then hope it carries through into Google Apps, or do I also have to add the Bootstrap library into my Google Apps code?

I'm happy to say that the first option worked well.

Step 1: Download the bootstrap libraries.

$ npm install bootstrap@latest

Step 2: In main.js of the Svelte app I imported the Bootstrap css and js libraries as follows:

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

Step 3: In the demo Svelte component I defined the button shown above as:

<button class="btn btn-warning rounded-5">Bootstrap Button</button>