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!

rasso · Accepted Answer · 2015-08-06T09:13:11.153

17

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>

edited Aug 06 '15 at 09:13

answered Aug 06 '15 at 09:02

rasso

2,131
3
21
24

1

This is the closest yet. Thanks! – Beakie Aug 06 '15 at 09:08
no problem:] looks like it also needs some `margin-right` there, though. – rasso Aug 06 '15 at 09:09
Exactly. Close but not quite :) – Beakie Aug 06 '15 at 09:10
I've updated the answer. let me also check if it's possible with using a bootstrap class instead of inline styling. – rasso Aug 06 '15 at 09:13
I really don't want to hardcode styling. This is what I am trying to get away from by using bootstrap – Beakie Aug 06 '15 at 09:15
i understand, let me check that. be back after lunch:] – rasso Aug 06 '15 at 09:16
1

I have created a class of input-group-left-sibling and set the margin to 5px. Combined with a pull-left, this is a good solution for me. Thanks – Beakie Aug 06 '15 at 09:38

Cyan Baltazar · Answer 2 · 2017-11-22T07:10:10.230

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!

Sweeper · Answer 3 · 2015-08-06T09:20:32.080

5

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.

edited Aug 06 '15 at 09:20

answered Aug 06 '15 at 09:01

Sweeper

213,210
22
193
313

This is correct... but this isn't "pure" bootstrap. I would expect there would be a way simply using predefined classes. – Beakie Aug 06 '15 at 09:03
This explanation is great, i always had issues when trying to align things horizontally. Thank you. – ricks Apr 13 '18 at 18:45

score 1 · Answer 4 · edited Aug 06 '15 at 09:40

1

Just add the grid classes. Try this

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

https://jsfiddle.net/xbu9qtje/

edited Aug 06 '15 at 09:40

Beakie

1,948
3
20
46

answered Aug 06 '15 at 09:10

David Lemon

1,560
10
21

1

This will mess up the center alignment. BTW... your fiddle isn't right – Beakie Aug 06 '15 at 09:12
This would mess up the center alignment as the button sizes etc are defined "responsively" – Beakie Aug 06 '15 at 09:20

score 1 · Answer 5 · edited May 28 '21 at 15:43

1

Here one solution to the problem.

<div class="container">
    <div class="input-group">
        <button class="btn btn-outline-primary border-left-0 border" type="button">
            Delete
        </button>
        <input type="text" class="form-control py-2" value="1" />
        <span class="input-group-addon">Update</span>
    </div>
</div>

You can see the output at this link: codeply.com/p/xijLBe2vff.

edited May 28 '21 at 15:43

Hultan

1,409
1
15
28

answered May 28 '21 at 02:36

Hemaravishankar

11
2

https://www.codeply.com/p/xijLBe2vff u can check output from this link – Hemaravishankar May 28 '21 at 02:44

score 0 · Answer 6 · answered Nov 26 '20 at 14:32

Try the form-inline class in the root div, it will default to "inline" putting your fields one next to the other:

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

score 0 · Answer 7 · answered Dec 30 '20 at 13:35

0

you can just put

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @disabled = "true", @class = "input-group-addon", @style = "width:50px;text-align:center;" } })

answered Dec 30 '20 at 13:35

Sheriff

738
10
20

score -1 · Answer 8 · edited Aug 06 '15 at 09:28

-1

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

edited Aug 06 '15 at 09:28

Beakie

1,948
3
20
46

answered Aug 06 '15 at 08:59

Salim Malik

54
1
9

If I add col classes, the center alignment will be wrong. – Beakie Aug 06 '15 at 09:12

Bootstrap: How to place button next to input-group

8 Answers8

Linked