My button size was changed to btn-sm, but now it's misaligned with the other social icon buttons in my navbar. How can I center it again?
https://i.sstatic.net/pyoTx.png
I'm using Angular 8 for my website backend (does this affect the alignment issue?). The top navbar has the class
navbar navbar-expand navbar-light bg-light flex-column flex-md-row<nav class="navbar navbar-expand navbar-light bg-light flex-column flex-md-row">
<a
class="navbar-brand mr-0 mr-md-2"
routerLink="/">
{{ title }}
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li
class="nav-item"
*ngFor="let itemNavbar of itemsNavbar">
<a
[routerLink]="itemNavbar['page']"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive="active"
class="nav-link p-2">
{{ itemNavbar[langNavbar] }}
</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-md-auto">
<li
class="nav-item"
*ngFor="let socialIcon of socialIcons">
<a
class="nav-link"
href="{{ socialIcon.link }}">
<i [ngClass]="socialIcon.icon"></i>
</a>
</li>
<div class="col-md">
<div ngbDropdown class="d-flex">
<button
class="btn btn-outline-secondary btn-sm"
id="dropdownBasic1"
ngbDropdownToggle>
{{ upperCaseFirstLetter(langNavbar) }}
</button>
<div
ngbDropdownMenu
aria-labelledby="dropdownBasic1">
<a
ngbDropdownItem
class="langToggle"
*ngFor="let language of languages"
(click)="onChangeLanguage(language)">
{{ upperCaseFirstLetter(language) }}
</a>
</div>
</div>
</div>
</ul>
</nav>