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

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 (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-07T13:41:12.000Z (3 months ago)
• Last Synced: 2024-11-07T14:29:39.208Z (3 months ago)
• Topics: bootstrap, css, oruga, theme, ui
• Language: SCSS
• Homepage: https://oruga-ui.com
• Size: 1.02 MB
• Stars: 16
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


    





  ⚓ Bootstrap theme for Oruga





    

        

    

    

        

    

    

        

    

    

        

    

    

        

    



### 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.