How to align icons with text on the side of Bootstrap 4?

Question

So, I would like to know how I can align the icons with the texts, in this case, the text right in the direction of the center of the icon. I tried it like this, and with some other Bootstrap classes, but some don’t even take effect.

<div class="d-inline-flex justify-content-start align-items-stretch">
                                <div class="col-md-2">
                                    <i class="fas fa-envelope" id="logo-email"></i>
                                </div>
                                <div class="col-md-8 m1-auto align-self-center">
                                    <p class="texto-estilo">texto aqui</p>
                                </div>
                            </div>

But that way they don’t line up, the text always gets too high, or too low, it’s weird. At the moment it’s like this:

Answer 1

See this solution: https://jsfiddle.net/gferreiraa/7ty6o5zL/3/

<div class="container">

    <span class="d-block">
    <span>texto aqui</span>
    <i class="fas fa-envelope" id="logo-email"></i>
    </span>

    </div>

Answer 2

Your code actually has several problems with Bootstrap. First than the father of a col- must be a row, after the class m1-auto doesn’t exist, I believe you wanted to write m-1. After that to use the type flexbox class align-self-center the container has to be flex, and the col- it’s not flex, so you need to put in col- something like <div class="col-md-8 m-3 d-flex align-items-center">

Now a hint, the tag <p> by default has a margin-botton, something you don’t want! So put in it m-0 That’ll wipe out the margins.

Follow the no-model-aligned only with the classes in Bootstrap! No need for extra CSS! OBS: I changed the configs of col- only to demonstrate here in Snippet, but in your document you can return to col-md-

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    
<div class="container">
    <div class="row">
        <div class="col-1 m-3 d-flex align-items-center">
            <i class="fas fa-envelope" id="logo-email"></i>
        </div>
        <div class="col-8 m-3 d-flex align-items-center">
            <p class="texto-estilo m-0">texto aqui</p>
        </div>
    </div>
</div>