How to place buttons, title, inputs, etc. in a header?

ionic-v1
1

Hi, first post here. I’ve seen ways to place header items (buttons, inputs, titles, etc.) to the left or right, but was wondering if there was an elegant solution to place header items anywhere you want? I tried using a grid system and the button and input placement seems to be displaying properly, but I cannot get a Title to display.

I noticed I could create my own heading style and have the Title show in the header that way, but I was wondering if that could be avoided? Here’s my header code:

<ion-nav-view>
      <ion-header-bar class="bar-positive">
        <div class="row row-center">
          <div class="col">
            <button class="button button-icon icon ion-navicon"></button>
          </div>
          <div class="col-75">
            <h1 class='title' Home></h1>
          </div>
          <div class="col bar-header item-input-inset">
          <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
              <input type="search" placeholder="Search Target Devices">
          </label>
          </div>
        </div>
      </ion-header-bar>
      <ion-content>
        Some content!
      </ion-content>
    </ion-nav-view>
2

Read the latest docs:

<ion-header-bar align-title="left" class="bar-positive">
      <div class="buttons">
        <button class="button" ng-click="doSomething()">Left Button</button>
      </div>
      <h1 class="title">Title!</h1>
      <div class="buttons">
        <button class="button">Right Button</button>
      </div>
    </ion-header-bar>
3

Thanks for the reply. My code is actually based off of this example from the documentation. The problem I ran into is that the alignment is automatically done for buttons but not for an input. If I replace the button with an input (search bar), the search bar will not be placed to the right side of the header.

I did a quick search through the source code and Ionic docs to see if there is an alignment attribute for the input and could not find one. Thus the use of grid system in a header.