Bootstrap Forms/ Buttons Side by Side

Question

I am trying to get the two forms/ buttons side by side. My HTML (Bootstrap) code is as follows:

<form role="form" action="delete.php" method="post">
                <div class="form-group">
                    <input type="hidden" name="delete_id" value="<?php echo $row['ID']; ?>" />
                </div>
                <button type="submit" class="btn btn-danger">Delete Post</button>
            </form>

            <form role="form" action="edit.php" method="post">
                <div class="form-group">
                    <input type="hidden" name="edit" value="<?php echo $row['ID']; ?>" />
                </div>
                <button type="submit" class="btn btn-info">Edit Post</button>
            </form>

On the user end, it is displayed as follows:

I am trying to get them side by side on the user-end. Thanks

This SO thread can help you http://stackoverflow.com/questions/11481606/making-two-html-buttons-go-side-by-side — egor.zhdan, Nov 13 '15 at 18:43

score 1 · Answer 1 · answered Nov 13 '15 at 18:43

Please wrap both the forms in separate div or make them block container following float left.

<div class="floatleft">
   <form role="form" action="delete.php" method="post">
      <div class="form-group">
     <input type="hidden" name="delete_id" value="" />
      </div>
      <button type="submit" class="btn btn-danger">Delete Post</button>
   </form>
</div>
<div class="floatleft">
   <form role="form" action="edit.php" method="post">
      <div class="form-group">
         <input type="hidden" name="edit" value="" />
      </div>
      <button type="submit" class="btn btn-info">Edit Post</button>
   </form>
</div>

Or Make form a block container to resolve this issue.

<form role="form" action="delete.php" method="post" class="displayblockFloatLeft">
          <div class="form-group">
         <input type="hidden" name="delete_id" value="" />
          </div>
          <button type="submit" class="btn btn-danger">Delete Post</button>
       </form>
       <form role="form" action="edit.php" method="post" class="displayblockFloatLeft">
          <div class="form-group">
             <input type="hidden" name="edit" value="" />
          </div>
          <button type="submit" class="btn btn-info">Edit Post</button>
       </form>

I would recommend first option as code is pretty much cleared.

score 0 · Answer 2 · answered Nov 13 '15 at 18:45

Here's one way to do this by using a display property (table-cell) and adding a form class to each form.

See working example Snippet.

.myForm {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="well">
    <form role="form" action="delete.php" method="post" class="myForm">
      <input type="hidden" name="delete_id" value="<?php echo $row['ID']; ?>" />
      <button type="submit" class="btn btn-danger">Delete Post</button>
    </form>
    <form role="form" action="edit.php" method="post" class="myForm">
      <input type="hidden" name="edit" value="<?php echo $row['ID']; ?>" />
      <button type="submit" class="btn btn-info">Edit Post</button>
    </form>
  </div>
</div>

Bootstrap Forms/ Buttons Side by Side

2 Answers2