How to align one object to the left and another to the center in bootstrap with d-flex?

Navigation
0

It turns out that I'm doing a header with bootsrap and I have to put two elements in it, one that is a button that displays a sidebar and another that is the title. the button must be aligned to the left which I achieve, but the problem arises when centering the title since it is not perfectly centered due to the size of the button in the header. This is done only with css but I would like to know if it is possible to do it only with bootstrap and if so, how? 

<div class="shadow-sm bg-white rounded d-flex justify-content-between align-items-center p-3 mb-0">
<button type="button" id="sidebarCollapse" class="btn btn-white text-secondary">
    <i class="fas fa-bars"></i>
</button>
<h4 class="align-middle mb-0 mx-auto">Adherencia</h4>

I hope you made me understand! Thanks.

Greetings!

César.

    
asked by Cesar Barahona 10.07.2018 в 01:23
source

1 answer

0

What I understand is to focus on the whole truth?

If so, try using this: 

<div class="shadow-sm bg-white rounded d-flex justify-content-around align-items-center p-3 mb-0">
<button type="button" id="sidebarCollapse" class="btn btn-white text-secondary">
    <i class="fas fa-bars"></i>
</button>
<h4 class="align-middle mb-0 mx-auto">Adherencia</h4>
    
answered by 10.07.2018 в 04:10
Create XML with specific structure Because retrofit shows me null