[SOLVED] Import Bootstrap in Astro

Import Bootstrap in Astro

I am currently working on Astro (astro.build) and would like to use it with the latest Bootstrap version.

Does anyone know about Astro and can please explain to me how to properly integrate Bootstrap?

Didn't find anything on the internet or here in the forum, at least there wasn't a clear answer.

Thank you very much!

Solution

A couple of options here:

CDN

In your index.astro file, you can add both Bootstrap latest CSS and JS in the header and body sections respectively like so

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

npm

You can install Bootstrap via NPM like so

npm install bootstrap@latest

And require it in your index.astro file within the frontmatter fences

You can check out this starter template for more ideas on usage https://github.com/twbs/bootstrap-npm-starter