CODEWITHSUNDEEP
csstwitter-bootstrap
user2954587
user2954587

Reputation: 4861

Bootstrap 3 vertically align text for btn-group

How can I vertically align a label for a custom button group with a float?

<div class="col-md-12">
  <div class="btn-group pull-right" role="group" aria-label="Sort By">
    <button class="btn btn-default btn-sm">Friends</button>
    <button class="btn btn-default btn-sm">Distance</button>
  </div>
  <div class="pull-right">
    <div>Sort By:</div>
  </div>
</div>

I tried vertical-align: middle with no luck

JSFiddle

Upvotes: 2

Views: 959

Answers (3)

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

You can use a class to put a position: relative and top: 5px to center vertically.

HTML:

<div class="sort-by">Sort By:</div>

CSS:

.sort-by{
  position: relative;
  top: 5px;
}

Here is the fiddle updated: http://jsfiddle.net/syy8pe7n/2/

Regards!

Upvotes: 0

Maximiliano Sosa
Maximiliano Sosa

Reputation: 360

Try this:

<div class="container">
  <div class="row">
    <div class="col-md-12 pull-right">
      <span class="label label-default">Sort By:</span>
      <div class="btn-group" role="group" aria-label="Sort By">
        <button class="btn btn-default btn-sm">Friends</button>
        <button class="btn btn-default btn-sm">Distance</button> 
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Madbreaks
Madbreaks

Reputation: 19539

You can accomplish this with line-height.

.btn-group + .pull-right div {
    line-height:2em;
}

Upvotes: 1

Related Questions