Bootstrap Tutorial - Create input-group-addon

The following code shows how to create input-group-addon.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style type='text/css'>
.svX3 {<!-- w w w.j a v  a  2s.  co m-->
  width: 100%;
}
</style>
</head>
<body style='margin:30px'>
  <form>
    <div class="form-group input-group">
      <span class="input-group-addon">X</span> 
      <input type="text" class="form-control"> 
      <span style="width: 55px;" class="input-group-addon">km</span>
    </div>
    <div class="form-group input-group">
      <span style="width: 55px;" class="input-group-addon">X</span> 
      <input type="text" class="form-control"> 
      <span class="input-group-addon">km</span>
    </div>
    <div class="form-group input-group svX3">
      <span style="width: 55px;" class="input-group-addon">X</span> 
      <input type="text" class="form-control"> 
      <span style="width: 55px;" class="input-group-addon">km</span>
    </div>
  </form>
</body>
</html>

Click to view the demo