html bootstrap align vertically

Question

I would like to align the text on the left with the 3 buttons on the right of my following panel-heading :

here is my code :

    <div class="col-lg-9 col-md-9 col-sm-9">
                <h4 class="panel-title">
                <!--<a data-toggle="collapse" data-target="#collapse1">-->
                <h2>Pf <strong>{{pf.pfid}}</strong></h2>
                <!-- </a>-->
                 </h4>
              </div>
              <div class="col-lg-1 col-md-1 col-sm-1">
                <button class="btn btn-danger btn-circle-lg" (click)="AddPf()" disabled><span class="glyphicon glyphicon-plus"></span></button>
              </div>
              <div class="col-lg-1 col-md-1 col-sm-1">
                <button class="btn btn-warning btn-circle-lg" (click)="showAccForm()"><span class="glyphicon glyphicon-plus"></span></button>
              </div>
              <div class="col-lg-1 col-md-1 col-sm-1" *ngIf="authorization.profileid==1">
                <button class="btn btn-info btn-circle-lg" (click)="showAssForm()"><span class="glyphicon glyphicon-plus"></span></button>
             </div>

Any idea ?

Possible duplicate of [vertical-align with Bootstrap 3](https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Alexander, Jun 12 '17 at 13:42

Alexander · Answer 1 · 2017-06-12T17:05:03.847

You could use quick floats to float an element to the left or right. To align the text line by the middle line of the button group use line-height value that equuals to button height.

.panel-title {
  line-height: 36px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title pull-left">Pf <strong>3788</strong></h2>
    <div class="pull-right">
      <button class="btn btn-danger btn-circle-lg" disabled><span class="glyphicon glyphicon-plus"></span></button>
      <button class="btn btn-warning btn-circle-lg"><span class="glyphicon glyphicon-plus"></span></button>
      <button class="btn btn-info btn-circle-lg"><span class="glyphicon glyphicon-plus"></span></button>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Also you could find margin-top property value to set the necessary vertical placement of an element.

html bootstrap align vertically

1 Answers1