Bootstrap4 Custom Forms

Bootstrap4 allows you to customize some form styles to replace the browser default styles.

Custom Checkbox

To customize a checkbox, you can set<div>as the parent element, with the class.custom-controland.custom-checkbox, place the checkbox as a child element inside the<div>, then set the checkbox totype="checkbox", with the class.custom-control-input。

For the checkbox text, use thelabeltag, and the label uses the.custom-control-labelclass,labelofforthe attribute value needs to match the checkbox's id.

Bootstrap4 Example

<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">Custom Checkbox</label> </div> </form>

Try it Yourself »

Custom Radio Button

To customize a radio button, you can set<div>as the parent element, with the class.custom-controland.custom-radio, place the radio button as a child element inside the<div>, then set the radio button totype="radio", with the class.custom-control-input。

For the radio button text, use thelabeltag, and the label uses the.custom-control-labelclass,labelofforthe attribute value needs to match the radio button'sid。

Bootstrap4 Example

<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 Button</label> </div> </form>

Try it Yourself »

Custom Controls Displayed Inline

We can use the.custom-control-inlineclass on an outer element to wrap the custom form controls, so that the custom form controls can be displayed on the same line:

Bootstrap4 Example

<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 Button 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 Button 2</label> </div> </form>

Try it Yourself »

Custom Select Menu

To create a custom select menu, you can add the<select>class to the.custom-selectelement:

Bootstrap4 Example

<form> <select name="cars" class="custom-select-sm"> <option selected>Custom Select Menu</option> <option value="Google">Google</option> <option value="Example">Example</option> <option value="Taobao">Taobao</option> </select> </form>

Try it Yourself »

If we want to set the size of the custom select menu, we can use.custom-select-sm、.custom-select-lgto set their size:

Bootstrap4 Example

<form>  <select name="cars" class="custom-select-sm"> <option selected>Smaller Custom Select Menu</option> <option value="Google">Google</option> <option value="Example">Example</option> <option value="Taobao">Taobao</option> </select>  <select name="cars" class="custom-select-lg"> <option selected>Larger Custom Select Menu</option> <option value="Google">Google</option> <option value="Example">Example</option> <option value="Taobao">Taobao</option> </select> </form>

Try it Yourself »

Custom Slider Control

We can add theinputistype="range"class in the input of.custom-rangetype to set a custom slider control:

Bootstrap4 Example

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

Try it Yourself »

Custom File Upload Control

We can add the.custom-fileclass to the parent element, then set theinputtotype="file"and add the.custom-file-input:

For the upload control text, use thelabeltag, and the label uses the.custom-file-labelclass,labelofforthe attribute value needs to match the upload control'sid。

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

Try it Yourself »

Other Extensions