Importing bootstrap breaks Navigation bar - css

Question

My project is running on vue3.
I have a Side navigation bar which consists of navigation links, it works well until I import bootstrap, which causes the icons to shift slightly and the buttons become smaller in size. I've tried the same with tailwind and the same issue occurs. The exact line that breaks it is the import of bootstraps min css file. (import "bootstrap/dist/css/bootstrap.min.css", inside of main.js).Below are screenshots and snippets of code for the navigation bar.
<script>
import NavBarLink from './NavBarLink.vue'
import {collapsed, toggleNavbar, navbarWidth} from './state'
export default{
props: {},
setup() {
return { collapsed, toggleNavbar, navbarWidth };
},
components: { NavBarLink }
}
</script>
<template>
<div class="sidebar" :style="{ width: navbarWidth }">
<span #click="toggleNavbar" style="margin-bottom: 15px;">
<i :class="`${collapsed ? 'fa-solid fa-bars': 'fa-solid fa-x'}`"></i>
</span>
<span v-if="!collapsed" class="logo">website.<span style="color: orange">club</span></span>
<span v-else class="logo">w<span style="color: orange">w</span></span>
<NavBarLink to="/about" icon="fa-solid fa-magnifying-glass">Search</NavBarLink>
<NavBarLink to="/plans" icon="fa-solid fa-tag">Plans</NavBarLink>
<NavBarLink to="/fart" icon="fa-solid fa-user">Profile</NavBarLink>
</div>
</template>
<style>
:root {
--navbar-bg-color: #0e0e0e;
--navbar-item-hover: #1d1d1d;
}
</style>
<style scoped>
.sidebar{
color: white;
background-color: var(--navbar-bg-color);
float: left;
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
bottom: 0;
padding: 0.5rem;
transition: 0.3s ease;
display: flex;
flex-direction: column;
}
.logo {
font-size: larger;
font-family: Nexa;
padding-top:15px;
padding-bottom:15px;
}
</style>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { collapsed } from './state'
export default {
props: {
to: { type: String, required: true },
icon: { type: String, required: true }
},
setup(props) {
const route = useRoute()
const isActive = computed(() => route.path === props.to)
return { isActive, collapsed }
}
}
</script>
<template>
<router-link :to="to" class="link" :class="{ active: isActive }">
<i class="icon" :class="icon"/>
<transition name="fade">
<span v-if="!collapsed">
<slot/>
</span>
</transition>
</router-link>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.1s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.link {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
font-weight: 400;
user-select: none;
margin: 0.1em 0.1em;
padding: 0.4em;
border-radius: 0.25em;
height: 1.7em;
color: white;
text-decoration: none;
}
.link:hover {
transition: .17s;
background-color: var(--navbar-item-hover);
}
.link.active {
background-color: var(--navbar-item-hover);
}
.link .icon {
flex-shrink: 0;
width: 35px;
margin-right: 10px;
}
</style>
Is there a bootstrap component I can remove to make this function?