CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Learner
Learner

Reputation: 603

How to vertically center elements in Bootstrap table

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

enter image description here

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.

Upvotes: 0

Views: 299

Answers (2)

Saad Jafri
Saad Jafri

Reputation: 21

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

Upvotes: 1

ppanayiotou
ppanayiotou

Reputation: 60

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

Upvotes: 1

Related Questions