bootstrap v3.3.6 - vertical align content in the bootstrap column

Question

I using bootstrap v3.3.6 and trying to vertical align the 'My Link' in the middle. Is there any class available to achieve this?

Tried this, did not work for me vertical-align with Bootstrap 3

<li class="list-group-item">  
   <div class="row">
        <div class="col-md-8">
            <b>Some Title</b>
            <br>
            Some details some details some details some details
        </div>
        <div class="col-md-4">
            <a id="my-link">My link</a>
        </div>
    </div>
</li>

Put another DIV around your content in each col and give them both the same class. Use an Equal Heights JS script to make those divs be of equal heights. Use Flexbox to vertically align the link. — Billy Moat, Nov 21 '18 at 16:47

score 1 · Answer 1 · answered Nov 21 '18 at 16:47

You can try to use display: table and display: table-cell.

.col-xs-8, .col-xs-4 {
  height: 60px;
}

.d-table {
  display: table;
  height: 100%;
}

.d-table-cell {
  display: table-cell;
}

.align-middle {
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<li class="list-group-item">
   <div class="row">
      <div class="col-xs-8">
            <b>Some Title</b>
            <br>
            Some details some details some details some details
        </div>
        <div class="col-xs-4">
            <div class="d-table">
              <div class="d-table-cell align-middle">
                <a id="my-link">My link</a>
              </div>
            </div>            
        </div>
    </div>
</li>

display: table needs a height: value property. Then, display: table-cell will use this height value with vertical-align: middle.

In this example, .col-xs-8 and .col-xs-4 have the same height value: 60px.

P/S: I've change .col-md-8 and .col-md-4 to .col-xs-8 and .col-xs-4 to fit the content on this site.

Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share. — Sunil Sharma, Nov 21 '18 at 17:17
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (`table`) need a height value which is used by the content (`cell`). If you nest a lot of `div` tag inside `d-table-cell`. This code must be edited. — Tân, Nov 21 '18 at 17:27

Shidersz · Answer 2 · 2018-11-21T20:31:01.483

Another alternative for vertically centering is using the CSS display: flex; property in conjunction with align-items: center;. You can check the next example.

.fixed-h {
    height: 100px;
}

.vcenter-flex {
    display: flex;
    align-items: center;
}

.hcenter-flex {
    display: flex;
    justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<li class="list-group-item">  
  <div class="row">
    <div class="col-md-8 fixed-h bg-info">
      <b>Some Title</b>
      <br>
      Some details some details some details some details
    </div>
    <div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
      <a id="my-link">My link</a>
    </div>
  </div>
</li>

For vertically centering, parent elements needs to have a defined height, that is the purpose of the class fixed-h you see on the styles. Also I have made, as reference, the horizontal centering for flex mode: hcenter-flex. Finally, background colors are just apply to have reference of the containers limits.

bootstrap v3.3.6 - vertical align content in the bootstrap column

2 Answers2