Bootstrap CSS: align two forms buttons

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.

Haven't worked on laravel but I am pretty sure you don't have to make two form for two separate actions. You can do this by naming the buttons. You can check this link. http://stackoverflow.com/questions/39205820/laravel-5-1-one-form-two-submit-buttons — Amir Hossain, Apr 26 '17 at 18:08

score 2 · Accepted Answer · answered Apr 26 '17 at 18:31

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>

score 0 · Answer 2 · answered Apr 26 '17 at 18:04

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>

score 0 · Answer 3 · answered Apr 26 '17 at 18:09

0

Or like this:

.btn-danger {
  position: absolute;
  top: -33px;
  left: 90px;
 }
form {
  position: relative;
}

https://jsfiddle.net/0e5jk8yr/1/

answered Apr 26 '17 at 18:09

Scott Simpson

3,832
3
27
35

score 0 · Answer 4 · answered Apr 26 '17 at 18:09

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>

Bootstrap CSS: align two forms buttons

4 Answers4