Button next to text bar with Bootstrap

Navigation
3

I'm trying to create a very simple form with Bootstrap consisting of just a text bar and a browse button. But even though they are both in .form-group , text bar has a width of 100% and the button is down, instead of appearing to the side, just like I needed.

Here's 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

    
asked by anonymous 11.03.2014 / 13:58

3 answers

5

You are using bootstrap 3, which is quite different from bootstrap 2. Some elements are missing in your HTML structure. See the 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 bootstrap 3 components on their official website.

    
11.03.2014 / 14:23
0

Change the following property:

  

From 

.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

    
11.03.2014 / 14:13
-1

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

'style="width:90%;"'

Or create a new style for this field

    
11.03.2014 / 14:21
PHP Database error Formula Excel with incorrect result