Has anyone used Bootstrap with Anvil?

Hi, I’m considering trying to use Bootstrap in my Anvil app, the first issue I see is getting all the Bootstrap files in:

image

There are probably 50+ files in the folder structure, and as far as I know, you can only load files into Anvil one at a time into the Assets:

image

Has anyone tried, and is there a better way?

Conversely, is there a way to use Anvil app components (repeating panels connected to data tables, Stripe sign up form, etc) ‘outside’ of Anvil and into a traditional HTML page that uses Bootstrap?

Thanks! -Ian

I do not have a faster way to load them all. But I am not sure if they are all needed. Try just using a compiled bootstrap.min.js and bootstrap.min.css as see if the results are what you want.

Hi Ian,

Anvil apps already ship with Bootstrap 3.3 loaded. (docs here). So no need to load all those files into your app!

(Indeed, overwriting the CSS and JS that’s built into Anvil is, as that doc page says, an advanced maneuver that can break your app, as internal parts of Anvil rely on [eg] having Bootstrap and jQuery JS loaded.)


For completeness, I’ll answer your initial question about loading assets into Anvil (even though Bootstrap is already loaded, and in any case it is usually easier to load minified files). If for some reason you do want to load a lot of assets, check the app out using Git (docs). You can then write files into the assets/ directory, commit, and push them back up to Anvil. NB that having lots of assets can make your app a bit slower to load and save in the editor (for now).

2 Likes

A post was split to a new topic: Using a Javascript component in an Anvil app