Search code examples
htmlsymfonybootstrap-4twitter-bootstrap-4

bootstrap align button to form submit button in td


I'm using bootstrap on my Symfony app and in my index action, I display a table with all items and two buttons to update or delete an item. In fact I'm not using to buttons I use one button to modify the entity and a form with hidden inputs and the submit button to delete this item. Currently the submit button is displayed below the update button and what I want is to display the two buttons aligned. Thanks by advance if you have the solution of my problem here is my code:

<td>
    <a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary">Modifier</a>
    <form action="/app_dev.php/quotes/2/delete">
        <input type="hidden" name="_method" value="DELETE">
        <button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
    </form>
</td>

enter image description here


Solution

  • Ok thank you all for your answers, I find out to align those two buttons by using bootstrap flex classes, here the entiere solution:

    <td class="d-flex flex-row">
        <a href="{{ path('wallofquotes_quote_update', {'id': quote.id}) }}" class="btn btn-sm btn-primary mr-1">{{ 'wallofquotes.ui.update'|trans }}</a>
        <form method="POST" action="{{ path('wallofquotes_quote_delete', {'id': quote.id}) }}">
            <input type="hidden" name="_method" value="DELETE">
            <button type="submit" class="btn btn-sm btn-danger">{{ 'wallofquotes.ui.delete'|trans }}</button>
        </form>
    </td>