Forms

Ejemplos y pautas de uso para estilos de control de formularios, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.

Visión general

Los controles de formulario de Bootstrap se expanden en nuestros estilos de formulario reiniciados con clases. Utilice estas clases para optar por sus pantallas personalizadas para una representación más consistente en todos los navegadores y dispositivos.

Asegúrese de utilizar un type atributo apropiado en todas las entradas (por ejemplo, email para la dirección de correo electrónico o number para información numérica) para aprovechar los controles de entrada más nuevos, como la verificación de correo electrónico, la selección de números y más.

Aquí hay un ejemplo rápido para demostrar los estilos de formulario de Bootstrap. Siga leyendo para obtener documentación sobre las clases requeridas, el diseño de formularios y más.

We'll never share your email with anyone else. 

  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Controles de formulario

Los controles de forma textual, como <input> s, <select> s y <textarea> s, se diseñan con la .form-control clase. Se incluyen estilos para apariencia general, estado de enfoque, tamaño y más.

Asegúrese de explorar nuestros formularios personalizados para más estilos <select>. 


  <form>
    <div class="form-group">
      <label for="exampleFormControlInput1">Email address</label>
      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
    <div class="form-group">
      <label for="exampleFormControlSelect1">Example select</label>
      <select class="form-control" id="exampleFormControlSelect1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="form-group">
      <label for="exampleFormControlSelect2">Example multiple select</label>
      <select multiple class="form-control" id="exampleFormControlSelect2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Example textarea</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
  </form>

Para las entradas de archivo, cambie .form-control por .form-control-file. 


  <form>
    <div class="form-group">
      <label for="exampleFormControlFile1">Example file input</label>
      <input type="file" class="form-control-file" id="exampleFormControlFile1">
    </div>
  </form>

Dimensionamiento

Establece alturas usando clases como .form-control-lgy .form-control-sm. 


  <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
  <input class="form-control" type="text" placeholder="Default input">
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

  <select class="form-control form-control-lg">
    <option>Large select</option>
  </select>
  <select class="form-control">
    <option>Default select</option>
  </select>
  <select class="form-control form-control-sm">
    <option>Small select</option>
  </select>

Solo lectura

Agregue el readonly atributo booleano en una entrada para evitar la modificación del valor de la entrada. Las entradas de solo lectura aparecen más claras (al igual que las entradas desactivadas), pero retienen el cursor estándar. 


  <input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Texto sin formato de solo lectura

Si desea que los <input readonly> elementos de su formulario tengan un estilo de texto sin formato, use la .form-control-plaintext clase para eliminar el estilo predeterminado del campo del formulario y conservar el margen y el relleno correctos. 


  <form>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword">
      </div>
    </div>
  </form>

  <form class="form-inline">
    <div class="form-group mb-2">
      <label for="staticEmail2" class="sr-only">Email</label>
      <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
    </div>
    <div class="form-group mx-sm-3 mb-2">
      <label for="inputPassword2" class="sr-only">Password</label>
      <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
  </form>

Entradas de rango

Configure entradas de rango desplazables horizontalmente usando .form-control-range. 


  <form>
    <div class="form-group">
      <label for="formControlRange">Example Range input</label>
      <input type="range" class="form-control-range" id="formControlRange">
    </div>
  </form>

Casillas de verificación y radios

Casillas de verificación por defecto y radios están mejorados con la ayuda de .form-check, una sola clase para los dos tipos de entrada que mejora la distribución y el comportamiento de sus elementos HTML . Las casillas de verificación son para seleccionar una o varias opciones en una lista, mientras que las radios son para seleccionar una opción entre muchas.

Se admiten casillas de verificación y radios deshabilitadas. El disabled atributo aplicará un color más claro para ayudar a indicar el estado de la entrada.

Las casillas de verificación y los botones de opción admiten la validación de formularios basada en HTML y proporcionan etiquetas concisas y accesibles. Como tal, nuestros <input> y <label> son elementos hermanos en lugar de un <input> dentro de a <label> . Esto es un poco más detallado, ya que debe especificar id y for atributos para relacionar <input> y <label>.

Predeterminado (apilado)

De forma predeterminada, cualquier número de casillas de verificación y radios que sean hermanos inmediatos se apilarán verticalmente y se espaciarán adecuadamente .form-check. 


  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      Default checkbox
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
    <label class="form-check-label" for="defaultCheck2">
      Disabled checkbox
    </label>
  </div>

  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      Default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
      Second default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
      Disabled radio
    </label>
  </div>

En línea

Agrupe casillas de verificación o radios en la misma fila horizontal agregando .form-check-inline a cualquiera .form-check. 


  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
  </div>

  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
  </div>

Sin etiquetas

Agregue .position-static a las entradas .form-check que no tienen texto de etiqueta. Recuerde seguir proporcionando alguna forma de nombre accesible para las tecnologías de asistencia (por ejemplo, uso aria-label ). 


  <div class="form-check">
    <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </div>
  <div class="form-check">
    <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </div>

Diseño

Desde Bootstrap se aplica display: block y width: 100% que casi todos nuestros controles de formulario, formularios por defecto pila vertical. Se pueden usar clases adicionales para variar este diseño en función de cada formulario.

Formar grupos

La .form-group clase es la forma más fácil de agregar algo de estructura a los formularios. Proporciona una clase flexible que fomenta la agrupación adecuada de etiquetas, controles, texto de ayuda opcional y mensajes de validación de formularios. De forma predeterminada, solo se aplica margin-bottom , pero selecciona estilos adicionales .form-inline según sea necesario. Úselo con <fieldset> s, <div> s o casi cualquier otro elemento. 


  <form>
    <div class="form-group">
      <label for="formGroupExampleInput">Example label</label>
      <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
    </div>
    <div class="form-group">
      <label for="formGroupExampleInput2">Another label</label>
      <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
    </div>
  </form>

Cuadrícula de formulario

Se pueden construir formas más complejas usando nuestras clases de cuadrícula. Úselos para diseños de formularios que requieren varias columnas, anchos variados y opciones de alineación adicionales. 


  <form>
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col">
        <input type="text" class="form-control" placeholder="Last name">
      </div>
    </div>
  </form>

Fila de formulario

También puede cambiar .row por .form-row una variación de nuestra fila de cuadrícula estándar que anula las canaletas de columna predeterminadas para diseños más ajustados y compactos. 


  <form>
    <div class="form-row">
      <div class="col">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col">
        <input type="text" class="form-control" placeholder="Last name">
      </div>
    </div>
  </form>

También se pueden crear diseños más complejos con el sistema de cuadrícula.


  <form>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail4">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
      </div>
      <div class="form-group col-md-6">
        <label for="inputPassword4">Password</label>
        <input type="password" class="form-control" id="inputPassword4">
      </div>
    </div>
    <div class="form-group">
      <label for="inputAddress">Address</label>
      <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="form-group">
      <label for="inputAddress2">Address 2</label>
      <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputCity">City</label>
        <input type="text" class="form-control" id="inputCity">
      </div>
      <div class="form-group col-md-4">
        <label for="inputState">State</label>
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <label for="inputZip">Zip</label>
        <input type="text" class="form-control" id="inputZip">
      </div>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck">
        <label class="form-check-label" for="gridCheck">
          Check me out
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>

Forma horizontal

Cree formas horizontales con la cuadrícula agregando la .row clase para formar grupos y usando las .col-*-* clases para especificar el ancho de sus etiquetas y controles. Asegúrese de agregar también .col-form-labela sus <label> mensajes de correo electrónico para que estén centrados verticalmente con sus controles de formulario asociados.

A veces, es posible que necesite utilizar utilidades de margen o relleno para crear la alineación perfecta que necesita. Por ejemplo, hemos eliminado la padding-top etiqueta de entradas de radio apiladas para alinear mejor la línea de base del texto.

Radios
Checkbox

  <form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3">
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            <label class="form-check-label" for="gridRadios1">
              First radio
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            <label class="form-check-label" for="gridRadios2">
              Second radio
            </label>
          </div>
          <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            <label class="form-check-label" for="gridRadios3">
              Third disabled radio
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">Checkbox</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck1">
          <label class="form-check-label" for="gridCheck1">
            Example checkbox
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>
Tamaño de etiqueta de forma horizontal

Asegúrese de usar .col-form-label-sm o .col-form-label-lg para sus <label>o <legend> para seguir correctamente el tamaño de .form-control-lgy .form-control-sm. 


  <form>
    <div class="form-group row">
      <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
      </div>
    </div>
    <div class="form-group row">
      <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
      </div>
    </div>
    <div class="form-group row">
      <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
      </div>
    </div>
  </form>

Dimensionamiento de columna

Como se muestra en los ejemplos anteriores, nuestro sistema de cuadrícula le permite colocar cualquier número de .col dentro de un .row o .form-row . Dividirán el ancho disponible equitativamente entre ellos. También puede elegir un subconjunto de sus columnas para ocupar más o menos espacio, mientras que los restantes .col dividen por igual el resto, con clases de columna específicas como .col-7. 


  <form>
    <div class="form-row">
      <div class="col-7">
        <input type="text" class="form-control" placeholder="City">
      </div>
      <div class="col">
        <input type="text" class="form-control" placeholder="State">
      </div>
      <div class="col">
        <input type="text" class="form-control" placeholder="Zip">
      </div>
    </div>
  </form>

Tamaño automático

El siguiente ejemplo usa una utilidad flexbox para centrar verticalmente electrónico contenido y cambia .cola .col-auto para que sus columnas solo ocupen el espacio necesario. Dicho de otra manera, el tamaño de la columna se basa en el contenido.

@

  <form>
    <div class="form-row align-items-center">
      <div class="col-auto">
        <label class="sr-only" for="inlineFormInput">Name</label>
        <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
      </div>
      <div class="col-auto">
        <label class="sr-only" for="inlineFormInputGroup">Username</label>
        <div class="input-group mb-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
        </div>
      </div>
      <div class="col-auto">
        <div class="form-check mb-2">
          <input class="form-check-input" type="checkbox" id="autoSizingCheck">
          <label class="form-check-label" for="autoSizingCheck">
            Remember me
          </label>
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary mb-2">Submit</button>
      </div>
    </div>
  </form>

A continuación, puede volver a mezclarlo con clases de columna de tamaño específico.

@

  <form>
    <div class="form-row align-items-center">
      <div class="col-sm-3 my-1">
        <label class="sr-only" for="inlineFormInputName">Name</label>
        <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
      </div>
      <div class="col-sm-3 my-1">
        <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
        </div>
      </div>
      <div class="col-auto my-1">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
          <label class="form-check-label" for="autoSizingCheck2">
            Remember me
          </label>
        </div>
      </div>
      <div class="col-auto my-1">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>

Y, por supuesto , se admiten controles de formulario personalizados. 


  <form>
    <div class="form-row align-items-center">
      <div class="col-auto my-1">
        <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
        <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
          <option selected>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      <div class="col-auto my-1">
        <div class="custom-control custom-checkbox mr-sm-2">
          <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
          <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
        </div>
      </div>
      <div class="col-auto my-1">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>

Formularios en línea

Use la .form-inline clase para mostrar una serie de etiquetas, controles de formulario y botones en una sola fila horizontal. Los controles de formulario dentro de los formularios en línea varían ligeramente de sus estados predeterminados.

  • Los controles display: flex contraen cualquier espacio en blanco HTML y le permiten proporcionar control de alineación con utilidades de espaciadoy caja flexible.
  • Los controles y los grupos de entrada reciben width: auto para anular el valor predeterminado de Bootstrap width: 100%.
  • Los controles solo aparecen en línea en las ventanas que tienen al menos 576 px de ancho para tener en cuenta las ventanas estrechas en los dispositivos móviles.

Es posible que deba abordar manualmente el ancho y la alineación de los controles de formulario individuales con utilidades de espaciado (como se muestra a continuación). Por último, asegúrese de incluir siempre un <label> con cada control de formulario, incluso si necesita ocultarlo a los visitantes que no son lectores de pantalla con .sr-only.

@

  <form class="form-inline">
    <label class="sr-only" for="inlineFormInputName2">Name</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    </div>

    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>

    <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </form>

También se admiten controles y selecciones de formularios personalizados. 


  <form class="form-inline">
    <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
    <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>

    <div class="custom-control custom-checkbox my-1 mr-sm-2">
      <input type="checkbox" class="custom-control-input" id="customControlInline">
      <label class="custom-control-label" for="customControlInline">Remember my preference</label>
    </div>

    <button type="submit" class="btn btn-primary my-1">Submit</button>
  </form>
Alternativas a las etiquetas ocultas

Las tecnologías de asistencia, como los lectores de pantalla, tendrán problemas con sus formularios si no incluye una etiqueta para cada entrada. Para estos formularios en línea, puede ocultar las etiquetas usando la .sr-only clase. Existen otros métodos alternativos para proporcionar una etiqueta para las tecnologías de asistencia, como el atributo aria-label, aria-labelledbyo title. Si ninguno de estos está presente, las tecnologías de asistencia pueden recurrir al uso del placeholder atributo, si está presente, pero tenga en cuenta que placeholder no se recomienda su uso como reemplazo de otros métodos de etiquetado.

Texto de ayuda

El texto de ayuda a nivel de bloque en formularios se puede crear usando .form-text (anteriormente conocido como .help-block en v3). El texto de ayuda en línea se puede implementar de manera flexible utilizando cualquier elemento HTML en línea y clases de utilidad como .text-muted.

Asociación de texto de ayuda con controles de formulario

El texto de ayuda debe asociarse explícitamente con el control de formulario relacionado con el uso del aria-describedby atributo. Esto garantizará que las tecnologías de asistencia, como los lectores de pantalla, anuncien este texto de ayuda cuando el usuario se enfoque o ingrese al control.

Se puede modificar el estilo del texto de ayuda debajo de las entradas .form-text . Esta clase incluye display: block y agrega un margen superior para facilitar el espaciado de las entradas anteriores.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 

  <label for="inputPassword5">Password</label>
  <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
  <small id="passwordHelpBlock" class="form-text text-muted">
    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
  </small>

De texto en línea puede utilizar cualquier elemento típico HTML en línea (ya sea una <small>, <span> o cualquier otra cosa) con nada más que una clase de utilidad.

Must be 8-20 characters long. 

  <form class="form-inline">
    <div class="form-group">
      <label for="inputPassword6">Password</label>
      <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
      <small id="passwordHelpInline" class="text-muted">
        Must be 8-20 characters long.
      </small>
    </div>
  </form>

Formas inhabilitadas

Agregue el disabled atributo booleano en una entrada para evitar interacciones del usuario y hacer que parezca más claro. 


  <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Agregue el disabled atributo a <fieldset> para deshabilitar todos los controles dentro. 


  <form>
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput">Disabled input</label>
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
      </div>
      <div class="form-group">
        <label for="disabledSelect">Disabled select menu</label>
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
          <label class="form-check-label" for="disabledFieldsetCheck">
            Can't check this
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </fieldset>
  </form>
Advertencia con anclas

Los navegadores tratan todos los controles de formulario nativos ( <input>, <select>y <button> elementos) dentro de a <fieldset disabled> como deshabilitados, lo que evita las interacciones del teclado y el mouse en ellos.

Sin embargo, si su formulario también incluye elementos personalizados similares a botones como <a ... class="btn btn-*"> , a estos solo se les dará un estilo de pointer-events: none . Como se indica en la sección sobre el estado deshabilitado de los botones (y específicamente en la subsección para los elementos de anclaje), esta propiedad CSS aún no está estandarizada y no es totalmente compatible con Internet Explorer 10. Los controles basados ​​en anclajes también seguirán siendo enfocable y operable usando el teclado. Debe modificar manualmente estos controles agregando tabindex="-1" para evitar que reciban el foco y aria-disabled="disabled" señalar su estado a las tecnologías de asistencia.

Compatibilidad entre navegadores

Aunque Bootstrap aplicará estos estilos en todos los navegadores, Internet Explorer 11 y versiones anteriores no son totalmente compatibles con el disabled atributo en un <fieldset> . Utilice JavaScript personalizado para deshabilitar el conjunto de campos en estos navegadores.

Validación

Proporcione comentarios valiosos y prácticos a sus usuarios con la validación de formularios HTML5, disponible en todos nuestros navegadores compatibles . Elija entre los comentarios de validación predeterminados del navegador o implemente mensajes personalizados con nuestras clases integradas y JavaScript de inicio.

Somos conscientes de que actualmente los estilos de validación personalizados del lado del cliente y la información sobre herramientas no son accesibles, ya que no están expuestos a tecnologías de asistencia. Mientras trabajamos en una solución, recomendamos usar la opción del lado del servidor o el método de validación del navegador predeterminado.

Validación del grupo de entrada

Desafortunadamente, los grupos de entrada tienen dificultades con los estilos de validación. Nuestra recomendación es colocar los mensajes de retroalimentación como elementos hermanos del .input-group que tiene .is-{valid|invalid} . Colocar mensajes de retroalimentación dentro de los grupos de entrada rompe el border-radius. Vea esta solución alternativa .

Cómo funciona

Así es como funciona la validación de formularios con Bootstrap:

  • La validación de formularios HTML se aplica a través de las dos pseudoclases de CSS :invalidy :valid . Se aplica a <input>, <select>y <textarea> elementos.
  • Bootstrap aplica los estilos :invalidy :valid a la .was-validated clase principal , generalmente se aplica a <form> . De lo contrario, cualquier campo obligatorio sin un valor aparece como no válido al cargar la página. De esta forma, puede elegir cuándo activarlos (normalmente después de intentar enviar el formulario).
  • Para restablecer la apariencia del formulario (por ejemplo, en el caso de envíos de formularios dinámicos usando AJAX), elimine la .was-validated clase de la parte <form> posterior después del envío.
  • Como respaldo, se pueden usar clases .is-invalid y en .is-valid lugar de las pseudoclases para la validación del lado del servidor . No requieren una .was-validated clase para padres.
  • Debido a las limitaciones en el funcionamiento de CSS, no podemos (en la actualidad) aplicar estilos a un <label> control de formulario en el DOM sin la ayuda de JavaScript personalizado.
  • Todos los navegadores modernos admiten la API de validación de restricciones , una serie de métodos JavaScript para validar controles de formulario.
  • Los mensajes de comentarios pueden utilizar los valores predeterminados del navegador (diferentes para cada navegador, y no se pueden estilizar mediante CSS) o nuestros estilos de comentarios personalizados con HTML y CSS adicionales.
  • Puede proporcionar mensajes de validez personalizados setCustomValidity en JavaScript.

Con eso en mente, considere las siguientes demostraciones para nuestros estilos de validación de formularios personalizados, clases opcionales del lado del servidor y valores predeterminados del navegador.

Estilos personalizados

Para los mensajes personalizados de validación de formularios Bootstrap, deberá agregar el novalidate atributo booleano a su <form> . Esto deshabilita la información sobre herramientas de comentarios predeterminada del navegador, pero aún proporciona acceso a las API de validación de formularios en JavaScript. Intente enviar el formulario a continuación; nuestro JavaScript interceptará el botón de envío y le enviará comentarios. Al intentar enviar, verá los estilos :invalid y :valid aplicados a sus controles de formulario.

Los estilos de comentarios personalizados aplican colores, bordes, estilos de enfoque e iconos de fondo personalizados para comunicar mejor los comentarios. Los iconos de fondo para mensajes de correo electrónico <select> solo están disponibles con .custom-select , y no .form-control.

Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 

  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationCustom01">First name</label>
        <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validationCustom02">Last name</label>
        <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationCustom03">City</label>
        <input type="text" class="form-control" id="validationCustom03" required>
        <div class="invalid-feedback">
          Please provide a valid city.
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationCustom04">State</label>
        <select class="custom-select" id="validationCustom04" required>
          <option selected disabled value="">Choose...</option>
          <option>...</option>
        </select>
        <div class="invalid-feedback">
          Please select a valid state.
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationCustom05">Zip</label>
        <input type="text" class="form-control" id="validationCustom05" required>
        <div class="invalid-feedback">
          Please provide a valid zip.
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
        <label class="form-check-label" for="invalidCheck">
          Agree to terms and conditions
        </label>
        <div class="invalid-feedback">
          You must agree before submitting.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>

  <script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
  </script>

Valores predeterminados del navegador

¿No le interesan los mensajes de retroalimentación de validación personalizados o escribir JavaScript para cambiar el comportamiento de los formularios? Todo bien, puede usar los valores predeterminados del navegador. Intente enviar el formulario a continuación. Dependiendo de su navegador y sistema operativo, verá un estilo de comentarios ligeramente diferente.

Si bien estos estilos de comentarios no se pueden diseñar con CSS, aún puede personalizar el texto de comentarios a través de JavaScript. 


  <form>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationDefault01">First name</label>
        <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validationDefault02">Last name</label>
        <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationDefault03">City</label>
        <input type="text" class="form-control" id="validationDefault03" required>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationDefault04">State</label>
        <select class="custom-select" id="validationDefault04" required>
          <option selected disabled value="">Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationDefault05">Zip</label>
        <input type="text" class="form-control" id="validationDefault05" required>
      </div>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
        <label class="form-check-label" for="invalidCheck2">
          Agree to terms and conditions
        </label>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>

Lado del servidor

Recomendamos utilizar la validación del lado del cliente, pero en caso de que necesite una validación del lado del servidor, puede indicar campos de formulario no válidos y no válidos con .is-invalidy .is-valid . Tenga en cuenta que .invalid-feedback también es compatible con estas clases.

Para los campos no válidos, asegúrese de que el mensaje de error / comentario no válido esté asociado con el campo de formulario correspondiente utilizando aria-describedby . Este atributo permite que id se haga referencia a más de uno , en caso de que el campo ya apunte a texto de formulario adicional.

Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 

  <form>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationServer01">First name</label>
        <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validationServer02">Last name</label>
        <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationServer03">City</label>
        <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
        <div id="validationServer03Feedback" class="invalid-feedback">
          Please provide a valid city.
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer04">State</label>
        <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
          <option selected disabled value="">Choose...</option>
          <option>...</option>
        </select>
        <div id="validationServer04Feedback" class="invalid-feedback">
          Please select a valid state.
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer05">Zip</label>
        <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
        <div id="validationServer05Feedback" class="invalid-feedback">
          Please provide a valid zip.
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
        <label class="form-check-label" for="invalidCheck3">
          Agree to terms and conditions
        </label>
        <div  id="invalidCheck3Feedback" class="invalid-feedback">
          You must agree before submitting.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>

Elementos compatibles

Los estilos de validación están disponibles para los siguientes controles y componentes de formulario:

  • <input> y <textarea> con .form-control
  • <select> con .form-control o .custom-select
  • .form-check
  • .custom-checkboxy .custom-radio
  • .custom-file
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback
@
Example invalid input group feedback
Example invalid input group feedback
Example invalid input group feedback 

  <form class="was-validated">
    <div class="mb-3">
      <label for="validationTextarea">Textarea</label>
      <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
      <div class="invalid-feedback">
        Please enter a message in the textarea.
      </div>
    </div>

    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
      <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
      <div class="invalid-feedback">Example invalid feedback text</div>
    </div>

    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
      <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
    </div>
    <div class="custom-control custom-radio mb-3">
      <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
      <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
      <div class="invalid-feedback">More example invalid feedback text</div>
    </div>

    <div class="mb-3">
      <select class="custom-select" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <div class="invalid-feedback">Example invalid custom select feedback</div>
    </div>

    <div class="custom-file mb-3">
      <input type="file" class="custom-file-input" id="validatedCustomFile" required>
      <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
      <div class="invalid-feedback">Example invalid custom file feedback</div>
    </div>

    <div class="mb-3">
      <div class="input-group is-invalid">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
      </div>
      <div class="invalid-feedback">
        Example invalid input group feedback
      </div>
    </div>

    <div class="mb-3">
      <div class="input-group is-invalid">
        <div class="input-group-prepend">
          <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
        </div>
        <select class="custom-select" id="validatedInputGroupSelect" required>
          <option value="">Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      <div class="invalid-feedback">
        Example invalid input group feedback
      </div>
    </div>

    <div class="input-group is-invalid">
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
        <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
      </div>
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </form>

Información sobre herramientas

Si el diseño de su formulario lo permite, puede cambiar las .{valid|invalid}-feedback clases por .{valid|invalid}-tooltip clases para mostrar comentarios de validación en una descripción emergente con estilo. Asegúrese de tener un padre con position: relative él para el posicionamiento de la información sobre herramientas. En el siguiente ejemplo, nuestras clases de columna ya tienen esto, pero su proyecto puede requerir una configuración alternativa.

Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 

  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationTooltip01">First name</label>
        <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
        <div class="valid-tooltip">
          Looks good!
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validationTooltip02">Last name</label>
        <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
        <div class="valid-tooltip">
          Looks good!
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationTooltip03">City</label>
        <input type="text" class="form-control" id="validationTooltip03" required>
        <div class="invalid-tooltip">
          Please provide a valid city.
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationTooltip04">State</label>
        <select class="custom-select" id="validationTooltip04" required>
          <option selected disabled value="">Choose...</option>
          <option>...</option>
        </select>
        <div class="invalid-tooltip">
          Please select a valid state.
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationTooltip05">Zip</label>
        <input type="text" class="form-control" id="validationTooltip05" required>
        <div class="invalid-tooltip">
          Please provide a valid zip.
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit form</button>
  </form>

Personalización

Los estados de validación se pueden personalizar a través de Sass con el $form-validation-states mapa. Ubicado en nuestro _variables.scss archivo, este mapa Sass se repite para generar los estados predeterminados valid / de invalid validación. Se incluye un mapa anidado para personalizar el color y el icono de cada estado. Si bien los navegadores no admiten otros estados, aquellos que usan estilos personalizados pueden agregar fácilmente comentarios de formularios más complejos.

Tenga en cuenta que no recomendamos personalizar estos valores sin modificar también la form-validation-state mezcla. 


  // Sass map from `_variables.scss`
  // Override this and recompile your Sass to generate different states
  $form-validation-states: map-merge(
    (
      "valid": (
        "color": $form-feedback-valid-color,
        "icon": $form-feedback-icon-valid
      ),
      "invalid": (
        "color": $form-feedback-invalid-color,
        "icon": $form-feedback-icon-invalid
      )
    ),
    $form-validation-states
  );

  // Loop from `_forms.scss`
  // Any modifications to the above Sass map will be reflected in your compiled
  // CSS via this loop.
  @each $state, $data in $form-validation-states {
    @include form-validation-state($state, map-get($data, color), map-get($data, icon));
  }

Solución alternativa de validación del grupo de entrada

No podemos resolver la ruptura border-radius de los grupos de entrada con validación debido a las limitaciones del selector, por lo que se requieren anulaciones manuales. Cuando esté utilizando un grupo de entrada estándar y no personalice los valores predeterminados del radio del borde, agréguelo .rounded-right a los elementos con el roto border-radius. 


  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control rounded-right" required>
    <div class="invalid-feedback">
      Please choose a username.
    </div>
  </div>
@
Please choose a username.

Cuando utilice un grupo de entrada pequeño o grande o personalice los border-radius valores predeterminados , agregue CSS personalizado al elemento con el archivo border-radius. 


  /* Change values to match the radius of your form control */
  .fix-rounded-right {
    border-top-right-radius: .2rem !important;
    border-bottom-right-radius: .2rem !important;
  }

  <div class="input-group input-group-sm">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control fix-rounded-right" required>
    <div class="invalid-feedback">
      Please choose a username.
    </div>
  </div>
@
Please choose a username.

Formularios personalizados

Para una mayor personalización y coherencia entre navegadores, utilice nuestros elementos de formulario completamente personalizados para reemplazar los valores predeterminados del navegador. Están construidos sobre el marcado semántico y accesible, por lo que son reemplazos sólidos para cualquier control de formulario predeterminado.

Casillas de verificación y radios

Cada casilla de verificación y radio <input>y <label> emparejamiento están envueltos en un <div> para crear nuestro control personalizado. Estructuralmente, este es el mismo enfoque que nuestro predeterminado .form-check.

Usamos el selector de hermanos ( ~ ) para todos nuestros <input> estados, como :checked para diseñar correctamente nuestro indicador de formulario personalizado. Cuando se combina con la .custom-control-label clase, también podemos diseñar el texto de cada elemento en función del <input> estado de.

Ocultamos el valor predeterminado <input> con opacity y usamos .custom-control-label para construir un nuevo indicador de formulario personalizado en su lugar con ::beforey ::after . Desafortunadamente, no podemos construir uno personalizado solo <input> porque los CSS content no funcionan en ese elemento.

En los estados marcados, usamos iconos SVG incrustados en base64 de Open Iconic . Esto nos proporciona el mejor control para diseñar y posicionar entre navegadores y dispositivos.

Casillas de verificación 


  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
  </div>

Las casillas de verificación personalizadas también pueden utilizar la :indeterminate pseudoclase cuando se configuran manualmente a través de JavaScript (no hay ningún atributo HTML disponible para especificarlo).

Si está utilizando jQuery, algo como esto debería ser suficiente:


  $('.your-checkbox').prop('indeterminate', true)

Radios 


  <div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
  </div>

En línea 


  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
  </div>

Discapacitado

Las casillas de verificación personalizadas y las radios también se pueden desactivar. Agregue el disabled atributo booleano al <input> indicador personalizado y la descripción de la etiqueta se aplicará automáticamente. 


  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
    <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
    <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
  </div>

Switches

Un interruptor tiene el marcado de una casilla de verificación personalizada, pero usa la .custom-switch clase para representar un interruptor de palanca. Los conmutadores también admiten el disabled atributo. 


  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
  </div>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
  </div>

Seleccione el menú

Los <select> menús personalizados solo necesitan una clase personalizada .custom-select para activar los estilos personalizados. Los estilos personalizados se limitan a la <select> apariencia inicial de y no pueden modificar los <option> debido a las limitaciones del navegador. 


  <select class="custom-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

También puede elegir entre selecciones personalizadas pequeñas y grandes para que coincidan con nuestras entradas de texto de tamaño similar. 


  <select class="custom-select custom-select-lg mb-3">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <select class="custom-select custom-select-sm">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

El multiple atributo también es compatible: 


  <select class="custom-select" multiple>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

Como es el size atributo: 


  <select class="custom-select" size="3">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

Rango

Crea <input type="range"> controles personalizados con .custom-range . La pista (el fondo) y el pulgar (el valor) tienen ambos estilos para que parezcan iguales en todos los navegadores. Como solo IE y Firefox admiten "completar" su pista desde la izquierda o la derecha del pulgar como un medio para indicar visualmente el progreso, actualmente no lo admitimos. 


  <label for="customRange1">Example range</label>
  <input type="range" class="custom-range" id="customRange1">

Las entradas de rango tienen valores implícitos para miny max- 0y 100 , respectivamente. Puede especificar nuevos valores para aquellos que usan los atributos miny max. 


  <label for="customRange2">Example range</label>
  <input type="range" class="custom-range" min="0" max="5" id="customRange2">

De forma predeterminada, las entradas de rango se “ajustan” a valores enteros. Para cambiar esto, puede especificar un step valor. En el siguiente ejemplo, duplicamos el número de pasos usando step="0.5". 


  <label for="customRange3">Example range</label>
  <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Explorador de archivos

El complemento recomendado para animar la entrada de archivos personalizados: bs-custom-file-input , eso es lo que estamos usando actualmente aquí en nuestros documentos.

La entrada del archivo es la más retorcida del grupo y requiere JavaScript adicional si desea conectarlos con el archivo funcional Choose file ... y el texto del nombre del archivo seleccionado. 


  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>

Ocultamos el archivo predeterminado <input> mediante opacity y, en su lugar, le aplicamos estilo <label> . El botón se genera y se posiciona con ::after . Por último, se declara una width y height en el <input> espacio apropiado para rodear de contenido.

Traducir o personalizar las cadenas con SCSS

La :lang() pseudoclase se utiliza para permitir la traducción del texto "Examinar" a otros idiomas. Anule o agregue entradas a la $custom-file-text variable Sass con la etiqueta de idioma relevante y cadenas localizadas. Las cadenas en inglés se pueden personalizar de la misma manera. Por ejemplo, así es como se puede agregar una traducción al español (el código de idioma español es es): 


  $custom-file-text: (
    en: "Browse",
    es: "Elegir"
  );

Aquí está lang(es) en acción sobre la entrada del archivo personalizado para una traducción al español: 


  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFileLang" lang="es">
    <label class="custom-file-label" for="customFileLang">Choose file</label>
  </div>

Deberá configurar el idioma de su documento (o subárbol del mismo) correctamente para que se muestre el texto correcto. Esto se puede hacer usando el lang atributo en el <html> elemento o el Content-Language encabezado HTTP , entre otros métodos.

Traducir o personalizar las cadenas con HTML

Bootstrap también proporciona una forma de traducir el texto "Examinar" en HTML con el data-browse atributo que se puede agregar a la etiqueta de entrada personalizada (ejemplo en holandés): 


  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFileLangHTML">
    <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
  </div>

Input estilizado o customizado

Utilice esta clase div-file para poder estilizar un input de tipo file y que se vea como un boton y utilice esta clase input-file para poder ocultar el input de tipo file y se pueda visualizar el div padre.

subir file
subir file
subir file 

  <div class="div-file btn btn-primary">
    <input type="file" class="input-file" id="customFile">
  </div>

Eliminar el control de revelación de contraseña en navegador Edge que tiene por default

Puede eliminar por completo el botón de revelación de contraseña apuntando al ::-ms-reveal pseudo elemento. 


  ::-ms-reveal{
    display: none;
  }

Input sin icono "valid" o "invalid"

Para quitar el icono de verificacion en un input utiliza la siguiente clase: 


  .remove-invalid-input{
    background-image: none !important
  }

Formulario con Helpers

Es posible tener un espacio fijo reservado para mostrar los Helpers. Es necesario utilizar la clase with-helper atributo que debera estar de la siguiente forma <className="form-group with-helper"> . Esto habilita un espacio fijo para el helper. Es decir cuando se muestre un mensaje en el helper. El formulario no generara espacios adicionales para mostrar este contenido.