What I need is this:
WhatItriedtodowiththeknowledgeIhaveinbs4andgridwasthis:
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="row no-gutters">
<div class="col-12 bg-secondary">
<i class="fas fa-phone fa-lg"></i>
<h6 class="card-text text-center">(27) 3974-514</h6>
</div>
</div>
<div class="row">
<div class="col">
segunda linha
</div>
</div>
</div> 
But the 2 elements are one underneath the other, how do I make them stay on the same line?
I even managed to put it, but the text was not centered because of the other element, it has to be centered in relation to the row in the case. I also tried with flex, but without success.
So when using a css framework like the bootstrap, it is always recommended to write as few css as possible.
Bootstrap defaults to all divs that do not have a size specification (type col-2 , col-5 ) have 100% width. so you do not have to put that col-12 you're using, so I've already taken it.
The other thing is that the font-awesome class is half wrong with the "s" then I removed the s too, got fa fa-phone fa-lg .
EDIT: Actually that was my mistake, I was considering version 4 of fontawesome. Fixed my bug in the snippet
With these considerations in mind, the only thing you have to do is to place the two elements in separate divs:
text-center ; position-absolute ; and it works fine:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
<div class="card">
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="no-gutters bg-secondary">
<div class="position-absolute">
<i class="fas fa-phone fa-lg"></i>
</div>
<div class="card-text text-center">
<h6>(27) 3974-514</h6>
</div>
</div>
<p>segunda linha</p>
</div>
</div>As final considerations, although you did not ask this:
It is worth noting that bootstrap4 has this utility, if you want to put margin on both sides (left and right), you can use the class mx-3 ie "margin on X-axis size 3 ", the same logic works for both the Y-axis and the padding.
It is recommended that all the text of the card be inside the div with class card-body , so they have that margin for the card margin (which I also added to the snippet, if you do not want it, just take the first div).
Look at the simplest solution for this would be to place the icon inside H6 and put it on the left with float .
See in this example how it was. I did not change anything in your code, I just put the icon in h6 and I used float as I said.
Fontawesome transforms <i> to svg , so your class has to get svg and not <i>
h6 > svg {
float: left !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="row no-gutters">
<div class="col-12 bg-secondary">
<h6 class="card-text text-center"><i class="fas fa-phone fa-lg"></i>(27) 3974-514</h6>
</div>
</div>
<div class="row">
<div class="col">
segunda linha
</div>
</div>
</div>