• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How to Easily Add Bootstrap 5 Into an Aurelia 2 Application

Aurelia 2 Tutorials · September 21, 2020

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.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • Thoughts on the Flipper Zero
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Reliably waiting for network responses in Playwright
  • Wild Natural Deodorant Review

Recent Comments

  • Dwayne on Is Asking Developers How to Write FizzBuzz Outdated?
  • kevmeister68 on Is Asking Developers How to Write FizzBuzz Outdated?
  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz