CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JGV
JGV

Reputation: 5187

Vertically middle align button in bootstrap column

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:

enter image description here

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.

Upvotes: 9

Views: 20014

Answers (2)

George
George

Reputation: 3022

.align-self-center will work.

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

</div>

Upvotes: 36

Claw
Claw

Reputation: 326

You could use flexbox, just use the snippet on parent of the button in which you want to center the item.

(in your case .row div)

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

Here is an example: https://jsfiddle.net/xsmnnLoc/

But this method doesn't work on IE 10 and lower

Upvotes: 18

Related Questions