Migration

Raw Bootstrap5 HTML

HTML written with Bootstrap 5 can be used without any issues.

However, components that use JavaScript will not work as-is.

Element Content

vue

<template>
 <div class="text-center p-5 your-original-class">
  Element Content
 </div>
</template>

HTML components

use-bootstrap provides HTML components that correspond to HTML elements.

The HTML components in use-bootstrap have a default prefix of 'B-'.

In this document, when using HTML components, the element names are specified in kebab-case with the prefix 'b-'.

The class attribute can be used specifically for custom styling.

Below is an example of converting HTML elements to use-bootstrap HTML components.

The rendered result will be the same as Bootstrap5 HTML.

Element Content

vue

<template>
 <b-div
  text-alignment="center"
  padding="5"
  class="your-original-class"
 >
  Element Content
 </b-div>
</template>

Generic HTML components

There are two types of generic HTML components that allow you to freely set the tag name.

Content1 Content2 ^Content3

vue

<template>
 <b-block
  tag="article"
  margin="x-auto"
  padding="3"
  class="your-original-class"
 >
  <b-inline
   tag="samp"
   margin="x-auto"
   padding="3"
  >
   Content1
  </b-inline>
  Content2
  <b-inline
   tag="sup"
   margin="x-auto"
   padding="3"
  >
   Content3
  </b-inline>
 </b-block>
</template>

Directive

Instead of using HTML components, you can use HTML elements with the v-bootstrap directive.

Element Content

vue

<template>
 <div
  v-bootstrap
  text-alignment="center"
  padding="5"
  class="your-original-class"
 >
  Element Content
 </div>
</template>

Bootstrap components

Bootstrap components that correspond to Bootstrap5 components are available.

The Bootstrap components in use-bootstrap have an empty string and B as prefix characters.

In this document, when using Bootstrap components, the element names are specified in PascalCase with an empty string prefix.

No JavaScript initialization is required to use Bootstrap components.

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

PascalCase with prefix

An example of using the B prefix and PascalCase.

vue

<template>
 <BDropdown>
  <BDropdownToggle color="secondary">
   Dropdown button
  </BDropdownToggle>
  <BDropdownMenu>
   <BDropdownItem to="/">
    Action
   </BDropdownItem>
   <BDropdownItem>Another action</BDropdownItem>
   <BDropdownItem>Something else here</BDropdownItem>
  </BDropdownMenu>
 </BDropdown>
</template>

kebab-case with prefix

An example of using the B prefix and kebab-case.

vue

<template>
 <b-dropdown>
  <b-dropdown-toggle color="secondary">
   Dropdown button
  </b-dropdown-toggle>
  <b-dropdown-menu>
   <b-dropdown-item to="/">
    Action
   </b-dropdown-item>
   <b-dropdown-item>Another action</b-dropdown-item>
   <b-dropdown-item>Something else here</b-dropdown-item>
  </b-dropdown-menu>
 </b-dropdown>
</template>

Multi property values

String values with spaces

Element Content

vue

<template>
 <b-div
  margin="x-auto xl-none"
  padding="3"
  class="your-original-class"
 >
  Element Content
 </b-div>
</template>

Array values with v-bind

Element Content

vue

<template>
 <b-div
  :margin="['x-auto', 'x-l-none']"
  padding="3"
  class="your-original-class"
 >
  Element Content
 </b-div>
</template>

Auto activate links

vue

<template>
 <Dropdown>
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/lang-en/components/dropdowns">
    lang-en
   </DropdownItem>
   <DropdownItem to="/lang-ja/components/dropdowns">
    lang-ja
   </DropdownItem>
   <DropdownItem to="/lang-en/getting-started/migration">
    lang-en migration
   </DropdownItem>
   <DropdownItem to="/lang-ja/getting-started/migration">
    lang-ja migration
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>

Component level theme

vue

<template>
 <Dropdown theme="light">
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>

 <Dropdown theme="dark">
  <DropdownToggle color="secondary">
   Dropdown button
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem to="/">
    Action
   </DropdownItem>
   <DropdownItem>Another action</DropdownItem>
   <DropdownItem>Something else here</DropdownItem>
  </DropdownMenu>
 </Dropdown>
</template>