Bootstrap 4 formularios personalizados

Bootstrap 4 viene con elementos de formulario personalizados, que están destinados a reemplazar los valores predeterminados del navegador:

Rango personalizado:

Rango predeterminado:

Casilla de verificación personalizada

Para crear una casilla de verificación personalizada, envuelva un elemento contenedor, como <div>, con una clase de .custom-controly .custom-checkboxalrededor de la casilla de verificación. Luego agregue el .custom-control-inputa la entrada con type="checkbox".

Sugerencia: si usa etiquetas para acompañar el texto, agréguele la .custom-control-labelclase. Tenga en cuenta que el valor del atributo for debe coincidir con la identificación de la casilla de verificación:

Ejemplo

<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</form>

Interruptor personalizado

Para crear un "interruptor de palanca" personalizado, ajuste un elemento contenedor, como <div>, con una clase de .custom-controly .custom-switchalrededor de una casilla de verificación. Luego agregue la .custom-control-inputclase a la casilla de verificación:

Ejemplo

<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>

Botones de opción personalizados

Para crear un botón de opción personalizado, envuelva un elemento contenedor, como <div>, con una clase de .custom-controly .custom-radioalrededor del botón de opción. Luego agregue el .custom-control-inputa la entrada con type="radio".

Sugerencia: si usa etiquetas para acompañar el texto, agréguele la .custom-control-labelclase. Tenga en cuenta que el valor del atributo for debe coincidir con la identificación de la radio:

Ejemplo

<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>

Controles de formulario personalizados en línea

Si desea que los controles de formulario personalizados se coloquen uno al lado del otro (en línea), agréguelos .custom-control-inlineal envoltorio/contenedor:

Ejemplo

<form>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>
</form>

Menú de selección personalizado

Para crear un menú de selección personalizado, agregue la .custom-selectclase al elemento <select>:

Ejemplo

<form>
<select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

Tamaño de menú de selección personalizado

Use la .custom-select-smclase para crear un pequeño menú de selección y la .custom-select-lgclase para uno grande:

Ejemplo

<form>

<select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>


<select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

Rango personalizado

Para crear un menú de rango personalizado, agregue la .custom-rangeclase a una entrada con type="<range>":

Ejemplo

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

Carga de archivos personalizados

Para crear una carga de archivo personalizada, ajuste un elemento contenedor con una clase .custom-filealrededor de la entrada con type="file". Luego añádele el .custom-file-input.

Sugerencia: si usa etiquetas para acompañar el texto, agréguele la .custom-file-labelclase. Tenga en cuenta que el valor del atributo for debe coincidir con la identificación de la casilla de verificación:

Tenga en cuenta que también debe incluir algún código jQuery si desea que aparezca el nombre del archivo cuando seleccione un archivo específico:

Ejemplo

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

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

Tutorial de Bootstrap 4

Bootstrap 4 Rejilla

Bootstrap 4 Otro

Referencia Bootstrap 4

Bootstrap 4 formularios personalizados