CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dhrm
dhrm

Reputation: 14944

Bootstrap button positioning

I've this Bootstrap HTML markup:

<div class="container">
    <div class="field col-md-6 col-md-offset-3">
        <button type="button" class="btn btn-block btn-primary">Large button</button>
        <button type="button" class="btn btn-primary">X</button>
    </div>
</div>

enter image description here

I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.

The X button should stay small, and the Large button should fill up the rest of the width.

How can I do that?

See my JSFiddle.

Upvotes: 0

Views: 8071

Answers (1)

Trenton Trama
Trenton Trama

Reputation: 4930

You'll want to use input groups to keep everything together.

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

Extend form controls by adding text or buttons before, after, or on both sides of any text-based . Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

Here is the modification I made to your fiddle. http://jsfiddle.net/oayw7uhh/5/

All you need to do is surround both elements with a input-group-div

Then, wrap the X button in a span with the class input-group-btn.

https://jsfiddle.net/dennismadsen/oayw7uhh/

Your finished code is

<div class="container">
    <div class="field col-md-6 col-md-offset-3">
        <div class="input-group">
            <button type="button" class="btn btn-block btn-primary">Large button</button>
            <span class="input-group-btn">
                 <button type="button" class="btn btn-primary">X</button>
            </span>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions