# @oruga-ui/theme-bootstrap

> Bootstrap theme for Oruga

Latest version **0.12.0** (published 2026-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @oruga-ui/theme-bootstrap
pnpm add @oruga-ui/theme-bootstrap
yarn add @oruga-ui/theme-bootstrap
bun add @oruga-ui/theme-bootstrap
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.12.0 |
| Published | 2026-08-04 |
| First published | 2023-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 540.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 17 |
| Maintainers | mlmoravek, jtommy, astagi |

## Links

- npm: https://www.npmjs.com/package/@oruga-ui/theme-bootstrap
- Repository: https://github.com/oruga-ui/theme-bootstrap
- Homepage: https://github.com/oruga-ui/theme-bootstrap#readme
- Issues: https://github.com/oruga-ui/theme-bootstrap/issues
- npm.io page: https://npm.io/package/@oruga-ui/theme-bootstrap

## Dependencies (1)

- [bootstrap](https://npm.io/package/bootstrap.md) ^5.3.8

## Recent versions

- 0.12.0 (latest) — 2026-08-04
- 0.11.1 — 2026-08-03
- 0.11.0 — 2026-03-10
- 0.10.4 — 2026-01-21
- 0.10.3 — 2025-12-06
- 0.10.2 — 2025-11-21
- 0.10.1 — 2025-11-17
- 0.10.0 — 2025-11-07
- 0.9.4 — 2025-07-21
- 0.9.3 — 2025-07-18
- 0.9.2 — 2025-07-15
- 0.9.1 — 2025-06-16
- 0.9.0 — 2025-06-16
- 0.8.2 — 2025-03-14
- 0.8.1 — 2025-03-13
- … 23 more at https://npm.io/package/@oruga-ui/theme-bootstrap/versions

## README

<p align="center">
    <img width="150" src="https://raw.githubusercontent.com/oruga-ui/theme-bootstrap/main/public/logo.svg" />
</p>

<p align="center">
  ⚓ <i><a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> theme for <a href="https://oruga-ui.com" target="_blank">Oruga</a></i>
</p>

<p align="center">
    <a href="https://www.npmjs.com/package/@oruga-ui/theme-bootstrap">
        <img src="https://img.shields.io/npm/v/@oruga-ui/theme-bootstrap.svg?logo=npm" alt="Oruga Bootstrap theme version" />
    <a>
    <a href="https://www.npmjs.com/package/@oruga-ui/theme-bootstrap">
        <img src="https://img.shields.io/npm/dt/@oruga-ui/theme-bootstrap.svg" alt="Oruga Bootstrap theme downloads" />
    </a>
    <a href="https://getbootstrap.com/docs">
        <img src="https://img.shields.io/badge/bootstrap-5.3.x-712cf9" alt="Bootstrap version">
    </a>
    <a href="https://vuejs.org">
        <img src="https://img.shields.io/badge/vue.js-3.x-4fc08d" alt="Vue.js version">
    </a>
    <a href="https://discord.gg/RuKuBYN">
        <img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord"  alt="Discord Link"/>
    </a>
</p>

### Install

```sh
npm install @oruga-ui/theme-bootstrap
```

or

```sh
yarn add @oruga-ui/theme-bootstrap
```

### Configure

```js
import { createApp } from "vue";
import App from "./App.vue";

// import Oruga
import Oruga from "@oruga-ui/oruga-next";

// import Oruga Bootstrap theme config
import { bootstrapConfig } from "@oruga-ui/theme-bootstrap";

// import Bootstrap and Oruga styling
import "@oruga-ui/theme-bootstrap/style.css";

createApp(App).use(Oruga, bootstrapConfig).mount("#app");
```

Please note, this package can be used without importing any other Oruga styling or theme.

### Customization (SASS/SCSS)

You have two options for including the theme: include all the styling at once (including the full Bootstrap), or include the Oruga theme and Bootstrap separately.

```scss
// Option A: Include all styling (including Bootstrap)

// Include any default variable overrides here (though functions and maps won't be available here)
// ...

// Include the Oruga Bootstrap theme with Bootstrap included
@import "/node_modules/@oruga-ui/theme-bootstrap/scss/theme-build";

// Then add additional custom code here
// ...
```

```scss
// Option B: Include the Oruga theme and Bootstrap separately

// 1. Include Bootstrap functions first (so you can manipulate colors, SVGs, calc, etc)
@import "/node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
// ...

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "/node_modules/bootstrap/scss/variables";
@import "/node_modules/bootstrap/scss/variables-dark";

// 4. Include the Oruga Bootstrap theme variables
@import "/node_modules/@oruga-ui/theme-bootstrap/scss/utils/variables";

// 5. Include any default map overrides here
// ...

// 6. Include the remaining parts or full Bootstrap
@import "/node_modules/bootstrap/scss/bootstrap";

// 7. Include the Oruga Bootstrap theme components styles
@import "/node_modules/@oruga-ui/theme-bootstrap/scss/theme";

// 8. Add additional custom code here
// ...
```

### Override default config

In case you want to replace the default style of a component you can override or add new classes changing `bootstrapConfig`; more details about components customization on https://oruga-ui.com/documentation/configuration

```js
import { createApp } from "vue";

import Oruga from "@oruga-ui/oruga-next";
import { bootstrapConfig } from "@oruga-ui/theme-bootstrap";

import "@oruga-ui/theme-bootstrap/style.css";

const custombootstrapConfig = {
    ...bootstrapConfig,
    checkbox: {
        override: true,
        rootClass: "checkbox",
    },
};

createApp(App).use(Oruga, custombootstrapConfig).mount("#app");
```

## Contributors

Thank you to everyone involved for improving this project, day by day 💚

<a href="https://github.com/oruga-ui/theme-bootstrap">
  <img
  src="https://contrib.rocks/image?repo=oruga-ui/theme-bootstrap"
  />
</a>

[Complete list](.github/CONTRIBUTORS.md).

## Credits

Logo designed by [mouadTaoussi](https://github.com/mouadTaoussi)

## License

Code released under [MIT](https://github.com/oruga-ui/theme-bootstrap/blob/main/LICENSE) license.

---
_Source: https://npm.io/package/@oruga-ui/theme-bootstrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._