Home/ Questions/Q 8306561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:21:25+00:00

Using Twitter’s Bootstrap, I have a form with an input field and a prepended

  • 0

Using Twitter’s Bootstrap, I have a form with an input field and a prepended icon:

<div class="input-prepend">
  <label for="some_name">What's your ...</label>
  <span class="add-on"><i class="icon-road"></i></span>
  <input type="text" class="span2" name="some[name]" id="some_name"/>
</div>

And this is the result:

enter image description here

I haven’t changed Bootstrap’s CSS as of yet. The examples show no such space between icon and input field. How do I get rid of it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Found it out myself: Don’t break lines between icon markup and input:

    <div class="input-prepend">
  <label for="some_name">What's your ...</label>
  <span class="add-on"><i class="icon-road"></i></span><input type="text" class="span2" name="some[name]" id="some_name"/>
</div>

    As Twitter themselves explain it in the icons documentation:

    When using beside strings of text, as in buttons or nav links, be sure to leave a space after the tag for proper spacing.

    That was my clue.

    • 0