in English

Formularios

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

Visión general

Los controles de formulario de Bootstrap amplían nuestros estilos de formulario reiniciados con clases. Use 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 typeatributo apropiado en todas las entradas (p. ej., emailpara la dirección de correo electrónico o numberpara la 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.

Nunca compartiremos su correo electrónico con nadie más. 
<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, tienen estilo con la .form-controlclase. Se incluyen estilos para apariencia general, estado de enfoque, tamaño y más.

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

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </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 entradas de archivos, cambie el .form-controlpor .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 readonlyatributo 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 deshabilitadas), pero conservan el cursor estándar.

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

Texto sin formato de solo lectura

Si desea tener <input readonly>elementos en su formulario con estilo como texto sin formato, use la .form-control-plaintextclase para eliminar el estilo de campo de formulario predeterminado 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 protected]">
    </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 protected]">
  </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

Establezca 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

Las casillas de verificación y los radios predeterminados se han mejorado con la ayuda de .form-checkuna única clase para ambos tipos de entrada que mejora el diseño 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 de muchas.

Se admiten casillas de verificación y radios deshabilitadas. El disabledatributo 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>s y <label>s son elementos hermanos a diferencia de an <input>dentro de a <label>. Esto es un poco más detallado ya que debe especificar idy foratributos para relacionar el <input>y <label>.

Predeterminado (apilado)

De forma predeterminada, cualquier cantidad de casillas de verificación y radios que sean hermanos inmediatos se apilarán verticalmente y se espaciarán adecuadamente con .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-inlinea cualquier archivo .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-statica las entradas dentro .form-checkque no tienen ningún texto de etiqueta. Recuerde proporcionar algún tipo de nombre accesible para las tecnologías de asistencia (por ejemplo, usando 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

Dado que Bootstrap se aplica display: blocka width: 100%casi todos nuestros controles de formulario, los formularios se apilarán verticalmente de forma predeterminada. Se pueden usar clases adicionales para variar este diseño según el formulario.

Formar grupos

La .form-groupclase 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 recoge estilos adicionales .form-inlinesegú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 formularios más complejos utilizando nuestras clases de cuadrícula. Utilícelos para diseños de formularios que requieran 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 .rowpor .form-row, una variación de nuestra fila de cuadrícula estándar que anula los canales de columna predeterminados 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 formularios horizontales con la cuadrícula agregando la .rowclase 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>correos electrónicos 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-topetiqueta de nuestras entradas de radio apiladas para alinear mejor la línea de base del texto.

Radios
Caja 
<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-smo .col-form-label-lghasta su <label>s o <legend>s 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>

Tamaño de columna

Como se muestra en los ejemplos anteriores, nuestro sistema de cuadrícula le permite colocar cualquier número de .cols dentro de a .rowo .form-row. Dividirán el ancho disponible en partes iguales entre ellos. También puede elegir un subconjunto de sus columnas para que ocupe más o menos espacio, mientras que los restantes .coldividen el resto por igual, con clases de columnas 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 el contenido y los cambios .colpara .col-autoque sus columnas solo ocupen tanto espacio como sea necesario. Dicho de otra manera, la columna se dimensiona a sí misma en función del 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>

Luego puede mezclar eso una vez más 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-inlineclase 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 son display: flex, colapsan cualquier espacio en blanco HTML y le permiten proporcionar control de alineación con utilidades de espaciado y flexbox .
  • Los controles y los grupos de entrada reciben width: autopara anular el valor predeterminado de Bootstrap width: 100%.
  • Los controles solo aparecen en línea en las ventanas gráficas 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 de 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 selecciones y controles de formulario 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-onlyclase. Existen otros métodos alternativos para proporcionar una etiqueta para las tecnologías de asistencia, como el aria-labelatributo o aria-labelledby. titleSi ninguno de estos está presente, las tecnologías de asistencia pueden recurrir al uso del placeholderatributo, si está presente, pero tenga en cuenta que placeholderno se recomienda el uso de como reemplazo de otros métodos de etiquetado.

Texto de ayuda

El texto de ayuda a nivel de bloque en los formularios se puede crear usando .form-text(anteriormente conocido como .help-blocken 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 con el que se relaciona el uso del aria-describedbyatributo. Esto garantizará que las tecnologías de asistencia, como los lectores de pantalla, anuncien este texto de ayuda cuando el usuario enfoca o ingresa el control.

El texto de ayuda debajo de las entradas se puede diseñar con .form-text. Esta clase incluye display: blocky agrega un margen superior para facilitar el espaciado de las entradas anteriores.

Su contraseña debe tener entre 8 y 20 caracteres, contener letras y números, y no debe contener espacios, caracteres especiales ni 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>

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

Debe tener entre 8 y 20 caracteres. 
<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>

formularios deshabilitados

Agregue el disabledatributo booleano en una entrada para evitar las 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 disabledatributo 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 un <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-*">, estos solo tendrán un estilo de pointer-events: none. Como se indicó en la sección sobre el estado deshabilitado de los botones (y específicamente en la subsección de elementos de anclaje), esta propiedad CSS aún no está estandarizada y no es completamente 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 agregándolos tabindex="-1"para evitar que reciban atención y aria-disabled="disabled"señalar su estado a las tecnologías de asistencia.

Compatibilidad entre navegadores

Si bien Bootstrap aplicará estos estilos en todos los navegadores, Internet Explorer 11 y versiones anteriores no admiten completamente el disabledatributo en un archivo <fieldset>. Use JavaScript personalizado para deshabilitar el conjunto de campos en estos navegadores.

Validación

Proporcione comentarios valiosos y procesables 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 predeterminado del navegador.

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-groupque tiene .is-{valid|invalid}. Colocar mensajes de retroalimentación dentro de grupos de entrada rompe el border-radius. Consulte esta solución .

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 dos pseudoclases de CSS :invalidy :valid. Se aplica a los elementos <input>, <select>y <textarea>.
  • Bootstrap aplica el ámbito :invalidy los :validestilos a la .was-validatedclase principal, que generalmente se aplica a <form>. De lo contrario, cualquier campo obligatorio sin valor aparecerá como no válido al cargar la página. De esta forma, puede elegir cuándo activarlos (por lo general, 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 mediante AJAX), elimine la .was-validatedclase de <form>nuevo después del envío.
  • Como respaldo, .is-invalidse .is-validpueden usar clases en lugar de las pseudoclases para la validación del lado del servidor . No requieren una .was-validatedclase principal.
  • Debido a las limitaciones en el funcionamiento de CSS, no podemos (en la actualidad) aplicar estilos a un <label>control de formulario anterior al DOM sin la ayuda de JavaScript personalizado.
  • Todos los navegadores modernos admiten la API de validación de restricciones , una serie de métodos de JavaScript para validar controles de formulario.
  • Los mensajes de comentarios pueden utilizar los valores predeterminados del navegador (diferentes para cada navegador y sin estilo a través de CSS) o nuestros estilos de comentarios personalizados con HTML y CSS adicionales.
  • Puede proporcionar mensajes de validez personalizados setCustomValidityen 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 de validación de formulario Bootstrap personalizados, deberá agregar el novalidateatributo booleano a su archivo <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 siguiente formulario; nuestro JavaScript interceptará el botón de enviar y le transmitirá sus comentarios. Cuando intente enviar, verá los estilos :invalidy :validaplicados a los controles de su formulario.

Los estilos de comentarios personalizados aplican colores, bordes, estilos de enfoque e iconos de fondo personalizados para comunicar mejor los comentarios. Los íconos de fondo para <select>s 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 comentarios de validación personalizados o escribir JavaScript para cambiar los comportamientos de los formularios? Todo bien, puedes usar los valores predeterminados del navegador. Intente enviar el formulario a continuación. Dependiendo de su navegador y sistema operativo, verá un estilo de retroalimentación 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 requiera la validación del lado del servidor, puede indicar campos de formulario válidos y no válidos con .is-invalidy .is-valid. Tenga en cuenta que .invalid-feedbacktambién es compatible con estas clases.

Para los campos no válidos, asegúrese de que el mensaje de error/retroalimentación no válido esté asociado con el campo de formulario relevante usando aria-describedby. Este atributo permite idhacer referencia a más de uno, en caso de que el campo ya apunte a texto de formulario adicional.

¡Se ve bien!
¡Se ve bien!
Proporcione una ciudad válida.
Seleccione un estado válido.
Proporcione un código postal válido.
Debe estar de acuerdo antes de enviar. 
<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>s y <textarea>s con.form-control
  • <select>es con .form-controlo.custom-select
  • .form-checks
  • .custom-checkboxs y .custom-radios
  • .custom-file
Por favor ingrese un mensaje en el área de texto.
Ejemplo de texto de comentario no válido
Más ejemplos de texto de comentario no válido
Ejemplo de comentarios de selección personalizados no válidos
Ejemplo de comentario de archivo personalizado no válido
@
Ejemplo de retroalimentación de grupo de entrada no válida
Ejemplo de retroalimentación de grupo de entrada no válida
Ejemplo de retroalimentación de grupo de entrada no válida 
<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}-feedbackclases por .{valid|invalid}-tooltipclases para mostrar comentarios de validación en una información sobre herramientas 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 columnas 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-statesmapa. Ubicado en nuestro _variables.scssarchivo, este mapa de Sass se repite para generar los estados predeterminados valid/ de invalidvalidació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 el form-validation-statemixin.

// 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 de validación de grupo de entrada

No podemos resolver los border-radiusgrupos de entrada rotos con validación debido a las limitaciones del selector, por lo que se requieren anulaciones manuales. Cuando utilice un grupo de entrada estándar y no personalice los valores predeterminados del radio del borde, agregue .rounded-righta los elementos con el 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>
@
Por favor, elija un nombre de usuario.

Cuando utilice un grupo de entrada pequeño o grande o personalice los border-radiusvalores 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>
@
Por favor, elija un nombre de usuario.

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á envuelto 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, :checkedpara diseñar correctamente nuestro indicador de formulario personalizado. Cuando se combina con la .custom-control-labelclase, también podemos diseñar el texto de cada elemento en función del <input>estado de .

Ocultamos el valor predeterminado <input>con opacityy usamos .custom-control-labelpara crear un nuevo indicador de formulario personalizado en su lugar con ::beforey ::after. Desafortunadamente, no podemos crear uno personalizado solo <input>porque el CSS contentno funciona en ese elemento.

En los estados marcados, usamos iconos SVG incrustados base64 de Open Iconic . Esto nos brinda el mejor control para diseñar y posicionar en todos los 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 :indeterminatepseudoclase cuando se configuran manualmente a través de JavaScript (no hay un 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>

Desactivado

Las casillas de verificación y las radios personalizadas también se pueden desactivar. Agregue el disabledatributo booleano a <input>y el indicador personalizado y la descripción de la etiqueta se diseñarán 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>

Interruptores

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

<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 menús personalizados <select>solo necesitan una clase personalizada .custom-selectpara activar los estilos personalizados. Los estilos personalizados se limitan a la <select>apariencia inicial del correo electrónico y no pueden modificar el correo <option>electrónico 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 multipleatributo 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 sizeatributo:

<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

Cree <input type="range">controles personalizados con .custom-range. La pista (el fondo) y el pulgar (el valor) están diseñados para que aparezcan iguales en todos los navegadores. Como solo IE y Firefox admiten "llenar" 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 stepvalor. 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 de archivo es la más retorcida del grupo y requiere JavaScript adicional si desea conectarlos con Elegir archivo funcional... y texto de nombre de 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>a través de opacityy, en su lugar, diseñamos el archivo <label>. El botón se genera y posiciona con ::after. Por último, declaramos a widthy heighten el <input>espacio adecuado para el contenido circundante.

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-textvariable Sass con la etiqueta de idioma relevante y las cadenas localizadas. Las cadenas en inglés se pueden personalizar de la misma manera. Por ejemplo, así es como se podría agregar una traducción al español (el código de idioma del español es es):

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

Aquí está lang(es)en acción 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">Seleccionar Archivo</label>
</div>

Deberá configurar correctamente el idioma de su documento (o subárbol del mismo) para que se muestre el texto correcto. Esto se puede hacer usando el langatributo en el <html>elemento o el Content-Languageencabezado 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-browseatributo 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>