Curso completo de Bootstrap 14.- Grupos de Input / Input Groups

✔️ NUEVO Curso de Bootstrap 4:
https://www.youtube.com/watch?v=xzZBp0hPX0Y

gracias

no me deja realizar ninguna function que no sea de bootstrap

no coje el jquery falcon
ayudame con eso

Se puede ajustar el tipo de tamaño para los inputs Groups?

Que paso con Heroesdelaweb?

Te faltó uno, el Input fyle ¿Sabes como se hace, me refiero a que tenga un estilo diferente al clásico?

ayudaa como cambiar el tamaño del input text, por que quiero que sea mas pequeño y cuando modifico las columnas se me alarga demasiado y aparece de toda la pagina, ayudaaa por favor???

Hola amigos, como puedo hacer para que en el checkbox al dar click sobre el input text tambien me genere el check. No lo he conseguido.

¿Qué tal FalconMasters? Una acotación, no sé si en Sublime Text funciona pero supongo que sí. Yo uso Brackets ya que me gusta ver los cambios en tiempo real, Brackets también cuenta con Emmet y para escribir contenido dentro de la etiqueta <a> no es necesario copiar a[href="#"], simplemente con escribir a[#] hace exactamente lo mismo. Muchas gracias por el curso de verdad es muy bueno. Saludos.

Muy buenos tus videos, solo que explicas muy rapido. Una consulta:como hago para poner un dropdown a la derecha de un texto y que despliegue de derecha a izquierda, (para que no se vaya afuera lo que despliega).

No me sale el ultimo el anteultimo.

<!– dropdown button –>
<div class="form-group">
<div class="input-group">

<span class="input-group-btn">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Boton <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #2</a></li>
<li><a href="#">Item #3</a></li>
<li><a href="#">Item #4</a></li>
</ul>
</span>
<input type="text" class="form-control">
</div>
</div>

Aquí les dejo mi aporte para un código en javascript que valida al darle click al checkbox este active el input text, me tomo medio día en hacerlo jaja

<h2> 14.- Grupos de Input checkbox en javascript y responsive con explicacion </h2>
<div class="container-fluid"> <!– contenedor que abarque todo el documento –>
<br>

<div class="row"> <!– FILA –>
<div class="col-md-12"> <!– si pones 3 es mas pequeño etc..–>

<script>

function habilitainputtext(campotext)
{
var CheckboxClickAndInputText = document.getElementById(campotext); //La variable CheckboxClickAndInputText contiene los elementos onClick="habilitainputtext y id="InputText" que serian = a campotext

if (CheckboxClickAndInputText.disabled) //Si cuando le das click al checkbox este desactiva el InputText
{
CheckboxClickAndInputText.disabled=false; //Entonces quiero que eso sea falso
}
else
{
CheckboxClickAndInputText.disabled=true; // De otro modo quiero que eso sea verdadero
}
}
</script>

<div class="form-group">
<div class="input-group">

<span class="input-group-addon">
<input type="checkbox" onClick="habilitainputtext('InputText')">
</span>

<input type="text" id="InputText" class="form-control"disabled=true/>

</div>
</div>

</div>
</div>

</div>

no se puede añadir un Glyphicons ahi? la verdad no me sale :c

Hola Falcon Master:
En este capítulo, en el último ejemplo, donde partimos el botón en dos, la parte de la flecha del drop, me queda de un tamaño mucho mas chico que el botón a que está agrupada.
¿te podés fijar x favor?
Como esto ya me pasó en el video de los botones, supongo que sería un error de los archivos css… que bajé del sitio Bootstrap. ¿será?

<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary">Botón</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">222</a></li>
<li><a href="#">222</a></li>
<li><a href="#">222</a></li>
<li><a href="#">222</a></li>
</ul>
</span>
<input type="text" class="form-control" />
</div>
</div>

de donde sacas los scripts?

¿cómo hacer para reducir un input y centrarlo?

Gracias por tus cursos, carlos arturo, es una buena labor la que haces al enseñar conocimientos de diseño web frontend, y compartirnos todo lo que sabes, gracias a tus tutoriales aprendo un poco mas cada dia, muchas gracias.
Referente a este tutorial también, se puede agregar Glyphicons a los input .

<div class="form-group">
<div class="input-group">
<span class=" input-group-btn">
<button class="btn btn-primary "><span class="glyphicon glyphicon-envelope"></span></button>
</span>
<input type="text" class="form-control">

</div>

</div>

Al hacer el ddown al lado del input, no me sale, uso NetBeans y me da error de que el ul no puede estar dentro del span con la clase de input-group-btn

Que excelente trabajo FALCON MASTER … Ya inicie con bootstrap

Como siempre una excelente clase, gracias por tu dedicacion, te comento que por alguna razon, la cual aun no descubro/resuelvo, los menus desplegables no me salen, he visto 2 veces el video y comparandolo con tu clase, son iguales, revise la documentacion de Bootstrap y el mismo error, este es el codigo de Bootstrap
¿alguna idea o algo que no tenga que ver con el codigo y sea por otro lado?
Saludos

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!– /btn-group –>
      <input type="text" class="form-control" aria-label="…">
    </div><!– /input-group –>
  </div><!– /.col-lg-6 –>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="…">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!– /btn-group –>
    </div><!– /input-group –>
  </div><!– /.col-lg-6 –>
</div><!– /.row –>

amigo te falto SEPARAR LOS INPUTs de la Fila 4.. lo estoy intentando pero no me sale, no se q error estare comentiendo.EXCELENTE TODOS LOS VIDEOS..1!!

Gracias por compartir.

Gracias so much por los tutorials que estan muy buenos en verdad. Me podrias dar el alcance si Bootstrap entra en conflicto con light windows or modal windows? Gracias

@FalconMasters  puede mandarme un msj privado

es algo muy importante que necesito hablar con tigo 

Que tal Arturo, No estaria mal un curso de PHP para validar muchos elementos de los sitios web. Saludos!

falconmaster porfa crea un curso te como hacer un blog porfa yo miro todos tu videos grasia y saludo