How to keep 2 elements on the same line Grid bootstrap 4

1

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.

    
asked by anonymous 17.03.2018 / 05:08

2 answers

2

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:

  • the text you want to center within a div with class text-center ;
  • the icon inside a div with class 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).

  • 17.03.2018 / 15:32
    0

    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>
        
    17.03.2018 / 12:09