Formularios

Input

Input mail

Label email

Label email disabled

Label email éxito

Label email error

Upsss!


<form>

    <div class="form-group floating-label">

        <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email">

        <label for="inputEmail">Label email</label>

    </div>

</form>

Input password

Label contraseña

Label contraseña disabled

Label contraseña éxito

Label contraseña error

Upsss!


<form>

    <div class="form-group">

        <div class="input-group floating-label">

            <input type="password" class="form-control is-invalid" id="passwordError" placeholder="Al menos 6 caracteres" tabindex="2" name="passwordError" aria-label="Password" aria-describedby="showLoginPass4" autocomplete="off" required value="123456789">

            <label for="passwordError" class="control-label">Label contraseña error</label>

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

                <button class="btn btn-lighter btn-icon showPassword" type="button" id="showLoginPass4">

                    <span class="icon-show"></span>

                    <span class="icon-show-off d-none"></span>

                </button>

            </div>

            <div class="invalid-feedback">Upsss!</div>

        </div>

    </div>

</form>

Input text

Label texto

Label texto disabled

Label texto éxito

Label texto error

Upsss!


<form>

    <div class="form-group floating-label">

        <input type="text" class="form-control is-invalid" id="inputTextError" name="inputTextError" placeholder="Insertar texto" value="">

        <label for="inputTextError">Label texto error</label>

        <div class="invalid-feedback">Upsss!</div>

    </div>

</form>

Input number

Label número

Label número disabled

Label número éxito

Label número error

Upsss!


<form>

    <div class="form-group">

        <label for="inputNumber">Label número</label>

        <input type="number" class="form-control" id="inputNumber" name="inputNumber" placeholder="Insertar número">

    </div>

</form>

Input Select

Label email

Upsss!


<form>

    <div class="form-group floating-label">

        <select id="selectSuccess" class="custom-select is-invalid" >

            <option selected>Open this select menu</option>

            <option value="1">One</option>

            <option value="2">Two</option>

            <option value="3">Three</option>

        </select>

        <label for="selectSuccess">Label email</label>

        <div class="invalid-feedback">Upsss!</div>

    </div>

</form>

Input checkbox

Check me out

Perfecto!

Check me out

Upsss!


<form>

    <div class="form-group">

        <div class="form-check">

            <input class="form-check-input" type="checkbox" id="inputCheckbox" name="inputCheckbox">

            <label class="form-check-label" for="inputCheckbox">Check me out</label>

        </div>

    </div>

</form>

Input radio

Default radio

Second default radio

First radio

Perfecto!

First radio

Upsss!


<form>

    <div class="form-group">

        <div class="form-check">

            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">

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

</form>

Input range

Example range

Perfecto!

Example range

Upsss!


<form>

    <div class="form-group">

        <label for="customRange1">Example range</label>

        <input class="bkool-range-slider" type="text" id="customRange1" name="example_name" value="50" data-min="1" data-max="100" data-from="50" data-skin="round"/>

    </div>

</form>

Text area


<form>

    <div class="form-group floating-label">

        <textarea rows="5" id="basic-textArea" class="form-control" aria-label="With textarea" placeholder="Type"></textarea>

        <label for="basic-textArea">Label area de texto</label>

    </div>

</form>

Size

Label email


<form>

    <div class="form-group col-lg floating-label">

        <input type="email" class="form-control form-control-lg" id="inputEmailLarge" name="inputEmailLarge" placeholder="Email">

        <label for="inputEmailLarge">Label email</label>

    </div>

    <div class="form-group col-lg floating-label">

        <input type="email" class="form-control" id="inputEmailNormal" name="inputEmailNormal" placeholder="Email">

        <label for="inputEmailNormal">Label email</label>

    </div>

    <div class="form-group col-lg floating-label">

        <input type="email" class="form-control form-control-sm" id="inputEmailSmall" name="inputEmailSmall" placeholder="Email">

        <label for="inputEmailSmall">Label email</label>

    </div>

</form>

Input groups

Ejemplo básico

Label texto


<form>

    <div class="form-group">

        <div class="input-group">

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

                <span class="input-group-text" id="basic-addon1">@</span>

            </div>

            <div class="floating-label flex-grow-1">

                <input id="basic-text" type="text" class="form-control" placeholder="Usuario" aria-label="Username" aria-describedby="basic-addon1">

                <label for="basic-text">Label texto</label>

            </div>

        </div>

    </div>

</form>

Label texto

@example.com


<form>

    <div class="input-group">

        <div class="floating-label flex-grow-1">

            <input id="basic-text2" type="text" class="form-control" placeholder="Usuario" aria-label="Recipient's username" aria-describedby="basic-addon2">

            <label for="basic-text2">Label texto</label>

        </div>

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

            <span class="input-group-text" id="basic-addon2">@example.com</span>

        </div>

    </div>

</form>

Label texto

.00


<form>

    <div class="form-group">

        <label for="basic-text3">Label texto</label>

        <div class="input-group mb-3">

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

                <span class="input-group-text">$</span>

            </div>

            <input id="basic-text3" type="text" class="form-control" aria-label="Amount (to the nearest dollar)">

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

                <span class="input-group-text">.00</span>

            </div>

        </div>

    </div>

</form>

Checkbox y radios

Label area de texto


<form>

    <div class="input-group mb-2">

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

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

                <div class="form-check m-0">

                    <input class="form-check-input" type="checkbox" id="inputCheckbox2" name="inputCheckbox">

                    <label class="form-check-label mb-3" for="inputCheckbox2"></label>

                </div>

            </div>

        </div>

        <div class="floating-label flex-grow-1">

            <input type="text" id="checkboxTextField" class="form-control" aria-label="Text input with checkbox" placeholder="Checkbox text field">

            <label for="checkboxTextField">Label area de texto</label>

        </div>

    </div>

</form>

Label area de texto


<form>

    <div class="input-group mb-2">

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

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

                <div class="form-check m-0">

                    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3">

                    <label class="form-check-label mb-3" for="exampleRadios3"></label>

                </div>

            </div>

        </div>

        <div class="floating-label flex-grow-1">

            <input type="text" id="radioTextField" class="form-control" aria-label="Text input with radio button" placeholder="Radio text field">

            <label for="radioTextField">Label area de texto</label>

        </div>

    </div>

</form>

Botones

Label area de texto


<form>

    <div class="form-group">

        <div class="input-group floating-label mb-3">

            <input id="buttonRightTextField" type="text" class="form-control" placeholder="Usuario" aria-label="Example text with button addon" aria-describedby="button-addon1">

            <label for="buttonRightTextField">Label area de texto</label>

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

                <button class="btn btn-light" type="button" id="button-addon1">Botón</button>

            </div>

        </div>

    </div>

</form>

Dropdown

Label area de texto


<form>

    <div class="form-group">

        <div class="input-group floating-label mb-3">

            <input id="dropdownRightTextField" type="text" class="form-control" placeholder="Usuario" aria-label="Example text with button addon" aria-describedby="button-addon1">

            <label for="dropdownRightTextField">Label area de texto</label>

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

                <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown<span class="icon-expand-more"></span></button>

                <div class="dropdown-menu dropdown-menu-right">

                    <a class="dropdown-item" href="#">Action</a>

                    <a class="dropdown-item" href="#">Another action</a>

                    <a class="dropdown-item" href="#">Something else here</a>

                    <div role="separator" class="dropdown-divider"></div>

                    <a class="dropdown-item" href="#">Separated link</a>

                </div>

            </div>

        </div>

    </div>

</form>

Switches

Toggle este elemento


<form>

    <div class="form-group">

        <div class="custom-control custom-switch">

            <input type="checkbox" class="custom-control-input" id="customSwitch1">

            <label class="custom-control-label" for="customSwitch1">Toggle este elemento</label>

        </div>

    </div>

</form>

File browser

Seleccionar fichero


<form>

    <div class="form-group">

        <div class="custom-file">

            <input type="file" class="custom-file-input" id="customFile">

            <label class="custom-file-label" for="customFile" data-browse="Cargar">Seleccionar fichero</label>

        </div>

    </div>

</form>

Validación

Validación Bootstrap

Uso de input password

Label contraseña

Por favor, introduce tu contraseña

Añadir jQuery para funcionalidad de habilitar o deshabilitar ver el texto


// Register form show pass button

$(".showPassword").on("click", function() {

    var passAtribute = $(this).closest(".input-group-append").siblings("input").attr("type");

    $(this).find("span").toggleClass("d-none");

    if(passAtribute == "password") {

        $(this).closest(".input-group-append").siblings("input").attr("type", "text");

        passAtribute = $(this).closest(".input-group-append").siblings("input").attr("type", "text");

    }else {

        $(this).closest(".input-group-append").siblings("input").attr("type", "password");

        passAtribute = $(this).closest(".input-group-append").siblings("input").attr("type", "password");

    }

});

Uso de input file

Añadir jQuery para funcionalidad de mostrar fichero cargado


$('.custom-file-input').on('change',function(){

    var fileName = $(this).val();

    $(this).next('.custom-file-label').html(fileName);

})

Uso de input range

Example range

Cargar CSS del plugin

Cargar fichero al final de la página


<link href="css/plugins/ion-range-slider/ion.rangeSlider.min.css" rel="stylesheet">

Cargar JavaScript del plugin

Cargar fichero al final de la página


<script src="js/ion-range-slider/ion.rangeSlider.min.js "></script>

Shipping address

Name

Lastname

Password

Confirm password

The password do not match

Country

Province

Type of road

Rode name

Number

Door

Address two

Your weight

Your twitter handler

Upload image

Comments

I Agree to use my email address to notify me


<div class="card shadow-sm">

    <div class="card-body p-4">

        <h5 class="mb-3">Shipping address</h5>

        <form>

            <div class="form-row">

                <!-- Name -->

                <div class="form-group col-lg-6 floating-label">

                    <input type="text" class="form-control" id="inputFormName" name="inputFormName" placeholder="Name" value="Welington">

                    <label for="inputFormName">Name</label>

                </div>

                <!-- /Name -->



                <!-- Lastname -->

                <div class="form-group col-lg-6 floating-label">

                    <input type="text" class="form-control" id="inputFormLastname" name="inputFormLastname" placeholder="Lastname" value="Quiw">

                    <label for="inputFormLastname">Lastname</label>

                </div>

                <!-- /Lastname -->



                <!-- Email -->

                <div class="form-group col-12 floating-label">

                    <input type="email" class="form-control" id="inputFormEmail" name="inputFormEmail" placeholder="Lastname" value="welington_quiw@gmail.com">

                    <label for="inputFormEmail">Email</label>

                </div>

                <!-- /Email -->



                <!-- Password -->

                <div class="form-group col-lg-6">

                    <div class="input-group floating-label">

                        <input type="password" class="form-control" id="inputFormPass" placeholder="Password" tabindex="2" name="inputFormPass" aria-label="Password" aria-describedby="formShowPass" autocomplete="off" required value="123456">

                        <label for="inputFormPass" class="control-label">Password</label>

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

                            <button class="btn btn-white btn-icon showPassword" type="button" id="formShowPass">

                                <span class="icon-show"></span>

                                <span class="icon-show-off d-none"></span>

                            </button>

                        </div>

                    </div>

                </div>

                <!-- /Password -->



                <!-- Confirm password -->

                <div class="form-group col-lg-6">

                    <div class="input-group floating-label">

                        <input type="password" class="form-control is-invalid" id="inputFormConfirmPass" placeholder="Password" tabindex="2" name="inputFormConfirmPass" aria-label="Password" aria-describedby="formShowConfirmPass" autocomplete="off" required value="1234">

                        <label for="inputFormConfirmPass" class="control-label">Confirm password</label>

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

                            <button class="btn btn-white btn-icon showPassword" type="button" id="formShowConfirmPass">

                                <span class="icon-show"></span>

                                <span class="icon-show-off d-none"></span>

                            </button>

                        </div>

                        <div class="invalid-feedback">The password do not match</div>

                    </div>

                </div>

                <!-- /Confirm password -->



                <!-- Country -->

                <div class="form-group col-lg-4 floating-label">

                    <input type="text" class="form-control" id="inputFormCountry" name="inputFormCountry" placeholder="Lastname">

                    <label for="inputFormCountry">Country</label>

                </div>

                <!-- /Country -->



                <!-- Province -->

                <div class="form-group col-lg-4 floating-label">

                    <input type="text" class="form-control" id="inputFormProvince" name="inputFormProvince" placeholder="Lastname">

                    <label for="inputFormProvince">Province</label>

                </div>

                <!-- /Province -->



                <!-- CP -->

                <div class="form-group col-lg-4 floating-label">

                    <input type="text" class="form-control" id="inputFormCP" name="inputFormCP" placeholder="Lastname">

                    <label for="inputFormCP">CP</label>

                </div>

                <!-- /CP -->



                <!-- Road -->

                <div class="form-group col-lg-6 floating-label">

                    <select id="formSelectRoad" class="custom-select">

                        <option selected="">Street</option>

                        <option value="1">Avenue</option>

                        <option value="2">Road</option>

                    </select>

                    <label for="formSelectRoad">Type of road</label>

                </div>

                <!-- /Road -->



                <!-- Road name -->

                <div class="form-group col-lg-6 floating-label">

                    <input type="text" class="form-control" id="inputFormRoadName" name="inputFormRoadName" placeholder="Lastname">

                    <label for="inputFormRoadName">Rode name</label>

                </div>

                <!-- /Road name -->



                <!-- Number -->

                <div class="form-group col-lg-6 floating-label">

                    <input type="number" class="form-control" id="inputFormNumber" name="inputFormNumber" placeholder="Lastname">

                    <label for="inputFormNumber">Number</label>

                </div>

                <!-- /Number -->



                <!-- Door -->

                <div class="form-group col-lg-6 floating-label">

                    <input type="text" class="form-control" id="inputFormDoor" name="inputFormDoor" placeholder="Lastname">

                    <label for="inputFormDoor">Door</label>

                </div>

                <!-- /Door -->



                <!-- Address two -->

                <div class="form-group col-12 floating-label">

                    <input type="text" class="form-control" id="inputFormAddressTwo" name="inputFormAddressTwo" placeholder="Lastname" disabled>

                    <label for="inputFormAddressTwo">Address two</label>

                </div>

                <!-- /Address two -->



                <!-- Weight -->

                <div class="form-group col-12">

                    <div class="input-group">

                        <div class="floating-label flex-grow-1">

                            <input id="inputFormHeight" type="number" class="form-control" placeholder="Usuario" aria-label="Recipient's username" aria-describedby="basic-addon2" value="85">

                            <label for="inputFormHeight">Your weight</label>

                        </div>

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

                            <span class="input-group-text" id="basic-addon2">Kg</span>

                        </div>

                    </div>

                </div>

                <!-- /Weight -->



                <!-- Twitter -->

                <div class="form-group col-12">

                    <div class="input-group">

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

                            <span class="input-group-text" id="basic-addon1">@</span>

                        </div>

                        <div class="floating-label flex-grow-1">

                            <input id="inputFormTwitter" type="text" class="form-control" placeholder="Usuario" aria-label="Username" aria-describedby="basic-addon1">

                            <label for="inputFormTwitter">Your twitter handler</label>

                        </div>

                    </div>

                </div>

                <!-- /Twitter -->



                <!-- Upload file -->

                <div class="form-group col-12">

                    <div class="custom-file">

                        <input type="file" class="custom-file-input" id="formCustomFile">

                        <label class="custom-file-label" for="formCustomFile" data-browse="Upload">Upload image</label>

                    </div>

                </div>

                <!-- /Upload file -->



                <!-- Comments -->

                <div class="form-group col-12 floating-label">

                    <textarea rows="3" id="textareaFormComment" class="form-control" aria-label="With textarea" placeholder="Type"></textarea>

                    <label for="textareaFormComment">Comments</label>

                </div>

                <!-- /Comments -->



                <!-- Check -->

                <div class="form-group col-12">

                    <div class="form-check">

                        <input class="form-check-input" type="checkbox" id="inputCheckboxForm" name="inputCheckboxForm">

                        <label class="form-check-label" for="inputCheckboxForm">I Agree to use my email address to notify me</label>

                    </div>

                </div>

                <!-- /Check -->

            </div>

            <button type="button" class="btn mb-1 btn-primary">Go Premium!</button>

        </form>

    </div>

</div>