1 item on the left and two items on the right good bootstrap

Navigation
2

I'm trying to leave 1 item aligned on the left and 2 items aligned on the right with Bootstrap 4 , I tried to use flexbox but since there are 3 items I get one in the middle and one on each end, I tried to make the 2 items on the right as a list, but then it is one underneath the other and not next, so I tried to put a inline-list in their class but no effect.

Finally, I ended up centralizing with padding and margin, but nothing is responsive, and since I'm using bootstrap, it's better to do it, but with the examples I found in documentation I did not get results.

IneedsomethingsimilartothefooterSO,butinsteadofthenameofthelinksIwillusethelogos.

<footerclass="footer-bg">
<div class="footer">
  <div class="footer-logo">
    <a class="navbar-brand js-scroll" href="#page-top"><img src="img/logo.png" alt="Logotipo"></a>
  </div>
  <nav class="footer-nav">
    <ul>
      <li><a href="#sobre"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="#produtos"><i class="fab fa-instagram"></i></a></li>
    </ul>
  </nav>
</div>
<hr style="border: 1px solid rgba(77,77,77,0.5)">
<p class="text-center">Copyright © 2019 - Todos os direitos reservados <br>
</p>

EDIT

SOLUTION

Iwasabletosolveusingthebootstrapflexclasses.Followthe flex documentation.

Class used to leave an item on the far left and 2 items on the far right. 

<div class="d-flex bd-highlight mb-3">
 <div class="mr-auto p-2 bd-highlight">Flex item</div>
 <div class="p-2 bd-highlight">Flex item</div>
 <div class="p-2 bd-highlight">Flex item</div>
</div>
    
asked by anonymous 24.12.2018 / 12:09

1 answer

1

You can easily achieve the desired result using the float classes of Bootstrap: 

img {
  width: 100px;
  height: 30px;
}
a {
  padding-right: 5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<footer class="footer-bg">
  <div class="footer">
    <div class="footer-logo">
      <a class="navbar-brand js-scroll" href="#page-top"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShDBdzn38UgWzjCTJDykF2hZDRBggqDe3hHGF0F7jEOub1xMIr4A"alt="Logotipo"></a>

      <a class="float-right" href="#sobre">Sobre<i class="fab fa-linkedin-in"></i></a></li>
      <a class="float-right" href="#produtos">Produtos<i class="fab fa-instagram"></i></a></li>

    </div>
  </div>
  <hr style="border: 1px solid rgba(77,77,77,0.5)">
  <p class="text-center">Copyright © 2019 - Todos os direitos reservados <br>
  </p>
</footer>
    
24.12.2018 / 13:11
Rows in Columns without Column Defaults - SQL Server How do I get access_token when I sign in with Facebook on MVC5?