I am using Bootstrap 5 to display a table with a group of buttons (input-group) on the last column. By default the entire input-group is left aligned and I am not able to align it to the right (the input-group takes the entire width of the parent td)

<table id="file_year-files" class="table table-striped table-hover table-sm" style="white-space: nowrap;">
    <tbody>
        <tr>
            <td>Certificado empresa pagadora</td>
            <td>Certificado de desplazamiento</td>
            <td>
                <div class="input-group p-0" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                    <button type="button" class="btn btn-primary btn-sm" role="button" title="Editar documento"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-primary btn-sm" role="button" title="Descargar documento"><i class="fa fa-download"></i></button>
                    <button type="button" class="btn btn-primary btn-sm" role="button" title="Eliminar documento"><i class="fa fa-trash"></i></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

BTW, I am using the flex styles in the input-group to keep the buttons in one single line even if the browser width is reduced, so any improvement to this is also welcome.

I am using Bootstrap 5 to display a table with a group of buttons (input-group) on the last column. By default the entire input-group is left aligned and I am not able to align it to the right (the input-group takes the entire width of the parent td)

<table id="file_year-files" class="table table-striped table-hover table-sm" style="white-space: nowrap;">
    <tbody>
        <tr>
            <td>Certificado empresa pagadora</td>
            <td>Certificado de desplazamiento</td>
            <td>
                <div class="input-group p-0" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
                    <button type="button" class="btn btn-primary btn-sm" role="button" title="Editar documento"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-primary btn-sm" role="button" title="Descargar documento"><i class="fa fa-download"></i></button>
                    <button type="button" class="btn btn-primary btn-sm" role="button" title="Eliminar documento"><i class="fa fa-trash"></i></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

BTW, I am using the flex styles in the input-group to keep the buttons in one single line even if the browser width is reduced, so any improvement to this is also welcome.

• bootstrap-5

• getbootstrap.com/docs/5.3/utilities/flex/#justify-content – C3roe Commented Feb 7 at 7:43
• "BTW, I am using the flex styles in the input-group to [...]" - no reason to set those as inline style, BS has classes for all that stuff. – C3roe Commented Feb 7 at 7:44

1 Answer 1

Based on the comments given (thanks a lot!) I finally solved it this way:

<div class="input-group p-0 d-flex justify-content-end flex-nowrap">