How to vertically center elements in Bootstrap table

Question

I've seen this question and applied the style, however, my items in table are not vertically aligned:

HTML looks like this:

.table > tbody > tr > td {
        vertical-align: center;
        background-color: lightgreen;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="table-responsive">  
      <table class="table table-sm table-hover">
          <thead>
              <tr class="d-flex">
                  <th class="col-2">Item 01</th>
                  <th class="col-2">Item 02</th>
                  <th class="text-center col-4">Buttons</th>
                  <th class="text-right col-2">Item 04</th>
              </tr>
          </thead>
          <tbody>
              <tr class="d-flex">
                  <td class="col-2">
                      <div style="background-image: url(//placehold.it/1026x600/CC1111/FFF);width: 80px;
                          height: 80px;
                          border-radius: 100%;
                          background-size: cover;">
                      </div>
                  </td>
                  <td class="col-2 text-center">Hey!</td>
                  <th class="col-4">
                      <div class="row no-gutters">
                          <div class="col-2">
                              <button class="btn btn-secondary btn-block">
                                  -
                              </button>
                          </div>
                          <div class="col-8">
                              7 in cart
                          </div>
                          <div class="col-2">
                            <button class="btn btn-secondary btn-block">
                                +
                            </button>
                          </div>
                      </div>
                  </th>
                  <th class="col-2 text-right">Item 04</th>
              </tr>
          </tbody>
      </table>
    </div>

I cannot understand why it is not vertically aligned as background-color is applied. Could you say, please, how items can be vertically aligned?

Any help would be greatly appreciated.

This is a codeply example.

Your answer is in Bootstrap Doc, https://getbootstrap.com/docs/4.0/utilities/flex/ ==> align-self-center ... — Mister Jojo, Mar 01 '20 at 18:58
`d-flex` on tr is a not good because you will break the table layout — Temani Afif, Mar 01 '20 at 19:07
@TemaniAfif it would be great if you say what should I use instead if **d-flex**? — Learner, Mar 01 '20 at 20:10
nothing, simply remove it or don't use table layout. By the way you don't need it since you are explicitely setting col-* so what you have isn't a table — Temani Afif, Mar 01 '20 at 20:13
Does this answer your question? [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Nisharg Shah, Mar 02 '20 at 03:52
@TemaniAfif If I remove this, then my columns lose their size and `col-...` is not working. Could you show, please, example? — Learner, Mar 02 '20 at 07:16
@NishargShah no, it is different because I am not using `display: table` and would not like to add new styles. — Learner, Mar 02 '20 at 11:25

score 1 · Accepted Answer · answered Mar 01 '20 at 18:52

 <tbody>
          <tr class="d-flex">
              <td class="col-2">
                  <div style="background-image: url(//placehold.it/1026x600/CC1111/FFF);width: 80px;
                      height: 80px;
                      border-radius: 100%;
                      background-size: cover;">
                  </div>
              </td>

Should be(note the .align-items-center class added to the flex div):

 <tbody>
          <tr class="d-flex align-items-center">
              <td class="col-2">
                  <div style="background-image: url(//placehold.it/1026x600/CC1111/FFF);width: 80px;
                      height: 80px;
                      border-radius: 100%;
                      background-size: cover;">
                  </div>
              </td>

Oh, thank you for your answer! Is it possible to do without setting this class? Just using a pure CSS? — Learner, Mar 01 '20 at 20:11
Hey @Learner, to achieve this w/o setting this class you can add the to your CSS: .table tbody tr.d-flex{ align-items:center; } But is not recommended since it will apply the CSS to all instances of the .table tbody tr.d-flex class(maybe you don't want this behavior for every instance of the particular class). — ppanayiotou, Mar 01 '20 at 20:30

score 1 · Answer 2 · answered Mar 01 '20 at 19:10

I have checked your Html table code and checked it on my browser, I have made some changes in your th, td classes also I have write some CSS in style sheet for your column element to be aligned vertically properly

<tr class="d-flex">
                        <td class="col-2">
                            <div style="
                                background-image: url(//placehold.it/1026x600/CC1111/FFF);
                                width: 80px;
                                height: 80px;
                                border-radius: 100%;
                                background-size: cover;
                                ">
                            </div>
                        </td>
                        <td class="col-3 text-center coltd">Hey!</td>
                        <th class="col-4 colth">
                            <div class="row no-gutters">
                                <div class="col-2">
                                    <button class="btn btn-secondary btn-block">
                                        -
                                    </button>
                                </div>
                                <div class="col-8">
                                    7 in cart
                                </div>
                                <div class="col-2">
                                  <button class="btn btn-secondary btn-block">
                                      +
                                  </button>
                                </div>
                            </div>
                        </th>
                        <th class="col-2 text-right coltd">Item 04</th>
                    </tr>

and you can add this css code in your style sheet

.colth {
    padding: 30px 0 !important;
    text-align: left !important;
}
.coltd {
    padding: 30px 0 !important;
    text-align: left !important;
}

you can make these changes in your code it will be very helpfull for you Thanks

How to vertically center elements in Bootstrap table

2 Answers2