3

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!

isherwood
  • 58,414
  • 16
  • 114
  • 157
Andreas
  • 39
  • 1
  • 7
  • Please see [ask] and take the [tour]. Your question needs improvement. – isherwood Sep 28 '22 at 13:48
  • The short answer is that you'd either add resources as normal (say via CDN) or import from a repository (such as NPM). AstroJS seems somewhat apathetic about all that. – isherwood Sep 28 '22 at 13:50

2 Answers2

2

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

Kelvin Omereshone
  • 726
  • 3
  • 13
1

For npm/yarn:

index.astro

---
import "bootstrap/dist/css/bootstrap.min.css";
import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min.js?url";
---
<html>
<script src={bootstrap}></script>
<!-- Your page here -->
</html>
maker3
  • 59
  • 3