I am currently working with bootstrap-vue and trying to implement a navbar component within my application. I followed the first example provided in the documentation at this link. All the necessary dependencies are installed as per the bootstrap-vue instructions. My goal is to use this navbar as a component, and below is the code used to create 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 outcome in comparison to my results
Expectations
To view the expected output, refer to this link
Results
Although I cannot post images due to lack of reputation, I can provide a screenshot upon request for further analysis. The navbar renders correctly, and certain Bootstrap elements like the dropdown and search bar work as expected. However, the class "ml-auto" on line 15 of navbar.vue does not have any effect on the alignment of navbar items. They all appear clustered on the left, with some margin inconsistencies. I came across a similar issue on Stack Overflow, where replacing "ml" with "ms" solved the problem, but not finding documentation on "ms" in Bootstrap 5 makes me apprehensive about using it as a solution. Furthermore, this does not address the clustering of the search bar and button. If the configuration is correct, the code should function as shown in the example on the Bootstrap docs playground.
Other Stack Overflow discussions
There is another Stack Overflow thread discussing the issue of "ml-auto" not working in Bootstrap 5 and suggesting the use of "ms-auto". However, I could not find any reference to the "ms" class in Bootstrap 5 documentation.
To read the article, visit this link