Navegación responsive con Bootstrap

Clase 30 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Veamos cómo hacer nuestra barra de navegación responsive,

Recuerda:

Puedes utilizar los ico-fonts de FontAwesome

Darwel Duran

student•

el secreto para ** alpha.6** es quitarle el brack point -xs al navbar-toggleable ya que en esta version este breack point esta implicito no se usa la notacion xs
correcto : navbar-toggleable
incorrecto: navbar-toggleable-xs

Stefanny Torres

student•

Gracias por tu aporte 😃

Enzo Aliatis

student•

Revisando la documentacion ya que no tenía sentido el comentario que deje mas abajo, las clases .hidden , .hidden-sm y etc cambio por .d-none para hidden desde xs y para mostrar en md por ejemplo sería asi d-md-block
.d-none.d-md-block.d-xl-none

Enzo Aliatis

student•

doc

Enzo Aliatis

student•

El primer form quedaría asi

<form class="form-inline my-2 my-lg-0 d-none d-md-block">
            <input class="form-control mr-sm-2" type="text" placeholder="Buscar">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              <span class="d-sm-none d-md-block">Buscar</span>
              <span class="oi oi-magnifying-glass d-md-none"></span>
            </button>
          </form>

Darwel Duran

student•

nota esto es con bootstrap alpha 6
hay cierto desajuste con la manera en que se representa el ejemplo utilizando row y col-* ya que al combinarlo con navbar-toggleable-xs se oculta el menu vertical ademas la disposición del formulario se corre hacia la izquierda y me resulto imposible alinearlo a la derecha lo que hice fue cambiar la disposicion de row y container para enmarcar todo y la clase navbar-toggleable-xs la cambie por navbar-toggleable-sm ya que el menu desaparece aqui dejo el codigo resultado :
`

<header id=“header-container”>   <div class=“container”> <div class=“row d-flex justify-content-between align-items-center”> <div class=“col-3”> <h1>Platzishop</h1> </div> <div class=“col-3 text-right”> <button class=“navbar-toggler hidden-md-up” data-toggle=“collapse” data-target="#navMenu"> ☰ </button> <a class=“login hidden-sm-down text-uppercase font-weight-bold” href="#">Login</a> </div> </div> </div> </header>

<!-- Menu -->
<div id="menu-container">
    <nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
        <div class="navbar-collapse collapse" id="navMenu">
            <div class="container">
                <div class="row">
                    <div class="col-10 offset-1 col-sm-6 offset-sm-2 col-md-4 offset-md-0">
                        <ul class="navbar-nav">
                            <li class="nav-item text-center">
                                <a href="#" class="nav-link active">Home</a>
                            </li>
                            <li class="nav-item text-center">
                                <a href="#" class="nav-link">Catálogo</a>
                            </li>
                            <li class="nav-item text-center">
                                <a href="#" class="nav-link">Carrito</a>
                            </li>
                            <li class="nav-item text-center hidden-sm-up">
                                <a href="#" class="nav-link">Login</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-12 col-md-6 offset-md-2">
                        <form action="" class="form-inline d-inline w-100 hidden-sm-down">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="¿Encontraste lo que buscabas?">
                                <span class="input-group-btn">
                                    <button class="btn btn-platzi" type="button">
                                        <!-- la clase hidden-sm-down lo oculta desde small hasta extra small  -->
                                        <span class="hidden-sm-down">Buscar</span>
                                        <!-- la clase hidden-md-up lo oculta desde tamaño mediano hasta extra largo -->
                                        <i class="fa fa-search hidden-md-up"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div id="search-bar" class="container hidden-md-up">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <form action="">
                    <div class="input-group">
                        <form action="" class="form-inline">
                            <input type="text" class="form-control" placeholder="¿Encontraste lo que buscabas?">
                            <span class="input-group-btn">
                                <button class="btn btn-platzi" type="button">
                                    <!-- la clase hidden-md-up lo oculta desde tamaño mediano hasta extra largo -->
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </form>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- /Menu -->

fernando josé pineda trujillo

student•

Gracias me ayudaste a solucionar unos problemas

Juan David lemus Rubiano

student•

le undo, en el menu y ahi mismo se me esconde el menu

Platzi Nauta

student•

A mi me pasa lo mismo

Gabriel Sánchez Villacorta

student•

Ya somos 3

Geraldyn Daniela Chirinos De Sousa

student•

Esta es una forma de que funcione en alpha.6 y usando solo un formulario en vez de dos como hace el profe aqui: (en mi caso lo hice para que apareciera el burguer buton a partir de dispositivos pequeños [sm])

   <header id="header-container">
      <div class="container">
         <div class="row justify-content-between no-gutters">
            <div class="col-5">
               <h1>PlatziShop</h1>
            </div>
            <div class="col-3 text-right align-self-center">
               <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#collapse-container" aria-controls="collapse-container" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="fa-bars"></span>
               </button>
               <a class="hidden-sm-down" href="#">Login</a>
            </div>
         </div>
      </div>
   </header>
<nav id="menu-container">
      <div class="container">
         <div class="navbar navbar-toggleable-sm">
            <div class="collapse navbar-collapse" id="collapse-container">
               <div class="row justify-content-between no-gutters">
                  <div class="col-md-4">
                     <ul class="navbar-nav text-center" id="ulmenu">
                        <li class="nav-item active">
                           <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Catálogo</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Carrito</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link hidden-md-up" href="#">Login</a>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="col-12 col-md-5">             
               <form class="input-group">
                  <input type="search" class="form-control" placeholder="Ingrese su búsqueda..." />
                  <div class="input-group-btn">
                     <button class="btn" type="submit">
                        <span class="hidden-sm-down">Buscar</span>
                        <span class="fa-search hidden-md-up"></span>
                     </button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </nav>

Stefanny Torres

student•

Gracias por compartirnos tu código 😃

Dayan Betancourt

student•

Hola aquí en el minuto 4:22 y en el minuto 10:25 ocurre lo mismo, el video del profesor queda encima del resultado del ejercicio.

Aldo J. Ortega Flores

student•

Justo me sucedió lo mismo

Luis Felipe Silgado Cortázar

student•

actualicen los vídeos para que correspondan con el material del curso plz.

Diego Forero

Team Platzi•

No entiendo a que te refieres, el video muestra como se implementa el menu de navegación usando las clases para hacerlo responsive.

Luis Felipe Silgado Cortázar

student•

Clases y estructura de código del vídeo parece ser versión vieja(no funciona como se espera), los archivos de este vídeo(material de apoyo) por otro lado parecen estar actualizados o al menos funcionan de manera correcta.

Y si, son diferentes en varios aspectos.

Enzo Aliatis

student•

Bootstrap quitó las clases .hidden .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down Y ahora se Usa directamente los media
asi que atentos con eso

Enzo Aliatis

student•

JS del Form con otro Icono (no importa)

<form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Buscar">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              <span class="mybutton">Buscar</span>
              <span class="oi oi-magnifying-glass myIcon"></span>
            </button>
          </form>

Enzo Aliatis

student•

Css

.myIcon {
  display: none;
}

@media (max-width: 768px) {
  .mybutton {
    display: none;
  }
  .myIcon {
    display: block;
  }
}

Marco Elizalde

student•

Les comparto como quedo mi código después de la clase

<!-- Header -->
    <header id="header-container">
      <div class="container">
        <div class="row align-items-center justify-content-between">
          <div class="col">
            <h1>Platzishop</h1>
          </div>
          <div class="col text-right">
            <button class="navbar-toggler d-sm-none" data-toggle="collapse" data-target="#navMenu">
              &#9776;
            </button>
            <a id="login" class="d-sm-inline text-uppercase font-weight-bold" href="#">Login</a>
          </div>
        </div>
      </div>
    </header>
    <!-- /Header  -->

    <!-- Menu -->
    <div id="menu-container" >
      <nav class="container navbar navbar-expand-sm navbar-light">
          <div id="navMenu" class="collapse navbar-collapse">
              <ul class="navbar-nav  mr-auto">
              <li class="nav-item active text-sm-center">
                <a href="" class="nav-link">Home</a>
              </li>
              <li class="nav-item  text-sm-center">
                <a href="" class="nav-link">Cátalogo</a>
              </li>
              <li class="nav-item  text-sm-center">
                <a href="" class="nav-link">Carrito</a>
              </li>
              <li class="nav-item d-sm-none  text-sm-center">
                <a href="" class="nav-link">Login</a>
              </li>
            </ul>
              <div id="barraBuscador" class="d-sm-inline">
              <form>
                  <div class="input-group">
                <input type="text" class="form-control" placeholder="Encontro lo que buscaba?">
                <span class="input-group-btn">
                  <button class="btn btn-platzi" type="button">
                    <span id="buscar" class="d-md-inline">Buscar</span>
                    <i class="fa fa-search d-md-none">  </i>
                  </button>
                </span>
              </div>
              </form>
            </div>
          </div>
      </nav>
      <div id="search-bar" class="container d-sm-none">
        <div class="row">
          <div class="col">
            <form>
                <div class="input-group">
              <input type="text" class="form-control" placeholder="Encontro lo que buscaba?">
              <span class="input-group-btn">
                <button class="btn btn-platzi" type="button">
                  <span id="buscar" class="d-md-inline">Buscar</span>
                  <i class="fa fa-search d-md-none">  </i>
                </button>
              </span>
            </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- /Menu -->

Tuve que agregar unas cuantas cosas en CSS

#buscar{
  display: none;
}

#login{
  color: white;
  display: none;
}


#barraBuscador{
  display: none;
}

#search-bar{
  padding-bottom: 1em;
}```

Juan Pablo Madril

student•

Yo lo hice de esta manera, sacado de la documentación de Bootstrap v 4.0. se que hay un par de cosas que están de mas, después lo reviso bien, pero de esta manera funciona muy bien. Hay algunos Id y algunas class traidas de los pelos, falta de imaginacion a las dos de la mañana

<header id="header-container">
      <div class="container">
        <div class="barra-cabecera row justify-content-between">
          <div class="col-3">
            <h1>PlatziShop</h1>
          </div>
          <nav class="mr-none navbar navbar-expand-md navbar-light ">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class=" mr-auto login d-none d-sm-none d-md-block text-uppercase font-weight-bold" href="#">Login</a>
          </nav>
        </div>
      </div>
    </header>
    <div class="container">
      <nav class="navbar navbar-expand-md navbar-light">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <div class="padding col-4 text-center center">
            <ul class="navbar-nav justify-content-between ">
              <li class="nav-item active">
                <a class="nav-link" id="home" href="#">Home </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Catálogo</a>
              </li>
              <li class="nav-item">
                <a class="nav-link " href="#">Carrito</a>
              </li>
              <li class="nav-item">
                <a class="nav-link d-block d-md-none text-uppercase font-weight-bold" href="#">Login</a>
              </li>
            </ul>
          </div>
          <div class="padding col-12 col-md-6 offset-md-2 d-none d-md-block" >
            <form class="buscador" >
              <div class="input-group">
                <input type="text" class="form-control" placeholder="busca aquí"><span class="input-group-btn"><button type="button" class="btn btn-platzi" name="button"><span class="d-none d-md-block">Buscar</span><i class="fa fa-search d-md-none"></i></button></span>
              </div>
            </form>
          </div>
        </div>
      </nav>
      <div class="container d-block d-md-none" id="search-bar">
        <div class="row">
          <div class="col">
            <form class="buscador" >
              <div class="input-group">
                <input type="text" class="form-control" placeholder="busca aquí"><span class="input-group-btn"><button type="button" class="btn btn-platzi" name="button"><span class="d-none d-md-block">Buscar</span><i class="fa fa-search d-md-none"></i></button></span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>```

y el css para esto

body{
  font-family: 'Montserrat', sans-serif;

}
#header-container{
  background-color: #99c84a;
  color: white;
}
#header-container .login{
  color: white;
  text-decoration: none;
}
#menu-container{
  background-color: #f7f7f9;
}
.btn-platzi{
  background-color: #99c84a;
  color: white;
  border-color: #99c84a;
  border-radius: .15rem .25rem .25rem .15rem;

}
.btn-platzi:hover{
  background-color: #8ab542;
}
.buscador{
  margin: 0 !important;
  border-radius: .25rem .15rem .15rem .25rem;
}
.buscador:focus{
  border-color: #99c84a;
}
.navbar{
  padding-left: 0;
  padding-right: 0;
}
.barra-cabecera{
  margin-right: 0;
}
.padding{
  padding: 0;
}
#home{
  padding-left: 0;
}
.center{
  max-width: none;
}```

Javier Eduardo Perez Carreño

student•

Mi solucion para la versión v4.0.0-alpha.6

<!-- Header -->
    <header id="header-container">
    <div class="container">
    	<div class="row justify-content-between align-items-center">
    		<div class="col-6">
    			<h1 class="pull-left">PlatziShop</h1>
    		</div>
    		<div class="col-3 text-sm-right">
            <button class="navbar-toggler pull-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navMenu" aria-controls="navMenu" aria-expanded="false" arial-label="Toggle navigation"><strong>
                &#9776;</strong>
            </button>
    			<a class="login hidden-md-down text-uppercase font-weight-bold pull-sm-right" href="#">Login</a>
    		</div>
    	</div>
    </div>
    </header>

    <!-- /Header -->

    <!-- Menu -->
    <div id="menu-container">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
          <div class="container">
            
              <div class="col-10 offset-1 col-md-4 offset-lg-0 col-sm-6 offset-sm-4 izquierda hidden-down">
              <div class="collapse navbar-collapse" id="navMenu"">
                <ul class="navbar-nav">
                  <li class="nav-item text-center active"> 
                    <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item text-center">
                    <a class="nav-link" href="#">Catálogo</a>
                  </li>
                  <li class="nav-item text-center">
                    <a class="nav-link" href="#">Carrito</a>
                  </li>
                   <li class="nav-item hidden-lg-up text-center">
                  <a class="nav-link" href="#">Login</a>
                </li>
                </ul>
                </div>
              </div>
              <div class="col-md-6 col-12 offset-md-2 hidden-down derecha">
                <form>
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="¿Encontró lo que buscaba?">
                    <span class="input-group-btn">
                      <button class="btn btn-platzi" type="button">
                          <span class="hidden-sm-down">Buscar</span>
                          <i class="fa fa-search hidden-md-up"></i>
                      </button>
                    </span>
                  </div>
                </form>
              </div>
          </div>
        </nav>
    </div>
    
	
    <!-- /Menu -->

Usuario anónimo

user•

Cuando hace click en el menú de hamburguesa se mostraba el navbar pero inmediatamente desaparecía. Lo solucioné con esto:

#navMenu.collapse.show {
  display: block;
}

Y ahora ya se queda.

Manuel Ferriz

student•

excelente aporte men

felicidades 😄

Cesar David Ramírez Dimaté

student•

Revisa bien la documentación de cómo debes implementar los nav con toggler

Platzi Team

student•

Desde la publicación de la version alpha 3 hasta la versión estable, los cambios son bastante notables. Mi solución no integró tantos contenedores, pero a cambio tuve que jugar mucho con los márgenes y los rellenos. Por otro lado también aprendí a implementar collapse sin repetir el código. Con la documentación a la mano todo se logra pero Platzi tiene los mejores maestros. Gracias!

Alexander Valencia

student•

cada vez se ve mejor el sitio

Bruno Diharce

student•

Ya esta el nuevo curso de Bootstrap, en el mismo se ve la version 4.1 donde ya el icono hamburgesa ya esta incluido

Hector Vasquez

student•

Acá dejo mi versión, sin código de buscador duplicado:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    
    <!-- Header -->
    <header id="header-container">
      <div class="container">
  
        <div class="row d-flex align-items-center justify-content-between">
          <div class="col-3">
            <h1>Platzishop</h1>
          </div>
          <div class="col-3 text-right text-md-center text-lg-left">
            <button class="navbar-toggler d-sm-none" data-toggle="collapse" data-target="#navbarSupportedContent">
              &#9776;
            </button>
            <a href="#" class="login d-none d-sm-inline text-uppercase font-weight-bold">Login</a>
          </div>
        </div>

      </div>
    </header>
    <!-- /Header -->

    <!-- Menu -->
    <nav id="menu-container" class="navbar navbar-expand-sm navbar-light d-block d-sm-flex">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto justify-content-center justify-content-lg-start text-center">
          <li class="nav-item active"><a class="nav-link" href="#">Menu</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Catálogo</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Carrito</a></li>
          <li class="nav-item"><a class="nav-link d-sm-none" href="#">Login</a></li>
        </ul>
      </div>
      <form class="form-inline my-2 d-block d-md-flex text-center">
          <div class="item-group">
            <input type="text" class="form-control d-inline-block align-top" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
            <span class="item-group-btn align-top">
              <button class="btn btn-platzi" type="button"><span class="d-none d-md-inline-block">Buscar</span><i class="fa fa-search d-md-none"></i></button>
            </span>
          </div>
          <!--<input class="form-control mr-sm-2" type="search" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0 btn-platzi" type="submit">Buscar</button>-->
        </form>
        <!--<ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item">
                <a class="nav-link" href="#" title="I collapse on `sm` screens">About</a>
            </li>
        </ul>-->
    </nav>
    <!-- /Menu -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

CSS:

body{
	font-family: 'Montserrat', sans-serif;
}

#header-container{
	background-color: #99c84a;
	color: #fff;
}

#menu-container{
	background-color: #f7f7f9;
}
#menu-container .form-control{
	width: auto!important;
}
#header-container .login,
#header-container .navbar-toggler{
	color: #fff;
}

.btn.btn-platzi{
	background-color: #99c84a;
	color: #fff;
}
.btn.btn-platzi:hover{
	background-color: #8ab542;
}

input.form-control:focus{
	border-color: #99c84a;
}

Juan David lemus Rubiano

student•

como se busca esto en la documentacion de bootstrap ?

Stefanny Torres

student•

Esto puede servirte

Jose Andres Gonzalez Guevara

student•

Buena clase, claro que el código subido no corresponde al del video.

Juan David lemus Rubiano

student•

si, muy diferente el codigo

Jorge Díaz Hernández

student•

Me pasaba lo mismo, hice un par de modificaciones.
Intenta verificar si tus scripts son como estos:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>```

Junior Yc

student•

@slifszyc estoy siguiéndote en los videos pero no me muestra en menu en dispositivos xs, te dejo el link lo subi a github

Junior Yc

student•

link

Cesar David Ramírez Dimaté

student•

Yo veo el menú bien.

Choi Javier

student•

Pregunta, es recomendable tener contenido duplicado? como en el caso del buscador? Saludos!

Diego Forero

Team Platzi•

Para SEO (Search Engine Optimization) no es una buena practica tener contenido duplicado.

Choi Javier

student•

Si, pensaba lo mismo. Gracias!

<form class="form-inline my-2 my-lg-0 d-none d-md-block">
            <input class="form-control mr-sm-2" type="text" placeholder="Buscar">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              <span class="d-sm-none d-md-block">Buscar</span>
              <span class="oi oi-magnifying-glass d-md-none"></span>
            </button>
          </form>

<!-- Menu -->
<div id="menu-container">
    <nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
        <div class="navbar-collapse collapse" id="navMenu">
            <div class="container">
                <div class="row">
                    <div class="col-10 offset-1 col-sm-6 offset-sm-2 col-md-4 offset-md-0">
                        <ul class="navbar-nav">
                            <li class="nav-item text-center">
                                <a href="#" class="nav-link active">Home</a>
                            </li>
                            <li class="nav-item text-center">
                                <a href="#" class="nav-link">Catálogo</a>
                            </li>
                            <li class="nav-item text-center">
                                <a href="#" class="nav-link">Carrito</a>
                            </li>
                            <li class="nav-item text-center hidden-sm-up">
                                <a href="#" class="nav-link">Login</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-12 col-md-6 offset-md-2">
                        <form action="" class="form-inline d-inline w-100 hidden-sm-down">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="¿Encontraste lo que buscabas?">
                                <span class="input-group-btn">
                                    <button class="btn btn-platzi" type="button">
                                        <!-- la clase hidden-sm-down lo oculta desde small hasta extra small  -->
                                        <span class="hidden-sm-down">Buscar</span>
                                        <!-- la clase hidden-md-up lo oculta desde tamaño mediano hasta extra largo -->
                                        <i class="fa fa-search hidden-md-up"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div id="search-bar" class="container hidden-md-up">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <form action="">
                    <div class="input-group">
                        <form action="" class="form-inline">
                            <input type="text" class="form-control" placeholder="¿Encontraste lo que buscabas?">
                            <span class="input-group-btn">
                                <button class="btn btn-platzi" type="button">
                                    <!-- la clase hidden-md-up lo oculta desde tamaño mediano hasta extra largo -->
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </form>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- /Menu -->

   <header id="header-container">
      <div class="container">
         <div class="row justify-content-between no-gutters">
            <div class="col-5">
               <h1>PlatziShop</h1>
            </div>
            <div class="col-3 text-right align-self-center">
               <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#collapse-container" aria-controls="collapse-container" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="fa-bars"></span>
               </button>
               <a class="hidden-sm-down" href="#">Login</a>
            </div>
         </div>
      </div>
   </header>
<nav id="menu-container">
      <div class="container">
         <div class="navbar navbar-toggleable-sm">
            <div class="collapse navbar-collapse" id="collapse-container">
               <div class="row justify-content-between no-gutters">
                  <div class="col-md-4">
                     <ul class="navbar-nav text-center" id="ulmenu">
                        <li class="nav-item active">
                           <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Catálogo</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Carrito</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link hidden-md-up" href="#">Login</a>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="col-12 col-md-5">             
               <form class="input-group">
                  <input type="search" class="form-control" placeholder="Ingrese su búsqueda..." />
                  <div class="input-group-btn">
                     <button class="btn" type="submit">
                        <span class="hidden-sm-down">Buscar</span>
                        <span class="fa-search hidden-md-up"></span>
                     </button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </nav>

<form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Buscar">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              <span class="mybutton">Buscar</span>
              <span class="oi oi-magnifying-glass myIcon"></span>
            </button>
          </form>

<!-- Header -->
    <header id="header-container">
      <div class="container">
        <div class="row align-items-center justify-content-between">
          <div class="col">
            <h1>Platzishop</h1>
          </div>
          <div class="col text-right">
            <button class="navbar-toggler d-sm-none" data-toggle="collapse" data-target="#navMenu">
              &#9776;
            </button>
            <a id="login" class="d-sm-inline text-uppercase font-weight-bold" href="#">Login</a>
          </div>
        </div>
      </div>
    </header>
    <!-- /Header  -->

    <!-- Menu -->
    <div id="menu-container" >
      <nav class="container navbar navbar-expand-sm navbar-light">
          <div id="navMenu" class="collapse navbar-collapse">
              <ul class="navbar-nav  mr-auto">
              <li class="nav-item active text-sm-center">
                <a href="" class="nav-link">Home</a>
              </li>
              <li class="nav-item  text-sm-center">
                <a href="" class="nav-link">Cátalogo</a>
              </li>
              <li class="nav-item  text-sm-center">
                <a href="" class="nav-link">Carrito</a>
              </li>
              <li class="nav-item d-sm-none  text-sm-center">
                <a href="" class="nav-link">Login</a>
              </li>
            </ul>
              <div id="barraBuscador" class="d-sm-inline">
              <form>
                  <div class="input-group">
                <input type="text" class="form-control" placeholder="Encontro lo que buscaba?">
                <span class="input-group-btn">
                  <button class="btn btn-platzi" type="button">
                    <span id="buscar" class="d-md-inline">Buscar</span>
                    <i class="fa fa-search d-md-none">  </i>
                  </button>
                </span>
              </div>
              </form>
            </div>
          </div>
      </nav>
      <div id="search-bar" class="container d-sm-none">
        <div class="row">
          <div class="col">
            <form>
                <div class="input-group">
              <input type="text" class="form-control" placeholder="Encontro lo que buscaba?">
              <span class="input-group-btn">
                <button class="btn btn-platzi" type="button">
                  <span id="buscar" class="d-md-inline">Buscar</span>
                  <i class="fa fa-search d-md-none">  </i>
                </button>
              </span>
            </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- /Menu -->

<header id="header-container">
      <div class="container">
        <div class="barra-cabecera row justify-content-between">
          <div class="col-3">
            <h1>PlatziShop</h1>
          </div>
          <nav class="mr-none navbar navbar-expand-md navbar-light ">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <a class=" mr-auto login d-none d-sm-none d-md-block text-uppercase font-weight-bold" href="#">Login</a>
          </nav>
        </div>
      </div>
    </header>
    <div class="container">
      <nav class="navbar navbar-expand-md navbar-light">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <div class="padding col-4 text-center center">
            <ul class="navbar-nav justify-content-between ">
              <li class="nav-item active">
                <a class="nav-link" id="home" href="#">Home </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Catálogo</a>
              </li>
              <li class="nav-item">
                <a class="nav-link " href="#">Carrito</a>
              </li>
              <li class="nav-item">
                <a class="nav-link d-block d-md-none text-uppercase font-weight-bold" href="#">Login</a>
              </li>
            </ul>
          </div>
          <div class="padding col-12 col-md-6 offset-md-2 d-none d-md-block" >
            <form class="buscador" >
              <div class="input-group">
                <input type="text" class="form-control" placeholder="busca aquí"><span class="input-group-btn"><button type="button" class="btn btn-platzi" name="button"><span class="d-none d-md-block">Buscar</span><i class="fa fa-search d-md-none"></i></button></span>
              </div>
            </form>
          </div>
        </div>
      </nav>
      <div class="container d-block d-md-none" id="search-bar">
        <div class="row">
          <div class="col">
            <form class="buscador" >
              <div class="input-group">
                <input type="text" class="form-control" placeholder="busca aquí"><span class="input-group-btn"><button type="button" class="btn btn-platzi" name="button"><span class="d-none d-md-block">Buscar</span><i class="fa fa-search d-md-none"></i></button></span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>```

body{
  font-family: 'Montserrat', sans-serif;

}
#header-container{
  background-color: #99c84a;
  color: white;
}
#header-container .login{
  color: white;
  text-decoration: none;
}
#menu-container{
  background-color: #f7f7f9;
}
.btn-platzi{
  background-color: #99c84a;
  color: white;
  border-color: #99c84a;
  border-radius: .15rem .25rem .25rem .15rem;

}
.btn-platzi:hover{
  background-color: #8ab542;
}
.buscador{
  margin: 0 !important;
  border-radius: .25rem .15rem .15rem .25rem;
}
.buscador:focus{
  border-color: #99c84a;
}
.navbar{
  padding-left: 0;
  padding-right: 0;
}
.barra-cabecera{
  margin-right: 0;
}
.padding{
  padding: 0;
}
#home{
  padding-left: 0;
}
.center{
  max-width: none;
}```

<!-- Header -->
    <header id="header-container">
    <div class="container">
    	<div class="row justify-content-between align-items-center">
    		<div class="col-6">
    			<h1 class="pull-left">PlatziShop</h1>
    		</div>
    		<div class="col-3 text-sm-right">
            <button class="navbar-toggler pull-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navMenu" aria-controls="navMenu" aria-expanded="false" arial-label="Toggle navigation"><strong>
                &#9776;</strong>
            </button>
    			<a class="login hidden-md-down text-uppercase font-weight-bold pull-sm-right" href="#">Login</a>
    		</div>
    	</div>
    </div>
    </header>

    <!-- /Header -->

    <!-- Menu -->
    <div id="menu-container">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
          <div class="container">
            
              <div class="col-10 offset-1 col-md-4 offset-lg-0 col-sm-6 offset-sm-4 izquierda hidden-down">
              <div class="collapse navbar-collapse" id="navMenu"">
                <ul class="navbar-nav">
                  <li class="nav-item text-center active"> 
                    <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item text-center">
                    <a class="nav-link" href="#">Catálogo</a>
                  </li>
                  <li class="nav-item text-center">
                    <a class="nav-link" href="#">Carrito</a>
                  </li>
                   <li class="nav-item hidden-lg-up text-center">
                  <a class="nav-link" href="#">Login</a>
                </li>
                </ul>
                </div>
              </div>
              <div class="col-md-6 col-12 offset-md-2 hidden-down derecha">
                <form>
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="¿Encontró lo que buscaba?">
                    <span class="input-group-btn">
                      <button class="btn btn-platzi" type="button">
                          <span class="hidden-sm-down">Buscar</span>
                          <i class="fa fa-search hidden-md-up"></i>
                      </button>
                    </span>
                  </div>
                </form>
              </div>
          </div>
        </nav>
    </div>
    
	
    <!-- /Menu -->

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    
    <!-- Header -->
    <header id="header-container">
      <div class="container">
  
        <div class="row d-flex align-items-center justify-content-between">
          <div class="col-3">
            <h1>Platzishop</h1>
          </div>
          <div class="col-3 text-right text-md-center text-lg-left">
            <button class="navbar-toggler d-sm-none" data-toggle="collapse" data-target="#navbarSupportedContent">
              &#9776;
            </button>
            <a href="#" class="login d-none d-sm-inline text-uppercase font-weight-bold">Login</a>
          </div>
        </div>

      </div>
    </header>
    <!-- /Header -->

    <!-- Menu -->
    <nav id="menu-container" class="navbar navbar-expand-sm navbar-light d-block d-sm-flex">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto justify-content-center justify-content-lg-start text-center">
          <li class="nav-item active"><a class="nav-link" href="#">Menu</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Catálogo</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Carrito</a></li>
          <li class="nav-item"><a class="nav-link d-sm-none" href="#">Login</a></li>
        </ul>
      </div>
      <form class="form-inline my-2 d-block d-md-flex text-center">
          <div class="item-group">
            <input type="text" class="form-control d-inline-block align-top" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
            <span class="item-group-btn align-top">
              <button class="btn btn-platzi" type="button"><span class="d-none d-md-inline-block">Buscar</span><i class="fa fa-search d-md-none"></i></button>
            </span>
          </div>
          <!--<input class="form-control mr-sm-2" type="search" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0 btn-platzi" type="submit">Buscar</button>-->
        </form>
        <!--<ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item">
                <a class="nav-link" href="#" title="I collapse on `sm` screens">About</a>
            </li>
        </ul>-->
    </nav>
    <!-- /Menu -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

body{
	font-family: 'Montserrat', sans-serif;
}

#header-container{
	background-color: #99c84a;
	color: #fff;
}

#menu-container{
	background-color: #f7f7f9;
}
#menu-container .form-control{
	width: auto!important;
}
#header-container .login,
#header-container .navbar-toggler{
	color: #fff;
}

.btn.btn-platzi{
	background-color: #99c84a;
	color: #fff;
}
.btn.btn-platzi:hover{
	background-color: #8ab542;
}

input.form-control:focus{
	border-color: #99c84a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>```

Navegación responsive con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman