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.
If you generated your Aurelia 2 application using the CLI, all you need to do is grab both the CSS and Javascript files from the Bootstrap v5 site here and add them into the head.
<!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://cdn.jsdelivr.net/npm/popper.js@1.16.0/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.
