I am relatively new to using Bootstrap 4 and I am encountering challenges in vertically aligning certain elements within a list-group. Specifically, I have text on the left side and a dropdown on the right.
<div class="dashboard-blocks">
<ul class="list-group ">
<li class="dashboard-block list-group-item">
<span class="align-middle">Write Article/s</span>
<span class="btn-group float-right">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
ACTION
</button>
<span class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">
Another action
</button>
<button class="dropdown-item" type="button">
Something else here
</button>
</span>
</span>
</li>
Aside from basic font, color, and border styling in CSS, these are the adjustments I've made:
.dashboard-block {
...
line-height: normal;
letter-spacing: normal;
...
padding: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
The issue I'm facing is that "Write Article" is not perfectly aligned vertically: https://i.sstatic.net/1a2Wz.png