Bootstrap Form Controls

Bootstrap use different type of form controls which is given below:

  • Checkboxes

  • Radio Buttons

  • Disabling Custom Checkboxes and Radios

  • Toggle Switches

  • Custom Select Menu

  • Custom Range Inputs

  • Custom File Inputs

 

To create custom checkboxes wrap each checkbox <input> and their corresponding <label> in a <div> element, and apply the classes as shown in the following example:

 

 

Checkboxes

Ex.

 <! add Bootstrap header link here-->

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form>

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

            <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">

            <label class="custom-control-label" for="customCheck1">Custom checkbox</label>

        </div>

        <div class="custom-control custom-checkbox mt-2">

            <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2" checked>

            <label class="custom-control-label" for="customCheck2">Another custom checkbox</label>

        </div>

    </form>

</div>

</body>

 

 

Radio Buttons

 Ex.

...

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form>

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

            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">

            <label class="custom-control-label" for="customRadio1">Custom radio</label>

        </div>

        <div class="custom-control custom-radio mt-2">

            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>

            <label class="custom-control-label" for="customRadio2">Another custom radio</label>

        </div>

    </form>

</div>

</body>

Disabling Custom Checkboxes and Radios

Use disabled in to the <input> element.

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

 

 

Toggle Switches

Use .custom-switchclass in place of .custom-checkbox to render a toggle switch.

 

Custom Select Menu

Adding the class .custom-select on the <select>element.

 

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <form>

        <select class="custom-select">

            <option selected>Custom select menu</option>

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

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

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

        </select>

    </form>

</div>

</body>

 

 

Range Inputs

To create custom range inputs just apply the class .custom-range to the <input type="range">

 

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

<script>

    $(document).ready(function(){

        // Read value on page load

        $("#result b").html($("#customRange").val());

 

        // Read value on change

        $("#customRange").change(function(){

            $("#result b").html($(this).val());

        });

    });       

</script>

</head>

<body>

<div class="bs-example">

    <p class="mt-4"><strong>Note:</strong> Drag the blue circle to see how it works.</p>

    <form>

        <label for="customRange">Custom range</label>

        <input type="range" class="custom-range" id="customRange">

    </form>

    <div id="result">Current Value: <b></b></div>

</div>

</body>

 

 

Custom File Inputs

Let's try out the following example to see how it works:

Ex.

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

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

</div>

</body>

Powered  by Codersarts