I am using bootstrap-vue and attempting to create a navbar ponent 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 ponent, 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 '@/ponents/NavBar'
    
    export default {
      ponents: {
        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 e 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 ponent 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

I am using bootstrap-vue and attempting to create a navbar ponent 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 ponent, 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 '@/ponents/NavBar'
    
    export default {
      ponents: {
        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 e 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 ponent 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

• javascript
• vue.js
• bootstrap-vue
• bootstrap-5

Share Follow edited Jul 8, 2021 at 22:28 Sven Eberth 3,0801212 gold badges2525 silver badges3131 bronze badges asked Jul 6, 2021 at 3:27 OzzieOzzie 14111 gold badge33 silver badges1414 bronze badges 2

• 2 Bootstrap-vue does not work with bs5: "With more than 85 ponents, over 45 available plugins, several directives, and 1200+ icons, BootstrapVue provides one of the most prehensive implementations of the Bootstrap v4 ponent and grid system available for Vue.js v2.6" – Seiyria Commented Jul 6, 2021 at 3:37
• 3 Thank you so much! Been scratching my head for hours. Downgrading to 4.6.0 was the resolution. – Ozzie Commented Jul 6, 2021 at 3:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

From https://bootstrap-vue/

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