0

Estoy aprendiendo HTML CSS y Bootstrap y estoy armando una web. Necesito que el botón de nombre quede alineado a la izquierda y los otro cuatro botones alineados a la derecha, uno próximo al otro obviamente, y no puedo lograrlo. Es una NavBar simple.

<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Nombre</a>
        <a id="navbar-facebook" href="#"><i class="fa-brands fa-facebook-square fa-lg"></i</a>
        <a id="navbar-instagram" href="#"><i class="fa-brands fa-instagram fa-lg"></i></a>
        <a id="navbar-twitter" href="#"><i class="fa-brands fa-twitter fa-lg"></i></a>
        <a id="navbar-login" href="#"><button type="button" class="btn btn-outline-success btn-sm">Login</button></a>
    </div>
</nav>

1 respuesta 1

1

Buen día,

Puedes utilizar d-flex de bootstrap para eso (Documentación).

Para alinear el primer elemento a la izquierda puedes agregar la clase me-auto (Margin end)

Agregué también la clase pe-2 (Padding end 2) a los botones de FontAwesome para que no se vieran pegados uno al otro, si los deseas juntos elimina eso del ejemplo

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid d-flex">
          <a class="navbar-brand me-auto" href="#">Nombre</a>
          <a id="navbar-facebook" href="#"><i class="fa-brands fa-facebook-square fa-lg pe-2"></i></a>
          <a id="navbar-instagram" href="#"><i class="fa-brands fa-instagram fa-lg pe-2"></i></a>
          <a id="navbar-twitter" href="#"><i class="fa-brands fa-twitter fa-lg pe-2"></i></a>
          <a id="navbar-login" href="#"><button type="button" class="btn btn-outline-success btn-sm">Login</button></a>
        </div>
      </nav>

5
  • Muchas gracias!
    – Veadma
    el 12 mar. 2022 a las 9:50
  • @Veadma, si la respuesta te sirvió por favor acéptala, así ayudas a otros usuarios a encontrar la solución a sus preguntas y al mismo tiempo ayudas a la comunidad a mantener abiertas únicamente las preguntas que no han sido resueltas. el 12 mar. 2022 a las 9:51
  • ya la acepté, pero me dice que los votos emitidos por quienes tienen menos de 15 de reputación se registran, pero no cambian la puntuación que se muestra públicamente. Muchas gracias!
    – Veadma
    el 13 mar. 2022 a las 10:50
  • @Veadma, ah, eso es porque en lugar de aceptar la respuesta votaste positivamente, entre las dos flechas (Arriba y abajo) hay un símbolo ✓, ese es el que hay que oprimir, todo el mundo puede aceptar respuestas aún con cuenta nueva el 13 mar. 2022 a las 11:44
  • Listo, muchas gracias!
    – Veadma
    el 13 mar. 2022 a las 23:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.