Alignment with two elements in the flexbox: One centered and the other at the end of the flexcontainer

Question

I’m trying to align two elements in the same line: one centered and the other at the end of the flex container.

I get the expected result with this code:

<div class="row">
    <div class="d-flex w-25"></div>
    <div class="d-flex justify-content-center w-50 my-2">
        <h5>Cadastro</h5>
    </div>
    <div class="d-flex justify-content-end w-25 mt-2">
        <p class="mt-1">Inativo</p>
        <div>
            <kendo-switch formControlName="xxx"></kendo-switch>
        </div>
    </div>
</div>

But I suppose it’s not good practice to use a flex-container empty to align the h5.

Is there any alternative with best practice to perform the alignment of these two items?

I tried to use w-75 in div of h5 but it does not have the same effect, it is not totally centralized

Answer 1

Dude your code is right, no need to worry, and look how coherent your Big Brother is, you have first a div with 25% wide w-25, after a 50%, w-50, and one more of 25 totalling 100%. There’s no mystery.

If you want, I don’t think justifiable, you can put margin-left:25% in div w-50 that you will have the same effect. This is the way that Bootstrap 3...

In Bootstrap 3 it was like this

Or if you want to use a standard Bootstrap 4 class ml-auto in div w-50, this will push it right and as the Grid of BS4 is in flex everything will be adjusted! See in the code

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <!-- <div class="d-flex w-25"></div> -->
        <div class="d-flex justify-content-center w-50 ml-auto my-2">
            <h5>Cadastro</h5>
        </div>
        <div class="d-flex justify-content-end w-25 mt-2">
            <p class="mt-1">Inativo</p>
            <div>
                <kendo-switch formControlName="xxx"></kendo-switch>
            </div>
        </div>
    </div>
</div>

OBS: this Grid that you built using .row and the class of width w-* may not be fully responsive, preferably for div col