Arranging a pair of buttons from separate forms to be perfectly aligned on the same line

I have a page called edit.ejs for editing camps. This page contains two forms, one for submitting edits and the other for deleting the camp. Each form has a button, and they are currently displayed below each other. How can I align the buttons so that they appear next to each other?
I am using Bootstrap5 v5.3

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abba8affe4f8e4f9">[email protected]</a>/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 desired alignment of the buttons should look like the image provided https://i.sstatic.net/B6X7d.png

htmlcssejsbootstrap-5

Answer №1

To maintain the current HTML structure, you can apply the helper class float-start to the "save" button (adding a slight right margin using the me-2 class).

If altering the structure is an option, @isherwood's suggestion works well.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f6edf1edf0">[email protected]</a>/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

It is not necessary for form inputs to be within the form itself. You can move them outside of the form and use the form attribute to associate them with their respective forms. This gives you more flexibility in positioning them as needed, all while ensuring that they are linked correctly using the corresponding name attributes on the forms.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b2a9b5a9b4">[email protected]</a>/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

Although you may not have the ability to modify HTML due to it coming from various JSP files, one effective solution is to consolidate all buttons within a single form. This approach is especially useful when you are unable to alter the forms' HTML directly (for example, if it originates from MFE or another source/application). It's worth noting that buttons should typically belong to the same form unless there is a specific requirement, such as an MFE concept necessitating different actions upon button clicks. Keep in mind that the mb-3 class has been removed from the first button to correct any misalignment issues in a vertical layout, but you can add the same class to the second button for alignment consistency. By examining the classes used in the HTML, it is evident that Bootstrap is being utilized, so I have also integrated it into the sample code.

https://i.sstatic.net/JZqj0.png

@import url("https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d110d10">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing email design in a Bootstrap 5 form

Hello everyone, I'm taking my first dive into Bootstrap and seeking some guidance. If this topic has already been discussed, kindly point me in the right direction. My goal is to develop a Bootstrap 5 form that can function on a Raspberry Pi without ...

bootstrap-5

Are there any "Undefined" tabs hiding in your RMarkdown tabsets?

After knitting my RMarkdown document to an HTML file, I noticed that the tabs appeared as shown below: https://i.sstatic.net/x1p70.png However, when I save and share the document with my audience, I encounter an issue where these tabs are labeled as "und ...

htmlrr-markdown

Modifying Names and Job Titles to Appear Beneath Images in HTML and CSS

Is there a way to update names and job titles directly below the images? To find out more, click on this link ...

htmlcss

Updating or swapping images using JavaScript and HTML

I am looking to implement a feature similar to Twitter, where uploading a picture automatically updates the avatar by displaying a spinner while the new image loads. I attempted to accomplish this with the following code: <script language="javascript"& ...

javascriptjqueryajaxhtml

Guide on using timestamps in PHP

I am struggling to incorporate the current date and time of the SO-NUMBER that the user is entering. The issue I'm encountering lies within the IF..ELSE loop, it only updates one column in the database, which is the "samplerecived" column even if I ...

phphtmlmysql

CSS trick that works on iOS16 as well

Previously, this CSS workaround was effective up to iOS version 15.6; however, it does not seem to be functioning in iOS 16. @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {} } Are there any updated techniques avail ...

cssmedia-queriesios16

Show the name of the current user in a WordPress form using a readonly input field

How can I display the logged-in WordPress username (display name) in a form input field that is set to readonly? I have already checked out the Function Reference/wp get current user, but haven't had any success with it. Take a look at the code snip ...

phphtmlwordpress

Passing information using AJAX, utilize the data as a paragraph in PHP

As someone with limited experience in PHP, I've been attempting to create a basic "adminpage" on my own. However, I've run into an issue when passing a value via AJAX from the adminpage to the index page - the value does not appear in the paragra ...

phphtmlajax

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

javascriptjquerycsswordpressgif

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues w ...

htmlcssflexbox

Switching up the Label Colors in Chart.JS

It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS. The situation is a bit unique: t ...

javascripthtmlcsschart.js

Image expansion

I have a container element div that holds various content of unknown length. How can I add a background image that extends the entire length of the container since background-images do not stretch? I attempted to use a separate div with an img tag inside. ...

htmlcss

background gradient coloring and image blending

I have created a special class that includes a gradient background color: .banner { background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D; } Additionally, I have defined another class that adds a background ...

htmlcss

Struggling to create a mobile-friendly design

I've successfully created a dynamic world map using D3.js, but I need some guidance on making it responsive across various screen sizes. You can view the interactive world map here. Credentials to access the map: Username: DXLdemo Password: ...

htmlcssd3.jsresponsive-design

What is the best way to save newly added elements on a webpage that were submitted by the

I am looking for a way to save the changes made by users on my webpage so that they can navigate to different pages and come back without losing any added elements. These changes should be retained even when the user goes back to edit the webpage, but I pr ...

javascriptjqueryhtmllocal-storage

Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

Is it possible to achieve the design displayed in the image using MUI components? I am facing an issue where I am unable to properly insert a third Button into the MUI grid with the same width as the other two buttons. Any suggestions on how to solve this ...

cssreactjsmaterial-ui

What is causing this element to unexpectedly elongate when I hover on it, despite having a 3D rotation effect applied?

After implementing a rotational hover effect on an element using the following code: transform: perspective(600px) rotateY(-25deg); I encountered a major issue when hovering over it. The element sometimes rotates abruptly and stretches excessively. If y ...

htmlcssrotationhover

Is there a way to retrieve the chosen selection from a select dropdown element using JavaScript?

As someone who is still learning JavaScript, I've come across a particular issue. Within a webpage, there is a select dropdown as shown below: <select id="selTipoRap" class="form-control" th:field="*{tipoRappresentante}&qu ...

javascripthtmljqueryjquery-events

Can someone please explain to me why the Transition effect is not functioning properly for input:checked::before?

Can someone please help me troubleshoot why the transition effect on the input's before element is not working when checked? If I can't solve this issue, I might have to consider alternative solutions. input[type="checkbox"]{ width: 160px ...

htmlcssinputchecked

Is it possible to use PHP to retrieve and display an entire webpage from a separate domain?

Currently, I am working on a PHP program that allows me to load a complete webpage and navigate the site while remaining in a different domain. However, I have encountered an issue with loading stylesheets and images due to them being relative links. I am ...

phphtml