Bootstrap Tutorial - Layout header with search bar








The following code shows how to layout header with search bar.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<style type='text/css'>
span.view-title {<!--from w ww .j a  v a  2 s . c o  m-->
  font-size: 24px;
  color: #999999;
  font-weight: normal !important;
  line-height: 30px;
}

.view-header {
  background-color: #f5f5f5;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 20px 10px 20px;
  border-bottom: solid 1px #bbbbbb;
}
</style>
</head>
<body style='margin:30px'>
  <div class="view-header">
    <span class="view-title">Header</span>
    <div class="pull-right">
      <a
        style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
        <span class="pointer">more options</span>
      </a>
      <form class="form-inline pull-left"
        placeholder="client"
        css-class="input-xxlarge">
        <input class="input-xxlarge ng-dirty" type="text"
          placeholder="place holder"
          ng-model="model">
        <button disabled="disabled" class="btn btn-info" type="submit">
          <i class="icon-search"></i>&nbsp;Search
        </button>
      </form>
    </div>
    <div class="clearfix"></div>
    <div class="pull-right"></div>
    <div class="clearfix"></div>
  </div>
</body>
</html>

Click to view the demo