Astro-Bootstrap



Bootstrap components crafted for use with Astro

For docs, view the docs website

Quick Start

Step 1 - Create a new astro project

``bash

create a new project with npm

npm create astro@latest

create a new project with yarn

yarn create astro

create a new project with pnpm

pnpm create astro@latest
`

Step 2 - Install with the package manager of your choice:

`bash
#npm
npm install astro-bootstrap

yarn

yarn add astro-bootstrap

pnpm

pnpm add astro-bootstrap
`

Step 3 - Ensure that you have bootstrap v5.x installed, along with type definitions (it's a peer dependency, so install the version that you want)

e.g.

`bash
#npm
npm install bootstrap @popperjs/core @types/bootstrap

yarn

yarn add bootstrap @popperjs/core @types/bootstrap

pnpm

pnpm add bootstrap @popperjs/core @types/bootstrap
`

Step 4 - Ensure that the bootstrap CSS (your modified version of it) is being loaded

`astro
---
// /src/layouts/Layout.astro
import 'bootstrap/dist/css/bootstrap.css'
---


.....
`

Step 6 - Import and use an Astro-Bootstrap component

e.g.

`astro
---
// /src/layouts/Layout.astro
export interface Props {
title: string;
}
const { title } = Astro.props;

import 'bootstrap/dist/css/bootstrap.css'
import { Breadcrumb } from 'astro-bootstrap';
---
















``