Aligning two buttons in different forms in one line-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <h1 >Edit Camp</h1>
  
  <div >
    <form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
      <div >
        <label  for="title">Name</label>
        <input  type="text" id="title" name="campground[title]" value="<%= camp.title %>">
      </div>
      
      <div >
        <label  for="location">Location</label>
        <input  type="text" id="location" name="campground[location]" value="<%= camp.location %>">
      </div>
      
      <div >
        <label  for="image">Image URL</label>
        <input  type="text" id="image" name="campground[image]" value="<%= camp.image %>">
      </div>
      
      <div >
        <label  for="price">Price</label>
        <div >
          <span  id="price-label">$</span>
          <input type="number"  id="price" placeholder="0.00" aria-label="price" aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
        </div>
      </div>
      
      <div >
        <label  for="description">Description</label>
        <textarea  type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
      </div>
      <div ><button >Save</button></div>
    </form>
    
    <form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
      <button >Delete</button>
    </form>
  </div>
</div>

The buttons should be aligned like the image below

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <h1 >Edit Camp</h1>

  <div >

    <form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
      <div >
        <label  for="title">Name</label>
        <input  type="text" id="title" name="campground[title]" value="<%= camp.title %>">
      </div>

      <div ><button >Save</button></div>
    </form>
    
    <form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
      <button >Delete</button>
    </form>

  </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <h1 >Edit Camp</h1>

  <div >
    <form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST" name="campgroundEditForm">
      <div >
        <label  for="description">Description</label>
        <textarea  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 >
      <button  form="campgroundEditForm">Edit</button>
      <button  form="campgroundDeleteForm">Delete</button>
    </div>
  </div>
</div>

CodePudding user response：

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. 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/[email protected]/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 >
        <h1 >Edit Camp</h1>
        <div >
            <form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
        <div >
            <label  for="title">Name</label>
            <input  type="text" id="title" name="campground[title]" value="<%= camp.title %>">
        </div>
        <div >
            <label  for="location">Location</label>
            <input  type="text" id="location" name="campground[location]"
            value="<%= camp.location %>">
        </div>
        <div >
            <label  for="image">Image URL</label>
            <input  type="text" id="image" name="campground[image]" value="<%= camp.image %>">
        </div>
        <div >
            <label  for="price">Price</label>
            <div >
                <span  id="price-label">$</span>
                <input type="number"  id="price" placeholder="0.00" aria-label="price"
              aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
          </div>
        </div>
        <div >
            <label  for="description">Description</label>
            <textarea  type="text" id="description"
            name="campground[description]"><%= camp.description %> </textarea>
        </div>
        <div ><button
            >Save</button></div>
      </form>
      <form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
           <button >Delete</button>
      </form>
    </div>
  </div>


</body>

</html>