CODEWITHSUNDEEP
twitter-bootstrap
Mona Coder
Mona Coder

Reputation: 6316

Attaching ".input-prepend" to Bootstrap Buttons

How can I add append input into a button in Bootstrap? Here is the code which I am trying to fix, and the code is as:

<div class="container">
  <div class="hero-unit">
    <div class="input-prepend">
      <span class="add-on">
         <i class="icon-move icon-black"></i>
      </span>
      <button class="btn btn-mini btn-info">Test Input Prepend</button>
    </div>
  </div>
</div>

It works, however, it looks like this when I use the .btn-mini class

enter image description here

How can I fix this?

Upvotes: 0

Views: 1289

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362700

There is no "mini" input-prepend so you'd need to customize..

.input-mini .add-on {
  height: 14px;
  min-width: 15px;
  padding: 4px;
  padding-top:2px;
  font-size: 10px;
  line-height: 10px;
}

<div class="input-prepend input-mini">
      <span class="add-on">
         <i class="icon-move icon-black"></i>
      </span>
      <button class="btn btn-mini btn-info">Test Input Prepend</button>
</div>

Bootply

Upvotes: 1

Related Questions