How to Change Button Alignment in Bootstrap (also using Angular 8)? - html

Question

After changing the size of my button with btn-sm, it has got misaligned with respect to the rest of the social icon buttons on my navbar. How would I recenter it?
I'm also using Angular 8 to manage the backend of my website (maybe that changes something in this case?); and my top navbar is of 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>

Answer 1

I couldn't really solve the problem, but one way to adjust the positioning of this button would be by adding more margin or padding to it. For example, mt will add margin to the top of the button, hopefully you will hit a big enough margin. In my case, I ended up using:
<a class="btn btn-outline-secondary btn-sm d-inline-block ml-2 mt-1 mr-3">
...
The number for each margin and padding is a multiplier for the $spacer variable found in node_modules/bootstrap/scss/_variables.scss. The $spacer variable has a 1rem measurement by default.