I feel like this is relatively simple styling, but i cant for the life of me figure out how to do it.

My code:

<div class="container py-5">
   <div class="pull-left" style="margin-right:5px">
      <form method="post">
         {% csrf_token %}
         <p>
         <h3>
            Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
         </h3>
         </p>
         <button class="btn btn-danger" type="submit" value="Confirm">Confirm</button>
      </form>
   </div>
   <a href="{% url 'entry-detail' entry.id %}">
   <button class="btn btn-secondary">Cancel</button>
   </a>
</div>

I want both the Confirm and Cancel buttons to be aligned next to eachother, but if I put the Cancel besides the Confirm button or in a div inside of the form it too performs the delete action.

In Django using Bootstrap.

CodePudding user response：

Your easiest solution is to put the cancel button in your form aswell, since your form is a block level element it wont let you put it next to it unless you change it to an inline level element. or make the parent a flexblox or grid container.

The solution:

.button--container {
  display: flex;
  justify-content: space-between
}

<div class="container py-5">
   <div class="pull-left" style="margin-right:5px">
      <form method="post">
         {% csrf_token %}
         <p>
         <h3>
            Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
         </h3>
         </p>
         <div class="button--container">
           <button class="btn btn-danger" type="submit" value="Confirm">Confirm</button>
           <a class="btn btn-secondary" href="{% url 'entry-detail' entry.id %}">Cancel</a>
         </div>

      </form>
   </div>

</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You will also notice I have changed your markup from <a><button /></a> to <a></a>. This is because you are not allowed to put an anchor tag inside a button or a button inside an anchor.