Button next to text bar with Bootstrap

Question

I am trying to create a very simple form with Bootstrap which consists of only one text bar and a search button. But, although they are both in the same .form-group, to text bar has a width 100% and the button is down instead of next to it, as I needed.

There is an example:

<form role="form">
    <div class="form-group">
        <label for="searchBar">Procurar:</label>
        <input type="text" class="form-control pull-left" id="searchBar" placeholder="Procurar por:">
        <button type="submit" class="btn btn-info pull-right" value="Procurar"> <span class="glyphicon glyphicon-search"></span>
        </button>
    </div>
</form>

Jsfiddle

Answer 1

You are using bootstrap 3, which is quite different from bootstrap 2. Some elements are missing from your HTML structure. See fiddle:

jsfiddle

HTML:

<form role="form">
    <div class="form-group">
        <label for="searchBar">Procurar:</label>
        <div class="input-group"><!--Estava faltando essa div-->
            <input type="text" class="form-control" id="searchBar" placeholder="Procurar por:" />
            <span class="input-group-btn"><!--Estava faltando esse span-->
                <button type="submit" class="btn btn-info" value="Procurar">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
</form>

See more about the components of bootstrap 3 on their official website.

Answer 2

Change the following property:

Of

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

To

.form-control {
    display: block;
    width: 90%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

[]'s

Answer 3

Filipe.Fonseca replied, but if you want to do this only for the field in question use directly in the style of the field

`style="width:90%;"`

or create a new style for this field