Bootstrap: How to place button next to input-group

Question

I can't work out (conforming to "proper bootstrap") how to get a button to sit next to an input-group within a div.

They need to be center aligned.

This is what I want it to look like...

This is what is happening...

Here is my current code.

<div>
    <div>
        <button type="button" class="btn">Delete</button>
    </div>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

I have created this js fiddle... https://jsfiddle.net/ptwbn2av/

Thanks!

Answer 1

You could also try the pull-left class.

The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.

The html:

<div>
    <div class="pull-left">
        <button type="button" class="btn">Delete</button>
    </div>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

You can use:

style="margin-right:5px"

to add some spacing after the div, and then the new mark-up would be as follows:

<div>
    <div class="pull-left" style="margin-right:5px">
        <button type="button" class="btn">Delete</button>
    </div>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

Answer 2

With your current code, you can use the flexbox.

A powerful CSS layout module that gives us an efficient and simple way to lay out and align things.

<div class="flex">
   <div>
     <button type="button" class="btn">Delete</button>
   </div>
   <div>
     <div class="input-group">
        <input type="text" class="form-control" value="1" />
        <span class="input-group-addon">Update</span>
     </div>
   </div>
</div>

.flex {
   display: flex;
   flex-direction: row;
}

This is the screenshot of the result:

You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cheers!

Answer 3

divs are block elements, which means that they align vertically. For example,

<div>
    Hello World!
</div>
<div>
    Goodbye World!
</div>

would result in:

Hello World!

Goodbye World!

So, in order to make the elements flow horizontally, you have to make the div inline because inline elements can flow horizontally, such as text and <span>.

You can add a rule to your css:

#delete-button {
    display:inline-block;
}

And of course, you should add an id attribute to the button.

If the above doesn't work, you should consider putting all the elements in one div because <button>, <input>, and <span> are all inline elements.