How to make forms inline-CodePudding

i have 3 forms

        <form th:method="get" th:action=="..." th:object="${...}" >
            <input  type="submit" value="Edit" >
        </form>

        <form th:method="delete" th:action="..." th:object="${...}">
            <input type="submit" value="Delete" >
        </form>

        <form th:method="put" th:action="..." th:object="${...}">
            <input type="submit" value="Back" >
        </form>

How can i make them in one row with bootstrap

CodePudding user response：

You could simply wrap them in a div and put them in a flex row.

.wrap {
  display: flex;
}

<div >
  <form th:method="get" th:action=="..." th:object="${...}">
    <input type="submit" value="Edit" >
  </form>

  <form th:method="delete" th:action="..." th:object="${...}">
    <input type="submit" value="Delete" >
  </form>

  <form th:method="put" th:action="..." th:object="${...}">
    <input type="submit" value="Back" >
  </form>
  <div>

CodePudding user response：

You have to place all these form elements in a div and add styling to the div as any one of the below. You can use wrap also for the styling.

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

justify-content: start;      /* Pack items from the start */

justify-content: end;        /* Pack items from the end */


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

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

justify-content: left;       /* Pack items from the left */

justify-content: right;      /* Pack items from the right */

You can go through the documentation for better understanding.