Do you know why items are not vertically aligned at center?

Question

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;
}

score 1 · Accepted Answer · answered Nov 23 '18 at 12:46

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/

answered Nov 23 '18 at 12:46

Viira

3,805
3
16
39

Thanks, do you know how to use custom icons for example how to use the "" instead of the default bootstrap dropdown icon? – user10676579 Nov 23 '18 at 12:59
Like this "
Dropdown button
Action Another action Something else here
", both icons appear the awesoem font icon and also the bootstrap default icon, do you know how to show only the awesome font icon? – user10676579 Nov 23 '18 at 12:59
can you compile them in another jsfiddle so that I can inspect them clearly – Viira Nov 23 '18 at 13:26

score 1 · Answer 2 · answered Nov 23 '18 at 13:00

            <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.

AddWeb Solution Pvt Ltd · Answer 3 · 2018-11-23T12:55:54.020

0

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>

edited Nov 23 '18 at 12:55

answered Nov 23 '18 at 12:44

AddWeb Solution Pvt Ltd

21,025
5
26
57

Thanks, like that the form is not aligned "https://jsfiddle.net/83vnj5ru/4/". – user10676579 Nov 23 '18 at 12:47

Do you know why items are not vertically aligned at center?

3 Answers3