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

Asked

Viewed 433 times

2

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

Finally I ended up centralizing with padding and margin, only it is not responsive, and since I am using bootstrap is better to do with it, but with the examples I found in documentation I didn’t get a result.

Footer SOpt

I need something similar to the footer of ONLY, but in place of the name of the links I will use the 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

inserir a descrição da imagem aqui

SOLUTION

I was able to solve using the flex classes of bootstrap. It follows documentation from flex.

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>
html css css3 twitter-bootstrap bootstrap-4

1 answer

1


You can easily achieve the desired result using the classes float 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>

  • I had already done something similar, but in this way as I had said the items stand upright, and the inline-item class does not affect them to let them horizontal.

  • You speak as li’s?

  • Yes, they’re vertical and I need them horizontal.

  • I edited the answer, a very simple way to solve this is to remove the tag ul, actually do not know why is using lis, could be simply links, without lis.

  • I put the LI because as I said in the question was a way to position with the flexbox, but if it is better to remove without problems.

  • I copied yours and pasted, but the result was different, I edited the question with the result.

  • He copied the Css too, I removed the Lis and left only the to.

  • Yes I copied the CSS, what happens is that you did not give a float on the logo, so it is right in the middle. But if you give a float:left in the logo the text of Copyright ends up rising and getting in the middle

  • Strange, I don’t need to give float-left on the logo because by default every element is float left, it doesn’t make sense. But put the hr and the p inside a div that is better to position them, it is not good to leave loose elements like this.

  • I already put them inside a div, but the behavior is the same.

  • Good guy is strange, in case you would have to see all his css, because only then would have to know what is happening.

  • I was able to solve it using the bootstrap. I will edit the answer with the solution,

  • Cool man who solved, would comment that there were other ways to get the expected result, but I found the float-right the simplest.

Show 8 more comments

Browser other questions tagged html css css3 twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.