Bootstrap: How to place button next to input-group - html

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.

Answer 4

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/

Answer 5

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.

Answer 6

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>

Answer 7

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

Answer 8

<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>