Migration

Migrate from Bootstrap5 codes.

On this page

Raw Bootstrap5 HTML

Element Content

vue

<template>
  <div class="mx-auto p-2 your-original-class">
    Element Content
  </div>
</template>

HTML components

Element Content

vue

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

Generic HTML components

Content1 Content2 ^Content3

vue

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

Directive

Element Content

vue

<template>
  <div
    v-bootstrap
    margin="x-auto"
    padding="2"
    class="your-original-class"
  >
    Element Content
  </div>
</template>

Bootstrap components

vue

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

Multi property values

String values with spaces

Element Content

vue

<template>
  <b-div
    margin="x-auto xl-none"
    padding="2"
    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="2"
    class="your-original-class"
  >
    Element Content
  </b-div>
</template>

Auto activate links

vue

<template>
  <Dropdown>
    <DropdownToggle button="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 button="secondary">
      Dropdown button
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem href="#">
        Action
      </DropdownItem>
      <DropdownItem>Another action</DropdownItem>
      <DropdownItem>Something else here</DropdownItem>
    </DropdownMenu>
  </Dropdown>

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