Vertically middle align button in bootstrap column

Question

I want to vertically middle align the buttons in bootstrap columns.

Fiddler: https://jsfiddle.net/ebwwvy6m/23/

HTML

<div class="row">
   <div class="col-sm-3 vcenter">                   
      <button type="button" class="btn btn-success btn-sm" id="BtnExport">Export</button>
    </div>
                <div class="col-sm-9">
                    <div class="row">
                        <div class="col-sm-6">
                            Comment
                            <textarea rows="2" class="form-control" id="TextAreaComment"></textarea>
                        </div>
                        <div class="col-sm-6 vcenter">
                            <button type="button" class="btn btn-primary btn-sm" id="BtnEntry">Abandon</button>
                        </div>
                    </div>
                </div>
            </div>

CSS:

.vcenter {
    display:inline-block !important;
    vertical-align:middle !important;   
}

Expectation:

What I tried?

I tried following the solutions provided here,

1. Vertical align button in the middle of the column- bootstrap
2. Vertical align button middle next to text
3. Bootstrap - Vertically Align Button With Well

But, I am not getting the solution. Any suggestion will be much appreciated. Thanks.

Answer 1

.align-self-center will work.

<div class="col-sm-6 align-self-center">

</div>