Login/Register
Import Bootstrap in Astro
Asked Answered
Solved twitter-bootstrapintegrationbootstrap-5astrojs
C

4

9

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!

Cliffordclift answered 28/9, 2022 at 9:55 Comment(2)
Please see How to Ask and take the tour. Your question needs improvement. – Cavallaro
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. – Cavallaro
S
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/[email protected]/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/[email protected]/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

Shoeshine answered 13/11, 2022 at 18:59 Comment(0)
W
6

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>
Wainscot answered 19/11, 2022 at 21:57 Comment(0)
S
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/[email protected]/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/[email protected]/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

Shoeshine answered 13/11, 2022 at 18:59 Comment(0)
C
1

I kept getting Typescript errors <script> uses an expression for the src attribute and will be ignored. and switched to Astro's suggested CSS and JS implementation using import.

# install via npm
npm install bootstrap@latest

and then use import in your .astro file

---
// Astro will bundle and optimize this automatically
import "bootstrap/dist/css/bootstrap.min.css";
---

<html>
  <!-- Your page here -->
</html>

<script>
  // Astro will bundle and process this automatically
  import 'bootstrap/dist/js/bootstrap.bundle.min.js'
</script>
Chalkboard answered 27/12, 2023 at 18:0 Comment(0)
D
-1

You can add React as an integration in Astro, then install the React Bootstrap package.

THat's how I was able to use React icons in an Astro project I'm working on.

Diverticulosis answered 14/4 at 18:19 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.