https://github.com/oruga-ui/theme-bootstrap
⚓ Customization of Oruga components with Bootstrap framework
https://github.com/oruga-ui/theme-bootstrap
bootstrap css oruga theme ui ux
Last synced: 3 months ago
JSON representation
⚓ Customization of Oruga components with Bootstrap framework
- Host: GitHub
- URL: https://github.com/oruga-ui/theme-bootstrap
- Owner: oruga-ui
- License: mit
- Created: 2021-12-28T18:43:20.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-07-15T12:04:13.000Z (4 months ago)
- Last Synced: 2025-07-16T00:22:01.849Z (4 months ago)
- Topics: bootstrap, css, oruga, theme, ui, ux
- Language: SCSS
- Homepage: https://oruga-ui.com
- Size: 961 KB
- Stars: 16
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
### 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/dist/bootstrap.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/dist/scss/bootstrap-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/dist/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/dist/scss/bootstrap";
// 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.io/documentation/#customization
```js
import { createApp } from "vue";
import Oruga from "@oruga-ui/oruga-next";
import { bootstrapConfig } from "@oruga-ui/theme-bootstrap";
import "@oruga-ui/theme-bootstrap/dist/bootstrap.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 💚
[Complete list](CONTRIBUTORS.md).
## License
Code released under [MIT](https://github.com/oruga-ui/theme-bootstrap/blob/main/LICENSE) license.
