CODEWITHSUNDEEP
htmltwitter-bootstrap
boisterouslobster
boisterouslobster

Reputation: 1293

Alignment of icons within bootstrap header

https://jsfiddle.net/5nj5nmqz/3/

<h1 class="page-header row">
      Header
      <div class="col-md-4">
          <a href="#" class="btn btn-default">
              Export spreadsheet
              <i class="fa fa-download"></i>
          </a>
      </div>
      <div class="col-md-4 form-group has-feedback">
          <input type="text" class="form-control search pull-right" placeholder="Search by check name...">
          <span class="glyphicon glyphicon-search"></span>
      </div>
</h1>

Having a bit of trouble getting the elements within the header to align correctly, as well as getting a bootstrap glyphicon icon to line up inside the input field.

Any ideas on how this could be done correctly? I tried wrapping in rows and moving the columns, but it seems to be off every time.

Upvotes: 1

Views: 219

Answers (1)

user5104026
user5104026

Reputation: 698

Try this.

<h1 class="page-header">Header</h1>
<div class="row">
    <div class="col-md-4">
        <a href="#" class="btn btn-default pull-right export">
            Export spreadsheet
            <i class="fa fa-download"></i>
        </a>
    </div>

    <div class="col-md-4 form-group has-feedback pull-right">
        <div class="form-group has-feedback">
            <input type="text" class="form-control search pull-right" placeholder="Username" />
            <i class="glyphicon glyphicon-search form-control-feedback"></i>
        </div>
    </div>
</div>

Few things to note:

<h1 class="page-header row"> is wrong. When using the bootstrap cols, you should create a row by simply saying <div class="row">.

Bootstrap can have 12 columns per row I think. If you are designing the row-column way, the correct way is to create a <div class="row"> and it's children should be <div class="col-**-n"> where the n's of all children add up to 12.

Upvotes: 1

Related Questions