Bootstrap CSS: align two forms buttons - html

Question

I'm using Bootstrap and Laravel.
I would like to align two buttons "Update" and "Delete" next to each other.
BUT the Delete button has its own route and fields. So I created two forms.
Of course, the Delete button is now below the Update button.
Question: How can I make them next to each other instead?
I think a form inside of a form is not standard. Plus, it actually messes with the fields being sent.
Are there CSS rules I could apply for this to work?
I created a JSFiddle if you want to try it out: https://jsfiddle.net/0e5jk8yr/
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="/route2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
If it's not possible with CSS, feel free to comment and suggest UI design for item update/deletion.
Thanks to everyone reading and trying to figure this out.
Side note: I'm tagging this as Laravel, in case someone knows tricks I could use with Laravel/Blade for forms leading to deletion.
If CSS doesn't work, one solution would be to use only one form leading to update(), then call the destroy() method if the delete button was pressed.

Answer 1

Method 1
If you want to keep the way it is right now you can give the forms the property of display: inline;.
form {
display: inline;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Method 2
However, having two forms is not necessary because you can give the inputs a name attribute and then call the functions with the name. So when the form is submitted it will either return $_POST['submit'] or $_POST['delete'].
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button name="submit" type="submit" class="btn btn-success">Update</button>
<button name="delete" type="submit" class="btn btn-danger">Delete</button>
</form>

Answer 2

Try this.
#form2 {
position: absolute;
top: 74px;
left: 80px;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>

Answer 3

Or like this:
.btn-danger {
position: absolute;
top: -33px;
left: 90px;
}
form {
position: relative;
}
https://jsfiddle.net/0e5jk8yr/1/

Answer 4

Here is your corrected code. Please check it
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>