Bootstrap-vue navbar not rendering as expected

Question

I am using bootstrap-vue and attempting to create a navbar component inside of an application, I am using the first example as provided in the documentation at this link , I have all the dependencies installed as laid out in the bootstrap-vue instructions. I am trying to use this navbar as a component, with the following code used to create it and render it.

Navbar.vue

<template>
  <div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {}
  }
}
</script>

and

App.vue

 <template>
      <div>
        <NavBar></NavBar>
        <div id="app">
          <router-view />
        </div>
      </div>
    </template>
    
    <script>
    import NavBar from '@/components/NavBar'
    
    export default {
      components: {
        NavBar: NavBar
      },
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

Expected output vs. my results

Expectations

To see expected output, follow this link

Results

I don't have enough reputation to post images, but I can upload a screenshot if it is needed to further come to a conclusion, essentially what happens to the navbar is that it renders fine, it's clear that certain elements of bootstrap work (for ex. the dropdown and the search bar) however, the ml-auto that is on line 15 of navbar.vue is not having any effect on the navbar item that has its class. The nav-bar items are all clustered on the left, as well as some weird margin error. I found a similar stack overflow issue, and found success solving the ml not working issue by replacing it with ms but not being able to find this in the documentation makes me weary of using this as a solution, also it doesn't stop the weird clustering of the search bar and the search button. The code should run as in the example if everything is configured correctly, as it works on the playground component of the bootstrap docs.

Other stackoverflow articles

There is another stackoverflow article discussing how ml-auto doesn't work in bootstrap 5, and to use ms-auto however I have not found any documentation for a ms class in bootstrap 5.

To read that article follow this link

Answer 1

Per my comment - Bootstrap-vue does not work with bs5: "With more than 85 components, over 45 available plugins, several directives, and 1200+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6"

From https://bootstrap-vue.org/

Answer 2

I hope my answer help. To enable style application of vue bootstrap, you can add " @import '~bootstrap/scss/bootstrap.scss';" to your style as a workaround.

<style>
@import '~bootstrap/scss/bootstrap.scss'
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

PS: You need to install bootstrap module