Do you know why items are not vertically aligned at center? [duplicate] - css

Question

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 4 years ago.
I want to have a layout that has a header and a fotoer and between header and footer there are some list items with posts. Im using bootstrap, I want the header to look like this:
But its not working, its showing like this: https://jsfiddle.net/83vnj5ru/2/.
The search form and the filters are not vertically aligned at center? For example there is more space above the search form than below the search form. Do you know why?
Also, Im a beginner and I dont know if the code is correct or if it can be improved. Because this layout dont seems very complex but I have a .row inside another .row and also .col inside other .col, so it seems a lot of code to achieve this layout that dont seems very complex.
HTML:
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group forum">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search">
</div>
</div>
</form>
</div>
<div class="col-7 text-right">
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
</div>
</li>
<li class="list-group-item">list item 1</li>
<li class="list-group-item">list item 2</li>
<li class="list-group-item bg-custom-light2 py-4">container footer</li>
</ul>
</div>
</div>
</div>
CSS
.bg-custom-light2{
background-color: #fafafa;
}
.input-group-text, .input-group-prepend{
background-color:none;
}
.input-group-text{
color:gray;
}

Answer 1

Because the default bootstrap class .form-group comes with the default margin-bottom of 1em
Also use align-items:center to align the items vertically
.form-group {
margin-bottom: 0!important;
}
.row{
align-items:center;
}
js fiddle: https://jsfiddle.net/83vnj5ru/3/

Answer 2

<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group forum">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group mb-0">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="email" class="form-control search-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">list item 1</li>
<li class="list-group-item">list item 2</li>
<li class="list-group-item bg-custom-light2 py-4">container footer</li>
</ul>
</div>
</div>
</div>
I have use align-items-center for the search and filter row. and form-group had default margin that i've removed by mb-0. now they align center as you wanted.

Answer 3

pls add below additional class:
additional class - align-items-center - vertically center
<div class="row align-items-center">
</div>
additional class - mb-0 - margin remove
<div class="col-5"><div class="form-group mb-0"></div></div>
Updated answer
you should apply below style : form vertically center
<style>
body{
display: flex;
align-items: center;
height: 100vh;
}
</style>