Concept

Using Bootstrap 5 SCSS with a built-in color generator to customize your application.

It supports RFS (Responsive Font Sizes).

It is written with the Vue3 Composition API.

Bootstrap 5 JavaScript and Popper.js are not required, so you don't need to include them.

use-bootstrap consists of properties set in the component, which is different from Bootstrap 5, where values are set in the class or data attributes.

The class attribute can accept any values, making it complicated and low in readability, and difficult to inspect the values.

The properties of components are clear, and the values can be inspected.

We aim for the output to be identical to that of Bootstrap 5.

The SCSS of various Bootstrap 5 templates can be used as-is.

Clear property definitions and parent-child relationships of components are crucial, especially when using dynamic rendering systems, CMS, or WYSIWYG components mainly composed of JSON data.

The property attribute can be assigned a value or expression using v-bind, as well as a string.

Numerical values, arrays (with space separators), and objects (with comma separators) can be used as strings. Assignment by an empty attribute is also supported.

It supports UnoCSS by using the un-prefixed class attribute value.

It supports nuxt-link by using the to attribute.

It also supports nuxt-image, nuxt-icon, nuxt-font, and vue-use.

The animation effect is supported. Check the visual effect settings of the OS and browser to confirm the movement.

As free layout is available like in Bootstrap 5, a component doesn't need a high level of abstraction, just a moderate level.

You can omit the ID for a component. It is given automatically as necessary. If set manually, it will be able to accept events from non-descendant elements.

As far as possible, the role attribute and the aria attribute are given automatically.