¿Cómo alinear el logotipo de la barra de navegación con la pantalla izquierda usando Bootstrap?

Es muy fácil en Bootstrap alinear elementos a la izquierda y a la derecha usando las clases de Bootstrap. De forma predeterminada, se establece a la izquierda. Si desea alinear los elementos al centro oa la derecha, lo hará usted mismo. Alinear el logotipo de la barra de navegación a la izquierda de la pantalla con el método Bootstrap es un truco rápido que puede evitar que escribas CSS adicional. En esto, simplemente agregamos otra etiqueta div arriba de la etiqueta div que tiene clase navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Align navbar logo to the 
        left screen using Bootstrap ?
    </title>
  
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            rel="stylesheet" integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
            crossorigin="anonymous">
  
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity=
"sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
            crossorigin="anonymous">
    </script>
      
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <!-- NAVBAR STARTING -->
    <!-- Use navbar class to the navbar logo 
        to the far left of the screen-->
    <nav class=" navbar navbar-expand-lg 
        navbar-light bg-light fixed-top py-lg-0 ">
  
        <a class="navbar-brand" href="#">
  
            <!-- Add logo with size of 90*80 -->
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            width="90" height="80" alt="">
        </a>
          
        <button class="navbar-toggler" type="button"
                data-toggle="collapse" 
                data-target="#navbarResponsive"
                aria-controls="navbarResponsive" 
                aria-expanded="false" 
                aria-label="Toggle navigation">
                  
                <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse"
                id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Courses</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por avengerjanus123 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *