CODEWITHSUNDEEP
twitter-bootstrap-3
marioosh
marioosh

Reputation: 28596

Bootstrap - Buttons inline with input with label above

I have code like below. How to make buttons in-line with input ? Now buttons are inline with adjacent column and looks ugly. Live demo here

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label for="x" class="control-label">Function</label>
            <input type="text" id="x" class="form-control" placeholder="x"/>
        </div>                                  
    </div>
    <div class="col-md-1">
        <a href="#" id="ok" class="btn btn-success">Get</a>
    </div>
    <div class="col-md-1">
        <a href="#" id="stat" class="btn btn-primary">Stat</a>
    </div>
</div>

Upvotes: 1

Views: 3080

Answers (1)

Jonathan
Jonathan

Reputation: 1564

You can use an input group (though bootstrap say you shouldn't use input groups with selects because it doesn't always behave)

http://getbootstrap.com/components/#input-groups-buttons

edit: for the label above the input group:

<div class="container" style="width: 600px;">
    <form id="form" role="form">
        <div class="row">
            <label for="x" class="control-label">Function</label>
            <div class="input-group">  
                <select id="x" class="form-control" placeholder="x">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                </select>                   
                <span class="input-group-btn">
                    <a href="#" id="ok" class="btn btn-success">Get</a>
                    <a href="#" id="stat" class="btn btn-primary">Stat</a>
                </span>
            </div>
        </div>
    </form>
</div>

or for the label as part of the input group:

<div class="container" style="width: 600px;">
    <form id="form" role="form">
        <div class="row">
            <div class="input-group">  
                <span class="input-group-addon"><label for="x" class="control-label">Function</label></span>
                <select id="x" class="form-control" placeholder="x">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                </select>                   
                <span class="input-group-btn">
                    <a href="#" id="ok" class="btn btn-success">Get</a>
                    <a href="#" id="stat" class="btn btn-primary">Stat</a>
                </span>
            </div>
        </div>
    </form>
</div>

I added an update to your fiddle:

input above group: http://jsfiddle.net/ced7k0hq/11/

input as part of group: http://jsfiddle.net/ced7k0hq/12/

From the bootstrap docs: http://getbootstrap.com/components/#input-groups

Textual <input>s only Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.

thanks @ovitinho for comment about joining the two anchors inside a single input-group-btn :D

Upvotes: 3

Related Questions