No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Navegaci贸n responsive con Bootstrap

30/45
Recursos

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

Recuerda:

Puedes utilizar los ico-fonts de FontAwesome

Aportes 35

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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

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

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 -->
<header id=鈥渉eader-container鈥>
<!-- container es un div que se adapta a distintos tama帽os de dispositivos, es un basico componente de bootstrap鈥>
<!-- clase container esta clase crea un div centrado alineado con padding a la izquierda y derecha -->
<!-- clase container-fluid esta clase cre un div que ocupa todo el ancho de la pagina -->
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow d-flex justify-content-between align-items-center鈥>
<div class=鈥渃ol-3鈥>
<h1>Platzishop</h1>
</div>
<div class=鈥渃ol-3 text-right鈥>
<button class=鈥渘avbar-toggler hidden-md-up鈥 data-toggle=鈥渃ollapse鈥 data-target="#navMenu">

</button>
<a class=鈥渓ogin hidden-sm-down text-uppercase font-weight-bold鈥 href="#">Login</a>
</div>
</div>
</div>
</header>
<!-- /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 -->

`

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

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>

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.

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

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

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;
}```

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;
}```

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 -->

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.

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!

cada vez se ve mejor el sitio

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

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;
}

como se busca esto en la documentacion de bootstrap ?

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

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

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

CDN Font Awesome:
<script src=鈥https://use.fontawesome.com/81ffaa61f7.js鈥></script>

que tan buena practica es duplicar un elemento, como el del search? me refiero a que de esa forma tendr铆amos mucho c贸digo duplicado en un markup mas complejo y/o extenso

Hola, estoy realizando un menu interactivo, pero quiero ocultar de md-down y de sm-up mostrarlo la unica forma que encontre es esta:

                 <span class="hidden-md-down">Home</span>
                 <span class="hidden-sm-up">Home</span>

Se puede realizar en una sola linea? para no poder dos veces el span?

Compa帽eros les comparto como me quedo el c贸digo con la nueva versi贸n de bootstrap, espero que los pueda ayudar.

<div id="menu-container" >
  <nav class="container navbar navbar-expand-sm navbar-light">         
    <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>
    </ul>
    <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">
            Buscar                
          </button>
        </span>
      </div>
    </form>
  </nav>
</div>

El hidden-xs-down no funciona en la v4.0, les dejo la doc de c贸mo lo hice https://getbootstrap.com/docs/4.0/utilities/display/

Ser铆a as铆:



Screen Size	Class
Hidden on all	.d-none
Hidden only on xs	.d-none .d-sm-block
Hidden only on sm	.d-sm-none .d-md-block
Hidden only on md	.d-md-none .d-lg-block
Hidden only on lg	.d-lg-none .d-xl-block
Hidden only on xl	.d-xl-none
Visible on all	.d-block
Visible only on xs	.d-block .d-sm-none
Visible only on sm	.d-none .d-sm-block .d-md-none
Visible only on md	.d-none .d-md-block .d-lg-none
Visible only on lg	.d-none .d-lg-block .d-xl-none
Visible only on xl	.d-none .d-xl-block

Cuando haces resize para llegar a la medida de xs, si muestras y escondes el menu se bugea cuando vuelves a hacer resize a medidas sm, md, lg y xl, ya que se esconde el fondo del men煤 visible y se sobrepone con los elementos que est谩n debajo 驴Esto tiene alguna soluci贸n o se puede arreglar con alg煤n match media?

hidden cambio ahora se hace asi

mas info http://getbootstrap.com/docs/4.0/utilities/display/

5:30 no he logrando que me muestre la lupa , me muestra solo un cuadrito blanco

Crear Menu de Hamubrguesa Toggeable

Buen d铆a Comunidad. tengo una duda al implementar el men煤 de hamburguesa. cuando le doy, Si hace la animaci贸n de abrir y cerrar el men煤, pero el men煤 no se desaparece, hace la animaci贸n, desaparece por 1 segundo y luego aparece de nuevo. como puedo solucionar esto鈥 les dejo mi c贸digo鈥 Gracias

<!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=Poiret+One" 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" href="fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

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

    <!-- Menu -->
  <div id="menu-container" class="">
    <nav id="navMenu" class="navbar-toggleable nav navbar-light navbar-expand bg-light collapse" data-toggle="collapse">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-10 offset-2 col-md-4 offset-md-0">
            <ul class="nav navbar-nav menuito">
              <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">
                <a href="#" class="nav-link d-block d-sm-none">Login</a>
              </li>
            </ul>
          </div>
          <div class="col-12 col-md-6 offset-md-2 d-none d-sm-block">
            <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-house" type="button">
                    <span class="d-none d-md-inline">Buscar</span>
                    <i class="fa fa-search d-none d-block d-sm-none d-none d-sm-block d-md-none"></i>
                  </button>
                </span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </nav>

    <div id="search-bar" class="container d-block d-sm-none">
      <div class="row">
        <div class="col-12">
          <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-house" type="button">
                  <span class="d-none d-md-inline">Buscar</span>
                  <i class="fa fa-search d-none d-block d-sm-none d-none d-sm-block d-md-none"></i>
                </button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
    <!-- /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>

Estimados, estoy en el min 04:47 donde quiero aplicar la clase .hidden-sm-down en el span para que desaparezca la palabra buscar cuando se reduce el tama帽o, pero no sucede nada de eso, es decir, reduzco el ancho del navegador pero igual sigue saliendo la palabra Buscar + el icono de Lupa.
La version de mi Chrome es: 54.0.2840.99 m (64-bit).
Alguna idea?

Para la versi贸n 4.1.1 se har铆a de la siguiente forma (y de paso) nos evitamos repetir el c贸digo para input-group del buscador.

<!-- Header -->
<header id="header-container">
  <div class="container">
    <div class="row align-items-center d-flex justify-content-between">
      <div class="col-3"><h1>Platzishop</h1></div>
      <div class="col-3 text-right">
        <a class="d-none d-sm-block text-uppercase font-weight-bold login" href="#">Login</a>
      </div>
      <nav class="navbar navbar-expand-sm navbar-light d-sm-none">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </nav>
    </div>
  </div>
</header>
<!-- /Header -->

<!-- Menu -->
<nav id="menu-container" class="navbar navbar-expand-sm navbar-light">
  <div class="container d-inline-block">
    <div class="row">
      <div class="col-10 offset-1 col-md-4 offset-md-0">
        <div class="collapse navbar-collapse justify-content-sm-around justify-content-md-between text-center" id="navMenu">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Cat谩logo</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Carrito</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 offset-md-2">
        <form action="">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="驴Encontr贸 lo que buscaba?">
            <span class="input-group-append">
              <button type="button" class="btn btn-platzi">
                <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>
</nav>
<!-- /Menu -->

El css ser铆a lo siguiente:

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

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

#menu-container {
  background-color: #f7f7f9;
}

.btn.btn-platzi {
  background-color: #99c84a;
  color: white;
}

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

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

#header-container .login {
  color: white;
}

#header-container .navbar-toggler {
  background-color: white;
}

me aparecia un cuadro en lugar de la lupa y no se creo que ya no utiliza esa libreria, lo que hice fue lo siguiente:
1 descargue la libreria de useiconic.com
2 la carpeta descomprimida(open-iconic-master) la pase completa a la carpeta del proyecto
3 puse este link: <link href=鈥渙pen-iconic-master/fonts/css/open-iconic.css"
4 luego en el span puse esto: <span class=鈥渉idden-sm-down鈥>Buscar</span>
5 luego en i puse esto <i class"oi oi-compass hidden-md-up鈥></i> ( en mi caso us茅 un compas en lugar de una lupa)

y eso lo resolvio

Tres cambios importantes de los ejemplos ya expuestos:

  1. el hidden es remplazado por d-md-block d-none
  2. en el nav se debe especificar a partir de que tama帽o se va a visualizar el menu amplio con la clase navbar-expand-md
  3. Para no duplicar el buscador se debe excluir la columna que contiene el from del <div class=鈥渘avbar-collapse collapse鈥
<!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">

    <!-- 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 align-items-center justify-content-between">
                <div class="col-3 columna">
                    <h1>Platzishop</h1>
                </div>
                <div class="col-3 columna text-right">
                    <button class="navbar-toggler d-md-none" data-toggle="collapse" data-target="#navMenu">&#9776</button>
                    <a class="login d-md-block d-none text-uppercase font-weight-bold" href="#">Login</a>
                </div>
            </div>
        </div>
    </header>
    <!-- Header -->
    <!-- Menu -->
    <nav id="menu-container" class="navbar navbar-expand-md navbar-light bg-faded">
        <div class="container d-inline-block">   
        <div class="row">
            <div class="navbar-collapse collapse" id="navMenu"">
                 <div class="col-md-6 col-12">
                    <ul class="navbar-nav">
                      <li class="nav-item">
                        <a class="nav-link activo text-center" href="#">Home</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link text-center" href="#">Cat谩logo</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link text-center" href="#">Carrito</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link text-center d-md-none" href="#">Login</a>
                      </li>
                    </ul>
                </div>
            </div>
                  <div class="col-md-6 col-12">
                    <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 id="buscar" class="d-md-block d-none">Buscar</span>
                            <i class="fa fa-search d-block d-md-none"></i>  
                          </button>
                        </span>
                      </div>
                    </form>
                  </div>
                </div>
                </div>
       </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>```


y el css



body {
font-family: 鈥楳ontserrat鈥, sans-serif;
}
#header-container{
background-color: #99c84a;
color: white;
}
#menu-container {
background-color: #f7f7f9;
}

.btn-platzi {
background-color: #99c84a;
color:white;
}

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

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

.nav-link {
color: #D5D5D7;
}

.nav-link:hover {
color: #464a4c;
}

.activo,
.activo:hover{
color: black;
}
#header-container .login,
#header-container .navbar-toggler{
color: white;
} ```

Hola, tengo un problema al implementar el menu (hamburguesa) eh realizado todos los pasos, pero achicar la pantalla para probarlo y darle click no funciona!, no me aparece el menu. Me podrian ayudar al respecto? a continuacion coloco mi codigo 鈥渋ndex鈥, de antemano gracias.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap-flex.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">

</head>

<body>
    <!-- HEADER -->
    <header id="header-container">
        <div class="container">
            <div class="row flex-items-xs-middle flex-items-xs-between">
                <div class="col-xs-3">
                    <h1>PlatziShop</h1>
                </div>
                <div class="col-xs-3 text-xs-right">
                    <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
                        &#9776;
                    </button>
                    <a class="hidden-xs-down text-uppercase font-weight-bold pull-sm-right" href="#">Login</a>
                </div>
            </div>
        </div>
    </header>
    <!-- /HEADER -->


    <!-- MENU -->
    <div class="menu-container">
        <!-- Id para aplicar estilos a nuestra barra de menus -->
        <nav id "navMenu" class="navbar-toggleable-xs navbar navbar-light collapse">
            <!--navMenu (id) utilizado para colpasar el menu, utilizando otras clases antes puestas-->
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-xs-10 offset-xs-2 offset-md-0">
                        <ul class="nav navbar-nav">
                            <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="#">Cat谩logo</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Carrito</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-xs-12 offset-md-2">
                        <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>
                                <!-- hidden-sm-down: class de bootstrap par ocultar en este caso oculta cuando los dispositivos sean small (sm) y extra small (xs) -->
                                <i class="fa fa-search hidden-md-up"></i>
                                <!-- hidden-md-up: class de bootstrap esta ves para mostrar desde las pantallas medianas (md) hasta largas o extra largas (xl) -->
                                </button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </nav>
    </div>


    <!-- /MENU -->

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <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>
</body>

</html>```