twitter-bootstrapbootstrap-4vue-componentbootstrap-5bootstrap-vue

Can I use Bootstrap 5 with Vue v2 and Bootstrap-vue Components?

The project that I work on is created with Nuxt v2 (Vue v2, Bootstrap v4, Bootstrap-vue). The project uses bootstrap-vue components like:

  <b-navbar toggleable="md" type="dark" :sticky="true">
    <b-navbar-brand>...</b-navbar-brand>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="ml-auto">...</b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          ...
          <b-dropdown-item>...</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

I want to migrate to Bootstrap v5. So, my question is can I keep using bootstrap-vue components with Bootstrap 5? Thank you!

Solution

  • You can, but since class names have changed between Bootstrap 4 and 5, some components will be adding the wrong classes giving broken styling.

    So I wouldn't recommend it.