Bootstrap Tutorial - Create input-append








The following code shows how to create input-append.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<style type='text/css'>
input.search-query {<!--  www  .ja v a2  s  .c  o m-->
  padding-left: 26px;
}

form.form-search {
  position: relative;
}

form.form-search:before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image:
    url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
  background-position: -48px 0;
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: .5;
  z-index: 1000;
}
</style>
</head>
<body>
  <div style="padding: 20px;">
    <form class="form-search form-inline">
      <div class="input-append">
        <input type="text" class="search-query" placeholder="Search..." />
        <button type="submit" class="btn btn-primary">Search</button>
      </div>
    </form>
  </div>
</body>
</html>

Click to view the demo