Once more, I find myself in need of your assistance.
I am facing an issue with my project. Specifically, on my menu, I want the selected option to have a bottom border and the text aligned vertically. However, using vertical-align : middle with a display table is causing complications with my menu.
Here is the code snippet :
.infos-btn {
text-transform: uppercase;
color: #482A81;
box-shadow: 0px 3px 10px #888;
}
.infos-btn>div:hover {
cursor: pointer;
}
.selected-btn {
border-bottom: 3px solid #482A81;
color: #482A81;
font-weight: bold;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row text-center px-3 infos-btn">
<div class="col-md col-sm py-3 selected-btn">Menu</div>
<div class="col-md col-sm py-3">Menu</div>
<div class="col-md col-sm py-3">Menu</div>
<div class="col-md col-sm py-3">Menu longer than others</div>
<div class="col-md col-sm py-3">Menu</div>
</div>In order to achieve responsiveness, adding a margin : 0 auto; might work but it will impact the positioning of the border at the bottom of the menu.
Your help is greatly appreciated!