The Bootstrap 5 alpha was announced a few months ago and I instantly jumped on it and started using it. The lack of jQuery and more robust colour palettes as well as grid system were too hard to pass up.
If you are reading this in the future and Bootstrap 5 has already been released, these instructions will still work for you. Admittedly, the approach I am taking here avoids the need for any package manager like Npm or Yarn, I’m going to show you a simple way.
The easiest way is using the CDN version of Bootstrap 5 and adding it into the
index.ejs file in your root directory. This approach also works for Aurelia v1 as well and avoids the need of bundling it, gives you browser caching and other benefits.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Aurelia</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" /> <script src="https://firstname.lastname@example.org/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous" ></script> </head> <body> <my-app></my-app> </body> </html>
This is what my
index.ejs file looks like in my Aurelia 2 application. Now, make sure you get the latest files from the Bootstrap site as the versions change (the above is referencing alpha1) and the integrity hashes also change as well.
While you can also install using Npm/Yarn and import it that way, Bootstrap will conflict with Shadow DOM as well as CSS Modules (if you use any of those options) so adding them into the
index.ejs file avoids this issue entirely and globalises your CSS.