Matching Height of Bootstrap Pagination Element with Sibling Element

Question

I'm working with Bootstrap's .pagination class inside a .container-fluid .row .col-*-* structure:

<div class="container-fluid" style="border: 1px solid black">
  <div class="row">
    <div class="col-xs-6" style="border: 1px solid red">
      <nav>
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">«</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">»</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-xs-6" style="vertical-align:middle; border: 1px solid red">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <input class="form-control" aria-label="..." type="text">
      </div><!-- /input-group -->
    </div>
  </div>
</div>

The issue is with the alignment of the .input-group beside the .pagination element. Notice that the pagination element takes up much more vertical space than the .input-group , and as such the .input-group floats awkwardly above and to the right of it. I've tried adding style="vertical-algin:middle" to a couple different spots, like the .container-fluid <div> and each of the .row and .col-*-* <div> s, but no luck fixing it.

Answer 1

You can go ahead and just use this CSS selector to remove the margin throwing you out of alignment:

.pagination {
  margin:0;
}

Naturally you will want to scope that selector to a wrapping ID or class so you don't override ALL .pagination elements.

Here's a CodePen for you to see what's going on.

http://codepen.io/stat30fbliss/pen/gbEYXx

Let me know if you have any questions!