Question

I am trying to align few controls in one line using bootstrap class = “form-inline”, but it seems it not working fine. What am I doing wrong?

Currently I am getting the result in two lines.I want them to be displayed in one line

The code which I am using is as below

<div class="form-inline">
    <i class="icon-list-alt"></i>
    <label class="control-label">
        Please enter TB Id or TBR Id</label>
    <div class="form-search">
        <div class="input-append">
            <input id="inputValue" type="text" class="span2 search-query" />
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                    <li><a id="POA" tabindex="-1" href="#">1</a></li>
                    <li><a id="MOD" tabindex="-1" href="#">2</a></li>
                    <li><a id="LC" tabindex="-1" href="#">3</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

Check this code, hope it helps:

<div class="form-inline">
    <i class="icon-list-alt"></i>
    <label class="control-label">
        Please enter TB Id or TBR Id</label>
    <span class="form-search">
        <div class="input-append">
            <input id="inputValue" type="text" class="span2 search-query" />
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                    <li><a id="POA" tabindex="-1" href="#">1</a></li>
                    <li><a id="MOD" tabindex="-1" href="#">2</a></li>
                    <li><a id="LC" tabindex="-1" href="#">3</a></li>
                </ul>
            </div>
        </div>
    </span>
</div>