Estou tentando deixar 1 item alinhado na esquerda e 2 itens alinhados na direita com Bootstrap 4
, tentei utilizar flexbox
mas como são 3 itens fica um no meio e um em cada ponta, tentei fazer os 2 itens da direita como uma lista, porém dai fica um embaixo do outro e não ao lado, dai tentei colocar um inline-list
na classe delas mas não surgiu efeito.
Por fim acabei centralizando com padding e margin, só que não fica nada responsivo, e já que estou utiizando bootstrap é melhor fazer com ela, porém com os exemplos que achei na documentação eu não consegui resultado.
Preciso de algo semelhante ao footer do SO, porém no lugar do nome dos links vou usar os logos.
<footer class="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
SOLUÇÃO
Consegui resolver utilizando as classes de flex do bootstrap. Segue documentação do flex.
Classe utilizada para deixar um item na extrema esquerda e 2 itens na extrema direita.
<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>