Desbloquea esta y miles de clases más
Premium de Código Facilito

Módulo 1 | 10 clases

Introducción

Módulo 2 | 14 clases

Formularios

Módulo 3 | 6 clases

Templates

Clase 1

Herencia de templates

Clase 2

Includes

Clase 3

Navbar

Clase 4

Font Awesome

Clase 5

Links

Clase 6

Usuarios autenticados

Módulo 4 | 19 clases

Productos

Módulo 5 | 3 clases

Usuarios

Módulo 6 | 20 clases

Carrito de compras

Módulo 7 | 10 clases

Orden de compra

Módulo 8 | 11 clases

Dirección de envío

Módulo 9 | 5 clases

Orden y dirección de envío

Módulo 10 | 11 clases

Pedidos

Módulo 11 | 8 clases

Código de promoción

Módulo 12 | 9 clases

Métodos de pago

Módulo 13 | 3 clases

Cobro

Módulo 14 | 3 clases

Extras

11 comentario(s)

@ferlozano10

06 Septiembre 23

Para alinear los links en Bootstrap 5 a la derecha, reemplazar “nav navbar-nav ml-auto” por “nav navbar-nav ms-auto”.

Ver respuestas (1)

@mauricioespana3

18 Noviembre 22

Noviembre 2022, no funciona el css, tengo problemas con la clase “ml-auto” y con el “form-group”

rusbel bermudez

03 Abril 22

Abril 2022

<!DOCTYPE html>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Facilito Store</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" name="button" data-bs-toggle="collapse" data-bs-target="#navb">
        <span class="navbar-toggler-icon"></span>
        </button>
    </div>

&lt;div <em>id</em>="navb" <em>class</em>="collapse navbar-collapse"&gt;
    &lt;ul <em>class</em>="nav navbar-nav ml-auto"&gt;
        &lt;li <em>class</em>="navbar-item"&gt;
            &lt;a <em>href</em>="#" <em>class</em>="nav-link"&gt;Login&lt;/a&gt;
        &lt;/li&gt;
        &lt;li <em>class</em>="navbar-item"&gt;
            &lt;a <em>href</em>="#" <em>class</em>="nav-link"&gt;Registro&lt;/a&gt;
        &lt;/li&gt;
        &lt;li <em>class</em>="navbar-item"&gt;
            &lt;a <em>href</em>="#" <em>class</em>="nav-link"&gt;Logout&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


</nav>

@tutubertortugas

07 Febrero 22

Ahora es 2021 febrero 7 saben cual es el codigo que funciona?

David Alejandro Gómez Rueda

30 Junio 21

Línea de código CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

Líneas de código SCRIPTS:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Código de la barra de navegación:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Ingresar<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Registro</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Cerrar Sesión</a>
      </li>
    </ul>
  </div>
</nav>

Ver respuestas (1)

Carolina Bernachea

05 Junio 21

Funcionando en Junio 2021:

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a href="#" class="navbar-brand">AdoptaPet</a>

</button>

</div>

<a href="#" class="nav-link">Login</a>

</li>

<a href="#" class="nav-link">Registro</a>

</li>

<a href="#" class="nav-link">Logout</a>

</li>

</ul>

</div>

</nav>

Ver respuestas (2)

Gastón Angúlo Alcácer

07 Abril 21

Con el siguiente codigo, logre hacer funcionar el boton (7/4/21) pero no logre que se colocara a la derecha...

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Pehua Store</a>
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav ml-auto">
            <li class="navbar-item">
                <a href="#" class="nav-link">Login</a>
            </li>
            <li class="navbar-item">
                <a href="#" class="nav-link">Sing in</a>
            </li>
            <li class="navbar-item">
                <a href="#" class="nav-link">Logout</a>
            </li>
        </ul>
    </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

Abdiel Alfaro Manuel

08 Febrero 21

Para que no les genere ningún inconveniente durante el curso, seleccionen la versión inferior a 5.0.x de bootstrap. Yo use la v4.6.x

Ver respuestas (1)

Armando Pérez

04 Enero 21

Código que funciona en enero 2021

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Facilito Store</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Registro</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Alberto Cordero

29 Diciembre 20

Hola aqui molestando en esta parte no me sirve el boton del menu no me lo despliega me puse a investigar y copy de aqui https://getbootstrap.com/docs/5.0/components/navbar/#brand y tampoco me sirve les dejo el codigo que tengo espero que me puedan ayudar

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a href="#" class="navbar-brand">Django Store</a>

<button type="button" name="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navb">

<span class="navbar-toggler-icon"></span>

</button>

<div id="navb" class="navbar-collapse collapse hide">

<ul class="nav navbar-nav ml-auto">
<li class="navbar-item">
<a href="#" class="nav-link">Login</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">Registro</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">Logout</a>
</li>

</ul>
</div>
</nav>

Ver respuestas (2)

Cargar más comentarios

Clase 25

Navbar

25/132

Curso de aplicaciones web con Django