How to keep 2 elements in the same row Grid bootstrap 4

Question

What I need is this:

What I tried to do with the knowledge I have in bs4 and grid was the following:

<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>

However the 2 elements are below each other, as I do for them to be in the same line?

I even managed to put, but the text was not centered because of the other element, it has to be centered in relation to Row in the case. I also tried with flex, but without success.

Answer 1

So when using a css framework like bootstrap, it is always recommended to write as little as possible of css.

Bootstrap defaults to all Divs that do not have a size specification (type col-2, col-5) have width of 100%. therefore, you do not need to put that col-12 that you’re wearing, so I’ve taken.

The other thing is that the font-awesome class is kind of wrong with the "s" so I took the s too, got fa fa-phone fa-lg.

EDIT: Actually this was a mistake of mine, I was considering version 4 of fontawesome. I corrected my error in snippet

With those considerations in mind, the only thing you have to do is put the two elements in separate Ivs:

• the text you want centralized within a div with class text-center;
• the icon inside a div with class position-absolute;

and works right:

  <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 didn’t ask that:

1. It is worth noting that bootstrap4 has this utility of, if you want to put margin on both sides (left and right), you can use the class mx-3 that is, "X-axis margin of size 3", the same logic works for the Y-axis, applied to both margin and padding.

2. It is recommended that all card text is inside the div with class card-body, so they have that margin for the margin of card (which I also added to the snippet, if you don’t want it, just take the first div).

Answer 2

Look at the simplest solution to this would be by placing the icon inside the H6 and putting him on the left with the float.

Look at this example as it turned out. I didn’t change anything in your code, I just put the icon in the h6 and used float as I said.

OBS: the Fontawesome transforms the <i> in svg, then your class has to catch the svg and not the <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>