\n\n### Install\n\n```sh\nnpm install @oruga-ui/theme-bootstrap\n```\n\nor\n\n```sh\nyarn add @oruga-ui/theme-bootstrap\n```\n\n### Configure\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n\n// import Oruga\nimport Oruga from \"@oruga-ui/oruga-next\";\n\n// import Oruga Bootstrap theme config\nimport { bootstrapConfig } from \"@oruga-ui/theme-bootstrap\";\n\n// import Bootstrap and Oruga styling\nimport \"@oruga-ui/theme-bootstrap/style.css\";\n\ncreateApp(App).use(Oruga, bootstrapConfig).mount(\"#app\");\n```\n\nPlease note, this package can be used without importing any other Oruga styling or theme.\n\n### Customization (SASS/SCSS)\n\nYou 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.\n\n```scss\n// Option A: Include all styling (including Bootstrap)\n\n// Include any default variable overrides here (though functions and maps won't be available here)\n// ...\n\n// Include the Oruga Bootstrap theme with Bootstrap included\n@import \"/node_modules/@oruga-ui/theme-bootstrap/scss/theme-build\";\n\n// Then add additional custom code here\n// ...\n```\n\n```scss\n// Option B: Include the Oruga theme and Bootstrap separately\n\n// 1. Include Bootstrap functions first (so you can manipulate colors, SVGs, calc, etc)\n@import \"/node_modules/bootstrap/scss/functions\";\n\n// 2. Include any default variable overrides here\n// ...\n\n// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)\n@import \"/node_modules/bootstrap/scss/variables\";\n@import \"/node_modules/bootstrap/scss/variables-dark\";\n\n// 4. Include the Oruga Bootstrap theme variables\n@import \"/node_modules/@oruga-ui/theme-bootstrap/scss/utils/variables\";\n\n// 5. Include any default map overrides here\n// ...\n\n// 6. Include the remaining parts or full Bootstrap\n@import \"/node_modules/bootstrap/scss/bootstrap\";\n\n// 7. Include the Oruga Bootstrap theme components styles\n@import \"/node_modules/@oruga-ui/theme-bootstrap/scss/theme\";\n\n// 8. Add additional custom code here\n// ...\n```\n\n### Override default config\n\nIn 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\n\n```js\nimport { createApp } from \"vue\";\n\nimport Oruga from \"@oruga-ui/oruga-next\";\nimport { bootstrapConfig } from \"@oruga-ui/theme-bootstrap\";\n\nimport \"@oruga-ui/theme-bootstrap/style.css\";\n\nconst custombootstrapConfig = {\n ...bootstrapConfig,\n checkbox: {\n override: true,\n rootClass: \"checkbox\",\n },\n};\n\ncreateApp(App).use(Oruga, custombootstrapConfig).mount(\"#app\");\n```\n\n## Contributors\n\nThank you to everyone involved for improving this project, day by day 💚\n\n\n \n\n\n[Complete list](.github/CONTRIBUTORS.md).\n\n## Credits\n\nLogo designed by [mouadTaoussi](https://github.com/mouadTaoussi)\n\n## License\n\nCode released under [MIT](https://github.com/oruga-ui/theme-bootstrap/blob/main/LICENSE) license.\n","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/oruga-ui/theme-bootstrap/main/public/logo.svg\"){kind=logo}
\n![\"Oruga](\"https://img.shields.io/npm/v/@oruga-ui/theme-bootstrap.svg?logo=npm\")
\n \n \n ![\"Oruga](\"https://img.shields.io/npm/dt/@oruga-ui/theme-bootstrap.svg\")
\n \n \n ![\"Bootstrap](\"https://img.shields.io/badge/bootstrap-5.3.x-712cf9\"){kind=icon}
![\"Vue.js](\"https://img.shields.io/badge/vue.js-3.x-4fc08d\"){kind=icon}
![\"Discord](\"https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord\"){kind=icon}
\n \n