If you’re looking for a solution to display input-append and input-prepend with input-block-level in Twitter Bootstrap 2.3.2, look no further.

In this example we are using Bootstrap form-horizontal.
See below the layout you should get by default using Bootstrap form-horizontal.
(The first 2 fields already have the class=”input-block-level” added to them)

Our aim here is to have all the fields justified left and right.
This is the HTML code for the appends / prepend:

<div class="control-group">
  <label class="control-label">Append</label>
  <div class="controls">
    <div class="input-append">
      <input type="text">
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text">
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend / Append</label>
  <div class="controls">
    <div class="input-prepend input-append">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text" >
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

input-append and input-prepend with input-block-level

 

If you’ve been using Twitter Bootstrap forms in the past, your instinct to align them and fill the gap would be to add the class=”input-block-level”. And you would be right. So let’s just do that. Add the class=”input-block-level” to the append/prepend like this:

<div class="control-group">
  <label class="control-label">Append</label>
  <div class="controls">
    <div class="input-append input-block-level">
      <input type="text">
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend</label>
  <div class="controls">
    <div class="input-prepend input-block-level">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text">
    </div>
  </div>
</div>

<div class="control-group">
  <label class="control-label">Prepend / Append</label>
  <div class="controls">
    <div class="input-prepend input-append input-block-level">
      <span class="add-on"><i class="icon-calendar"></i></span>
      <input type="text">
      <span class="add-on"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

 

As you can see below, it’s not doing what was expected, it’s actually not doing anything at all…

 

But we’re getting there… We now need to add some extra CSS to cater for it as Bootstrap 2.3.2 doesn’t deal with it by default.

/* Input-append and input-prepend with inline-block-level */

.input-append.input-block-level,
.input-prepend.input-block-level {
    display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
    display: table-cell;
    width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
    box-sizing: border-box; 
    display: table; 
    min-height: inherit;
    width: 100%;
}

.input-append.input-block-level > input {
    border-right: 0; /* removes the extra right border from the input */
}

.input-prepend.input-block-level > input {
    border-left: 0; /* removes the extra left border from the input */
}

 

And the result… Tada!

 

In Summary:

1. Add the class “input-block-level” to the div with the class=”input-append”  (or “input-prepend”) like this: <div class=”input-prepend input-block-level”>.
2. Copy and paste the CSS above in your stylesheet
3. Enjoy 🙂