Add Boostrap to Astro site

Guide on adding Bootstrap framework and customizing it in Astro

Sep 20, 2024

Install the dependencies

npm install sass

npm install bootstrap@5.3.3

Add vite configuration in astro.config.mjs file

export default defineConfig({
  vite: {
    css: {
      transformer: "scss",
    },
  },
});

Add a variables file to overwrite variables. Especially Bootstrap themeing. Create a file inside src > styles > _variables.scss

// _variables.scss

$blue:    #0a1630 ;

// And other variables here.

Add an index file inside src directory. src > styles > index.scss

This is the main file which compiles the SASS.


// index.scss

@import "../../node_modules/bootstrap/scss/_functions.scss";
@import "./_variables.scss";
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

Now import this style sheet in the Astro component

// Layout.astro

---
import "../styles/index.scss";

interface Props {
	title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
// other html

#code

#bootstrap