bootstrap align button to form submit button in td

Question

bootstrap align button to form submit button in td

1.7k Views Asked by Samaël Villette At 09 April 2018 at 12:44

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>

Original Q&A

There are 6 best solutions below

Gobli On 09 April 2018 at 12:54

You can accomplish that by many ways. One simple form would be to add float: left to the link, like this:

<td>
    <a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary" style="float: left">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>

Vinay On 09 April 2018 at 12:54

first thing I don't understand that why you are using a form. you can easily call the desired URL with a parameter on an onClick event. But still if it is necessary then you can add a property to form and it's element to be style="display:inline-block;" or can write a separate css.

form {
  display:inline-block;
}

Guillaume Harari On 09 April 2018 at 12:55

<td class="flex">
    <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>

in your css :

.flex {
display: flex;
}

good source for display with flex https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox (in french)

Friday Ameh On 09 April 2018 at 12:58

this will be helpful

<style>
.div1, .div2{
  display: inline-block;
}


</style>

 <body>


<td>

    <div class="div1"><a href="/app_dev.php/quotes/2/edit" class="btn btn-sm btn-primary">Modifier</a></div>
      <div class="div2"><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></div>
</td>
</body>

Hadi On 09 April 2018 at 13:02

HTML

<td class="button-container">
    <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>

CSS

.button-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

Additionally, you can make button 100%

.button-container .btn {
  width: 100%;
}

**Samaël Villette** · Accepted Answer · 2018-04-09T13:34:28.310000

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>

bootstrap align button to form submit button in td

There are 6 best solutions below

Related Questions in HTML

Related Questions in SYMFONY

Related Questions in BOOTSTRAP-4

Related Questions in TWITTER-BOOTSTRAP-4

Trending Questions

Popular # Hahtags

Popular Questions