bootstrap 4 - How can I align input-group-append elements to the right?

Question

<div class="col-lg-5 col-md-6 col-sm-6" style="background-color: transparent">
    <div class="input-group">
        <text class="font-weight-bold float-left" >Lotti</text>    

        <div class="input-group-append float-right">
            <input type="text" class="m-0 form-control form-control-sm" style="max-width: 150px;height:25px" @bind="testoRicerca" @bind:event="oninput" @onkeypress="CercaLotto" />
            <button class="border-0 bg-filter m-0" title="Cerca lotto" @onclick="TrovaLotto"><i class="fas fa-search fa-lg"></i></button>
            <button class="@buttonPoszioniLottoClass" title="Posizioni lotto" @onclick="ShowPosizioniLotto"><i class="fas fa-crosshairs fa-lg"></i></button>
            <button class="border-0 bg-transparent m-0" title="Note di entrata lotto" @onclick="ShowNoteEntrataLotto"><i class="far fa-clipboard fa-lg"></i></button>
        </div>
    </div>

That produces this:

I want to align highlighted elements on the right, and keep on same line the text "Lotti".

Thank you very much

question from:https://stackoverflow.com/questions/65671978/how-can-i-align-input-group-append-elements-to-the-right

Answer 1

you can use the d-flex function from bootstrap like this:

<div class="input-group d-flex justify-content-end">
        <text class="font-weight-bold float-left" >Lotti</text>    

        <div class="input-group-append float-right">
            <input type="text" class="m-0 form-control form-control-sm" style="max-width: 150px;height:25px" @bind="testoRicerca" @bind:event="oninput" @onkeypress="CercaLotto" />
            <button class="border-0 bg-filter m-0" title="Cerca lotto" @onclick="TrovaLotto"><i class="fas fa-search fa-lg"></i></button>
            <button class="@buttonPoszioniLottoClass" title="Posizioni lotto" @onclick="ShowPosizioniLotto"><i class="fas fa-crosshairs fa-lg"></i></button>
            <button class="border-0 bg-transparent m-0" title="Note di entrata lotto" @onclick="ShowNoteEntrataLotto"><i class="far fa-clipboard fa-lg"></i></button>
        </div>