Migration

Raw Bootstrap5 HTML

Element Content

vue

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

HTML components

Element Content

vue

<template>
 <b-div
  text-alignment="center"
  padding="5"
  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="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

Element Content

vue

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

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>

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>