Tips for creating inline forms

I have three different forms on my webpage. One for editing, one for deleting, and one for going back.

        <form th:method="get" th:action="..." th:object="${...}" class="row">
            <input type="submit" value="Edit" class="btn btn-primary col my-2">
        
            <form th:method="delete" th:action="..." th:object="${...}" class="col">
                <input type="submit" value="Delete" class="btn btn-secondary my-2">
            </form>

            <form th:method="put" th:action="..." th:object="${...}" class="col">
                <input type="submit" value="Back" class="btn btn-primary my-2">
            </form>

I would like to line them up horizontally using Bootstrap. How can I achieve this?

Answer №1

To achieve the desired layout, make sure to enclose all form elements within a div and apply styling to it using one of the following options listed below. Additionally, you can also utilize wrap for styling purposes.

justify-content: center;     /* Align items around the center */

justify-content: start;      /* Align items starting from the beginning */

justify-content: end;        /* Align items starting from the end */


justify-content: flex-start; /* Align flex items from the start */

justify-content: flex-end;   /* Align flex items from the end */

justify-content: left;       /* Align items starting from the left */

justify-content: right;      /* Align items starting from the right */

For further clarity on this topic, feel free to refer to the provided documentation.

Answer №2

An easy solution would be to enclose them within a div and organize them in a flex row.

.container {
  display: flex;
}
<div class="container">
  <form th:method="get" th:action=="..." th:object="${...}">
    <input type="submit" value="Edit" class="btn btn-primary my-2">
  </form>

  <form th:method="delete" th:action="..." th:object="${...}">
    <input type="submit" value="Delete" class="btn btn-secondary my-2">
  </form>

  <form th:method="put" th:action="..." th:object="${...}">
    <input type="submit" value="Back" class="btn btn-primary my-2">
  </form>
  <div>

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

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

Is there a method to delay the loading of a webpage until an image has fully loaded (preloading)?

How can I ensure that an image used in a preloader is loaded before the other contents on my website? <div class="overlay" id="mainoverlay"> <div class="preloader" id="preloader"> <img src="images/logo128.png" id="logo-p ...

Bootstrap 4 fails to initialize

I'm feeling a bit confused. I put together an HTML, CSS, and JS file to showcase a new design concept and decided to incorporate bootstrap 4 into it. The structure of the folder is as follows: - projectFolder - index.html - css -- styles ...

Unable to specify the width of my website using full-width in Bootstrap

Using the bootstrap grid system has caused a slight issue for me. Whenever I scroll to the right side of the window, there is a white space that appears: https://i.sstatic.net/YHj92.png I have set the body width as 100vw; Is there a way to eliminate this ...

Choosing the initial tab to display when the page loads from a selection of 3 tabs

How can I set the "All" tab to be selected by default when the page loads, with the text color black and underlined? .publisher-tab { background-color: rgb(255, 255, 255) !important; color: #B3B3B3; font-family: 'Open Sans'; font-style ...

Struggling to confirm the validity of a number using React and Bootstrap

Seeking assistance with validating an HTML-Input field in React to only allow numbers. Here is my current attempt: How can I configure the Input field to accept only numerical values? phone: { elementLabel: 'Phone Number', elementType: ...

How to eliminate vertical spacing between rows in Bootstrap?

I am looking to eliminate the unsightly vertical spacing between the bootstrap rows displayed below: https://i.sstatic.net/dgR2z.png The code appears as follows: <div class="outerbox container-fluid vw-100"> <div class="row vw-100 justify-co ...

The clash between CSS's 'snap-scroll' and jQuery's '.animate scrollLeft' functionality

My HTML and CSS slider utilizes the scroll-snap feature for manual scrolling along with jQuery buttons for automated scrolling. However, I have encountered an issue where using scroll-snap-type: x mandatory; causes severe lag in the jQuery scrollLeft anima ...

Utilize the CSS ~ selector to target the first child element

I have a scenario where I want to apply CSS to the first child only if a second or other child exists in the parent. The '~' selector can achieve this, but it applies the style to siblings of the first child, and I need it the other way around. ...

The React Vite application encountered an issue: There is no loader configured for ".html" files at ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html

**Encountered errors in a React Vite web app** ** ✘ [ERROR] No loader is configured for ".html" files: ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html ../server/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js:86 ...

Styles in NEXT.js are not loading properly due to issues with the Module

I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component. /*/components/Livestream/App.js*/ import styles from './A ...

Guide on building a 2 x 2 grid layout with NativeScript's GridLayout

The Challenge I'm having trouble arranging images in a grid format with 2 rows and 2 columns, centering them evenly. Despite my efforts to experiment with different layouts, I've encountered some setbacks as shown below: https://i.sstatic.net/ ...

Ensure that images in a browser maintain their proportions without distortion on all device screens and orientations by setting their height and width to match the

I'm working on a slideshow component in React and I want the images to dynamically adjust to fit any device screen size and orientation. The goal is for the image to resize proportionally until it reaches either the top and bottom edges or left and ri ...

Adjusting the page view when a collapse is opened

I am working on a website that features 3 images, each of which opens a collapse below with an embedded iframe website inside when clicked. I am trying to implement a function where the site automatically scrolls down to the opened iframe when an image is ...

Transition CSS applied only to links containing images

I am trying to figure out how to apply a transition effect only on links that have images, rather than text. Specifically, I want the transition effect to be applied only to the second link in the following example: <a href="#">no image</a> &l ...

Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch. My goal is to design a mobile-style menu that can also be displayed on desktop screens. To achieve this, I have used jQuery to implement the sliding effect. You can view a ...

Trouble extracting data with XPath query in Python

Currently, I am attempting to extract specific information from this particular webpage. However, there are three crucial pieces of data that have proven to be quite elusive. Firstly, I am struggling to retrieve the grade, denoted by '5.6' next ...

Check for the presence of Jquery using vanilla JavaScript, and if it isn't found, load it dynamically

Can anyone help me with detecting the presence of JQuery using regular JavaScript? If it's not present, I want to load the JQuery file from Google or any other website. Here are two solutions that are known to work: Solution from Claudio Redi windo ...

What is the best way to add hover effects to the linked images on my Wordpress post, especially since they are icons?

Is there a way to add hover effects to linked images within a WordPress post? Below is the code snippet embedded in the WordPress post: <p> <a href="https://www.pinterest.com/meganpolk/?eq=miss&amp;etslf=2961"> <img class=" ...

Modernized Style - Additional Scrolling Feature for List Element

I've implemented code from Google's Material Design website for my project: https://material.io/components/web/catalog/lists/ Although it works well, the issue arises when more list entries are added and I have to scroll down to view them. The p ...