Aligning two buttons in different forms in one line - html

Question

I have an edit.ejs page to edit a camp , in this page I have two forms , one to submit an edit and the other from to delete the camp, each form has a button , and they are below each other , how can I make the buttons aligned in one so that they are next to each other ?
I'm using Bootstrap5 v5.3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]" value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price" aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="mb-3"><button class="btn btn-success">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
The buttons should be aligned like the image below

Answer 1

If you need to keep the HTML structure as it is, you can simply use the helper class float-start on the "save" button (I also added a small margin to the right of it with me-2 class).
If you can change the structure, #isherwood's answer will do just fine.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3"><button class="btn btn-success float-start me-2">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>

Answer 2

Form inputs are not required to be inside the form. I'd move them both out of the form and reference their forms with the form attribute. Then you can position them as you like. This requires corresponding name attributes on the forms.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST" name="campgroundEditForm">
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST" name="campgroundDeleteForm">
</form>
<div class="mt-2">
<button class="btn btn-success" form="campgroundEditForm">Edit</button>
<button class="btn btn-danger" form="campgroundDeleteForm">Delete</button>
</div>
</div>
</div>

Answer 3

I assume you cannot change HTML as it might come from different JSP files but the best way to do it is to move buttons to the single form. This solution is only if you have no access to change forms html (as it might come from MFE or other source/app and as mentioned buttons should belong to the same form unless is MFE concept that requires different action upon clicking on button)). Anyhow it was not requested to set buttons on left so thought of showing case with right aligned anyway left aligned can be achieved by adding flex-starts). Note that mb-3 class is removed from first button as its misaligning buttons in vertical scope or you can add the same class to second button. One can tell by classes used in HTML that you have bootstrap added so I have added it in example code as well.
#import url("https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css");
.form-wrapper{
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.align-right{
float:right;
margin-right:0.5rem;
}
<!DOCTYPE html>
<html>
<body>
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3 form-wrapper">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]"
value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price"
aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description"
name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="remove-mb-3-class-from-here-to-align-buttons"><button
class="btn btn-success align-right">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</body>
</html>