Concept

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

It supports RFS (Responsive Font Sizes).

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.

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

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

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.

Whenever possible, the role and aria attributes are automatically assigned.

You can build advanced sites, such as data-driven applications, without writing any scripts, thanks to the Extend component and Integration features.