Aligning two buttons in different forms in one line

January 26, 2023

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

>Solution :

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>